javascript – 如何在对象中传播语法？

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

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"]

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

解决方法:

对象human仅包含对包含[“toyota”,“honda”]的数组的引用.当您使用spread运算符复制对象时,您还复制了引用,这意味着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

标签：javascript,ecmascript-6,spread-syntax
来源： https://codeday.me/bug/20190627/1304199.html