如何在对象中传播语法？

Question

遇到了使用扩展语法创建新对象的概念，如下所示

 const human = { age: 20 }; const john = { ...human }; john.age = 10; console.log(human.age); // 20 console.log(john.age); // 10 

如上所示，人类对象可以保留原始值。 现在看看下面的代码：

 const human = { age: 20, cars: ["toyota", "honda"] }; const john = { ...human }; john.cars[1] = "camero"; console.log(human.cars); // ["toyota", "camero"] console.log(john.cars); // ["toyota", "camero"] 

谁能解释为什么上面的情况发生了？ 为什么人类的汽车对象会发生变化？ 在我看来，开发人员很可能在不理解如何避免不一致行为的情况下犯错误

Answer 1

对象human仅包含对包含["toyota", "honda"]的数组的引用 。 当使用扩展操作者复制对象，则还复制参考 ，这意味着john具有相同的参考，因此john.cars是相同的阵列human.cars 。

因此，如果修改john.cars ，则还要修改human.cars因为它们是相同的数组。 如果要克隆数组，也可以使用spread运算符执行此操作：

 const human = { age: 20, cars: ["toyota", "honda"] }; const john = { ...human }; john.cars = [ ... human.cars ]; john.cars[1] = "camero"; console.log(human.cars); // ["toyota", "honda"] console.log(john.cars); // ["toyota", "camero"] 

如果克隆具有对象属性的对象，您还将看到此类行为：

 const human = { name: { first: "John", last: "Jackson" } }; const human2 = { ... human }; human2.name.first = "Ellen"; console.log(human.name.first); // Ellen 

那是因为spread运算符只复制对name对象的引用 ，而不是name对象本身。 因此，修改一个会修改另一个，因为它们是同一个对象。 这被称为浅克隆 。 如果您想避免这种混淆，则需要执行深度克隆 。

最简单的方法是转换为JSON然后转换回：

 const human = { name: { first: "John", last: "Jackson" } }; const human2 = JSON.parse(JSON.stringify(human)); human2.name.first = "Ellen"; console.log(human.name.first); // John console.log(human2.name.first); // Ellen