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

Posted 2023-02-22

【中文标题】使用扩展运算符克隆带有数组的对象

【英文标题】：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

【参考方案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://***.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）中使用深度嵌套的数组和对象重新测试了这个，没有遇到这个问题。您能否粘贴您的示例对象，以及您使用的是哪个操作系统和浏览器？ :) 乐于帮助调试