变身赋值高手：掌握JS对象赋值技巧，告别浅拷贝烦恼！

2023-03-30 08:16:15

对象赋值：浅拷贝与深拷贝

在 JavaScript 中，对象赋值是一种至关重要的操作，可以让你在应用程序中创建和操作复杂的数据结构。然而，理解浅拷贝和深拷贝之间的区别对于避免意外问题至关重要。

浅拷贝

浅拷贝只复制对象的第一层属性值。如果属性值是一个引用类型，则它只会复制引用的地址，这意味着原始对象和新对象引用同一个内存位置。

示例：

const obj1 = {
  name: "John",
  age: 30,
  address: {
    street: "Main Street",
    city: "New York",
  },
};

const obj2 = obj1; // 浅拷贝

obj2.name = "Jane";
obj2.address.city = "Los Angeles";

console.log(obj1); // { name: "Jane", age: 30, address: { street: "Main Street", city: "Los Angeles" } }

在这个例子中，当我们修改 obj2 的属性时，obj1 也受到影响，因为它们指向同一个内存位置。

深拷贝

深拷贝复制对象及其所有子对象的完整值。这意味着创建了一个与原始对象完全独立的新对象，修改新对象中的属性值不会影响原始对象。

示例：

const obj1 = {
  name: "John",
  age: 30,
  address: {
    street: "Main Street",
    city: "New York",
  },
};

const obj2 = JSON.parse(JSON.stringify(obj1)); // 深拷贝

obj2.name = "Jane";
obj2.address.city = "Los Angeles";

console.log(obj1); // { name: "John", age: 30, address: { street: "Main Street", city: "New York" } }

在上面的例子中，obj2 是一个与 obj1 完全独立的新对象。修改 obj2 的属性不会影响 obj1。

展开运算符

除了浅拷贝和深拷贝之外，还可以使用展开运算符（...）来创建对象的副本。它将对象的属性逐个展开，并将其作为新对象的属性。

示例：

const obj1 = {
  name: "John",
  age: 30,
  address: {
    street: "Main Street",
    city: "New York",
  },
};

const obj2 = { ...obj1 }; // 展开运算符

obj2.name = "Jane";
obj2.address.city = "Los Angeles";

console.log(obj1); // { name: "John", age: 30, address: { street: "Main Street", city: "New York" } }

在这个例子中，obj2 也是一个与 obj1 完全独立的新对象。

比较浅拷贝和深拷贝

特征	浅拷贝	深拷贝
修改影响	修改新对象也会影响原始对象	修改新对象不会影响原始对象
使用场景	部分属性复制、基本类型属性值	完整对象复制、引用类型属性值
复制对象	对象的第一层	对象的完整层次结构