使用扩展运算符克隆带有数组的对象答案

【问题标题】：Clone Object with arrays using spread operator使用扩展运算符克隆带有数组的对象
【发布时间】：2018-03-31 20:36:04
【问题描述】：

如何使用新的扩展运算符克隆一个包含数组的对象？

示例对象：

vehicles: { 
  cars:  [1, 2],
  boats: [3, 4]
}

我想要一个包含数组的新对象。在那个新对象中，我希望能够在不引用和影响车辆对象的情况下更改或添加到数组中。

【问题讨论】：

你能指定你的新对象的内容吗？
扩展运算符制作浅拷贝，因此不幸的是仍然会引用任何深层对象。
这能回答你的问题吗？ How to Deep clone in javascript

标签： javascript spread-syntax

【解决方案1】：

如果您正在寻找性能，使用 JSON.parse(JSON.stringify(object)) 进行深拷贝和对象不是最好的方法，而是使用这样的深拷贝：

let x1 = {
  numbers: {
    number: 1
  }
}
let y1 = copy(x1)
x1.numbers.number++
  console.log(x1)
console.log(y1)

function copy(aObject) { // Deep Clone Object from https://stackoverflow.com/a/34624648/16642626
  if (!aObject) {
    return aObject;
  }

  let v;
  let bObject = Array.isArray(aObject) ? [] : {};
  for (const k in aObject) {
    v = aObject[k];
    bObject[k] = (typeof v === "object") ? copy(v) : v;
  }

  return bObject;
}

【讨论】：

【解决方案2】：

Object.assign 和扩展运算符创建浅克隆，只有一层深，超出了它们的引用。我发现的最好方法（感谢MDN）是使用 JSON 函数来创建真正的克隆。

let vehicles = { 
  cars:  [1, 2],
  boats: [3, 4],
};

let test = JSON.parse(JSON.stringify(vehicles));

console.log(vehicles, test);

test.cars[0] = 5;
vehicles.cars[0] = 7;

console.log(vehicles, test);

【讨论】：

很好的解决方案！
如果你有大对象怎么办？在那种情况下它会处理吗？
我不明白为什么不这样做，如果你有一个大的单级对象我建议使用 Object.assign，（个人意见）我认为最好使用内置的语言函数，当他们将完成这项工作。对于大型多级对象，此方法可以正常工作。
似乎不适用于更深的属性具有数组的对象。数组总是空白
我刚刚在控制台（chrome 67）中使用深度嵌套的数组和对象重新测试了这个，没有遇到这个问题。您能否粘贴您的示例对象，以及您使用的是哪个操作系统和浏览器？ :) 乐于帮助调试