在前端开发中，我们经常会遇到分配对象属性值时出现意外情况。例如，在下面的示例代码中：
const obj = {
a: 1,
b: 2
}
const { a } = obj;
a = 3;
console.log(obj.a); // 输出 1当我们将 obj 对象的 a 属性值分配给 a 变量后，并试图将 a 变量重新赋值为 3 时，却发现 obj.a 的值仍为 1 而不是 3。
这是因为 JavaScript 中的基本数据类型（比如字符串、数字、布尔值等）被传递或赋值时，是通过复制它们的值创建一个新的变量。而对象和数组则是通过引用来传递或赋值的。也就是说，当我们把一个对象分配给另一个变量时，两个变量实际上指向同一个对象，而不是创建一个新的对象。
因此，当我们在将对象属性值分配给一个变量后，如果试图通过该变量更改对象属性值，其实是通过引用修改了原始对象的属性值，而不是创建一个新的属性。而此时，原始对象的其他引用变量将同时反映出这种更改。
例如，下面的代码演示了如何使用解构赋值来修改对象属性值：
const obj = {
a: 1,
b: 2
}
const { a } = obj;
a = 3;
console.log(obj.a); // 输出 1
const { b } = obj;
b = 4;
console.log(obj.b); // 输出 2在第一个示例中，我们尝试将 obj.a 分配给变量 a，然后将 a 变量重新赋值为 3。由于 a 只是基本类型的复制，因此不会更改原始对象的属性值。
在第二个示例中，我们尝试将 obj.b 分配给变量 b，然后将 b 变量重新赋值为 4。这实际上是通过引用修改了 obj 对象的 b 属性值，因此我们最终得到的输出结果为 2 而不是 4。
所以，如果想要修改 obj 对象的属性值，应该直接使用它的属性名而不是将其分配给一个变量。或者，如果必须使用变量，请确保使用对象的浅拷贝来创建新的变量，而不是引用原始对象。例如：
const obj = {
a: 1,
b: 2
}
const newObj = Object.assign({}, obj);
newObj.a = 3;
console.log(obj.a); // 输出 1
console.log(newObj.a); // 输出 3在上面的代码中，我们使用 Object.assign() 方法将原始对象的浅拷贝分配给 newObj 变量。然后，我们修改 newObj 对象的 a 属性值为 3，而不影响原始对象的属性值。
在开发过程中要注意这个问题，避免出现意外情况。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/14586