JavaScript中的深浅拷贝

浅拷贝

让我们举一个例子来更好地理解浅拷贝

const array1 = [1, 2, 3];
const array2 = array1;

array2.push(4)

console.log(array2); // [1,2,3,4]
console.log(array1); // [1,2,3,4]

在上面的例子中，我们已经定义array1了[1,2,3]，然后我们声明array2并分配array1给它。现在我们push4送到array2

当我们再控制台输出array2,显示为 [1,2,3,4]，但是当我们输出array1，仍然输出的是[1,2,3,4]。

这是因为因为当我们分配array1给它时array2，我们实际上传递了对它的引用，所以array2有相同的引用array1。如果我们这样做，array1 === array2我们会得到true。

让我们使用扩展运算符进行 array1 的浅拷贝

const array1 = [1,2,3];
const array2 = [...array1];

array2.push(4);

console.log(array2); // [1,2,3,4]
console.log(array1); // [1,2,3]

在上面的示例中，我们使用扩展运算符来复制array1 的数据。我们再控制台输出array2和array1。我们会发现更改array2并不会影响array1，因为他们的引用地址不同！如果我们执行array1 === array2，我们将得到false。因此，我们使用扩展运算符解决了数组突变。但是有一个问题，如果array1s是一个嵌套数组，内部有对象或者数组，那么array2的修改仍然会影响array1!为了解决这个问题，我们需要做z真正的深拷贝。

深拷贝

要复制嵌套数组或对象，我们使用深拷贝。获得深拷贝的简单方法是使用JSON.stringify和JSON.parse. 让我们看看例子

const team1 = {
lead: "Jhon",
backend: "Aron",
frontend: {a: "Jane", b: "Tony"}
}

const team2 = JSON.parse(JSON.stringify(team1));

team2.frontend.a = "Rhodey";

console.log(team1 === team2) // false

在这里，我们使用 JSON 方法来获取嵌套对象的深层副本。让我们看看如何编写我们自己的深拷贝函数。

const deepCopy = (obj) => {
        if (typeof obj !== "object" || obj === null) return obj;

        const newObject = Array.isArray(obj) ? [] : {};

        for (let key in obj) {
          const value = obj[key];
          newObject[key] = deepCopy(value);
        }
        return newObject;
      };

在deepCopy函数内部，我们传递需要深度复制的对象。首先我们检查传递的对象的数据类型，如果它不是对象，那么我们将返回它，否则我们检查我们传递的对象是否是数组，因为数组的类型也是对象。然后取决于它是数组还是对象，我们有空的启动器。然后我们使用for in循环来循环元素。然后我们使用递归并传递值，如果数据类型的值是对象整个过程重复，否则返回并循环继续，最后我们得到我们的深层副本。