复制对象数组的最佳实践

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

我认为这里的困惑在于深层克隆还是浅层克隆，这基本上归结为是否遵循引用。

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

深度复制 ：深度复制可复制所有字段，并复制由字段指向的动态分配的内存。 当将对象及其引用的对象一起复制时，将发生深层复制。

通常，对浅层克隆使用slice / spread，对深层克隆使用JSON.parse/stringify 。

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

更多信息在这里 。

Answer 2

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

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

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

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);