JS深浅复制原理解析，让您彻底搞懂

2023-10-04 02:10:36

浅复制与深复制：JavaScript 中数据复制的艺术

在 JavaScript 的数据处理世界中，了解浅复制和深复制是至关重要的。这两者是复制对象的不同方法，它们在功能和用途上有很大的不同。让我们深入了解这些概念并找出它们的优缺点。

浅复制：复制表面属性

浅复制只复制对象最外层的属性值。它不会复制内部对象或数组的引用，而是将它们共享为对原对象的引用。这意味着，当修改浅复制的对象时，对共享引用对象的任何修改都会反映在原始对象上，反之亦然。

示例：

const person = {
  name: "John Doe",
  age: 30,
  address: {
    street: "123 Main Street",
    city: "Anytown",
    state: "CA",
  },
};

const person2 = Object.assign({}, person); // 浅复制

person2.name = "Jane Doe";
person2.address.city = "New York";

console.log(person); // { name: "John Doe", age: 30, address: { street: "123 Main Street", city: "New York", state: "CA" } }
console.log(person2); // { name: "Jane Doe", age: 30, address: { street: "123 Main Street", city: "New York", state: "CA" } }

在这个例子中，person2 是 person 的浅复制。当我们修改 person2.name 和 person2.address.city 时，person 的相应属性也会受到影响。这是因为 person2 和 person 共享对 address 对象的引用。

深复制：复制一切

与浅复制不同，深复制会完全复制一个对象，包括其属性值和对内部对象或数组的引用。这意味着，当修改深复制的对象时，原始对象不受影响，反之亦然。

示例：

const person = {
  name: "John Doe",
  age: 30,
  address: {
    street: "123 Main Street",
    city: "Anytown",
    state: "CA",
  },
};

const person2 = JSON.parse(JSON.stringify(person)); // 深复制

person2.name = "Jane Doe";
person2.address.city = "New York";

console.log(person); // { name: "John Doe", age: 30, address: { street: "123 Main Street", city: "Anytown", state: "CA" } }
console.log(person2); // { name: "Jane Doe", age: 30, address: { street: "123 Main Street", city: "New York", state: "CA" } }