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

时间:2018-01-16 20:04:04

标签: javascript arrays

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

当我通过扩展运算符或方法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

2 个答案:

答案 0 :(得分:1)

我认为这里的混淆是克隆,这基本上归结为是否遵循引用。

  

浅拷贝:浅拷贝是对象的逐位拷贝。一个新的   创建的对象具有原始值的精确副本   宾语。如果对象的任何字段是对其他字段的引用   对象,仅复制参考地址,即仅复制存储器   地址被复制。

     

深层复制:深层复制会复制所有字段,然后制作   字段指向的动态分配内存的副本。一个   将对象与对象一起复制时发生深度复制   它指的是。

通常,对于浅克隆使用Get-ADUser / spread,对于深克隆使用slice

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

更多信息here

答案 1 :(得分:0)

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

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

可以使用Object.assign({}, obj)复制对象。 可以使用.slice()复制数组。但是,在代码中,我们也希望迭代内部数组,因为您永远不知道该内部数组是否还包含更多的数组或对象。当我们遇到一个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);