使用对象复制数组的最佳实践

Question

我不明白复制数组的工作原理以及从数组复制对象的最佳方法是什么。

当我通过扩展运算符或方法 slice() 创建一个作为现有数组副本的新数组时，任何操作仍会更改两个数组中的值。

示例：

let array = [{count: 10}, {count: 20}, {count: 30}, {count: 40}];
let newArray = array.slice();

newArray[1].count = 0;
// console.log(array[1].count === newArray[1].count);
// > true

这意味着我应该使用 JSON.parse(JSON.stringify(array))？

示例：

let array = [{count: 10}, {count: 20}, {count: 30}, {count: 40}];
let arrayByJSON = JSON.parse(JSON.stringify(array));

arrayByJSON[1].count = 5;
// console.log(array[1].count === arrayByJSON[1].count)
// false

Answer 1

我认为这里的混淆在于 deep 与 shallow 克隆，这基本上归结为是否遵循参考。

浅拷贝：浅拷贝是对象的按位拷贝。一个新的 创建的对象具有原始值的精确副本 目的。如果对象的任何字段是对其他字段的引用 对象，仅复制引用地址，即仅复制内存 地址已复制。

深拷贝：深拷贝复制所有字段，并使 由字段指向的动态分配内存的副本。一种 当对象与对象一起复制到 它所指的。

一般来说，slice/spread 用于浅克隆，JSON.parse/stringify 用于深度克隆。

在您的情况下，请使用 JSON.parse(JSON.stringify(array))，因为您不希望在克隆期间保留引用。

更多信息here。

Answer 2

您可以通过使用.slice 或[...] 来复制数组的元素，但是，不能以这种方式复制的是多维数组或对象，因为它们被存储为引用。

使用 JavaScript 语法，我们可以轻松确定项目是数组还是对象，并使用适当的方法复制它们。

可以使用Object.assign({}, obj) 复制对象。 可以使用.slice() 复制数组。然而，在代码中，我们也想遍历内部数组，因为您永远不知道该内部数组是否还会包含更多数组或对象。我们可以通过在遇到数组实例时简单地递归调用我们的深拷贝函数来确保这个问题不会给我们带来任何麻烦。

function deepCopyArray(arr) {
  return arr.map(item => {
    if (Array.isArray(item)) {
      return deepCopyArray(item);
    }
    if (typeof item === "object") {
      return Object.assign({}, item);
    }
    else return item;
  });
}

function deepCopyArray(arr) {
  return arr.map(item => {
    if (Array.isArray(item)) {
      return deepCopyArray(item);
    }
    if (typeof item === "object") {
      return Object.assign({}, item);
    }
    else return item;
  });
}



let array = [{
  count: 10
}, {
  count: 20
}, {
  count: 30
}, {
  count: 40
}];
let newArray = deepCopyArray(array);

newArray[1].count = 0;
console.log(newArray, array);