javascript - Object.assign 是如何工作的？

Question

我正在尝试更改数组中的字段。我使用 find 函数获取对象，然后使用 Object.assign 覆盖数组中的值。

但是，在一种情况下它有效:

Object.assign(item2, {id:3, name: "Do"});

在另一种情况下，它不会:

item = Object.assign({}, {id:3, name: "Do"});

这两种情况有什么不同？

let arr = [{id:1, name:"John"}, {id:2, name: "Doe"}];
let item = arr.find((x)=> x.id === 2);

//the array is not changed!
item = Object.assign({}, {id:3, name: "Do"});
console.log(arr);

let item2 = arr.find((x)=> x.id === 2);
//the array is changed!
Object.assign(item2,  {id:3, name: "Do"});
console.log(arr);

来源:http://jsbin.com/mametudemo/1/edit?html,js,console

Answer 1

你有

let item = arr.find((x)=> x.id === 2);

和

let item2 = arr.find((x)=> x.id === 2);

在这两种情况下，变量都是对同一对象的“引用”，该对象包含在数组 arr 中。这意味着，如果您更改其中任何一个，更改会反射(reflect)到其他对象(甚至在数组中)，因为它们实际上引用完全相同的对象。

现在，您以两种不同的方式修改这两个变量。在这种情况下

Object.assign(item2, {id:3, name: "Do"});

您正在将新值合并到 item2 中，因为它是一个引用，所以更改会反射(reflect)到数组中。

第二种情况:

item = Object.assign({}, {id:3, name: "Do"});

您将新值合并到一个全新的对象中(assign {} 的第一个参数)，然后覆盖变量 item 与它。现在 item 不再是对数组内对象的引用。它是一个新对象，因此数组中的对象没有被触及。