[英]How does Object.assign work anyway?
I'm trying to change the field in the array. 我正在尝试更改数组中的字段。 I used find
function to get the object and then I used Object.assign
to overwrite the value from the array. 我使用find
函数来获取对象,然后使用Object.assign
覆盖数组中的值。
However, in one case it works: 但是,在一种情况下,它可以工作:
Object.assign(item2, {id:3, name: "Do"});
and in the other case, it doesn't: 在另一种情况下,它不会:
item = Object.assign({}, {id:3, name: "Do"});
What's different for those two cases? 这两种情况有什么不同?
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);
Source: http://jsbin.com/mametudemo/1/edit?html,js,console 资料来源: http : //jsbin.com/mametudemo/1/edit?html,js,console
In the first case, you create a new object and assign it to item
. 在第一种情况下,您将创建一个新对象并将其分配给item
。 arr[1]
does not change because you have not used the reference to it, like arr[1]
不会更改,因为您没有使用对其的引用,例如
arr[1] = Object.assign({}, { id: 3, name: "Do" });
With the second approach, you take the object and change the properties with the given object. 使用第二种方法,您可以获取对象并使用给定的对象更改属性。
let arr = [{ id: 1, name: "John" }, { id: 2, name: "Doe" }]; let item = arr.find((x) => x.id === 2); item = Object.assign({}, { id: 3, name: "Do" }); console.log(arr); // the array is not changed! let item2 = arr.find((x) => x.id === 2); Object.assign(item2, { id: 3, name: "Do" }); console.log(arr); // the array is changed!
Here is what happens. 这是发生了什么。 You find item
: 您找到item
:
let item = arr.find((x)=> x.id === 2);
At this point item
is a reference to corresponding array element. 此时, item
是对相应数组元素的引用 。 When you later do assignment: 以后做作业时:
item = Object.assign({}, {id:3, name: "Do"});
you overwrite value of the item
(previously it was a reference) to a new object, which is not a reference to original array anymore. 您将item
值(以前是引用)覆盖到一个新对象,该对象不再是对原始数组的引用。 Hence array is not affected. 因此,数组不受影响。
There is a typo/error in your code causing it to not work. 您的代码中有错别字/错误,导致它无法正常工作。
The first time you attempt to change the object you use item = Object.assign({}, {id:3, name: "Do"});
第一次尝试更改对象时,请使用item = Object.assign({}, {id:3, name: "Do"});
. 。 Notice the {}
as the first param to Object.assign
... that should be item
. 注意{}
是Object.assign
...的第一个参数,应该是item
。
let arr = [{id:1, name:"John"}, {id:2, name: "Doe"}]; let item = arr.find((x)=> x.id === 2); //the array is not changed! Object.assign(item, {id:3, name: "Do"}); console.log(arr); let item2 = arr.find((x)=> x.id === 3); //the array is changed! Object.assign(item2, {id:3, name: "Doa"}); console.log(arr);
First argument of Object.assign
is target
. Object.assign
第一个参数是target
。
This is used to append properties and then reference of same object are returned. 这用于附加属性,然后返回相同对象的引用。
So in first case, properties are added to an existing object item2
. 因此,在第一种情况下,将属性添加到现有对象item2
。 But if you assign this to a variable to say temp
and do temp.id = 10
, this will also change in item2
但是,如果将其分配给变量以说temp
并执行temp.id = 10
,那么这也会在item2
更改
To avoid this, item = Object.assign({}, {id:3, name: "Do"});
为了避免这种情况, item = Object.assign({}, {id:3, name: "Do"});
is used. 用来。 This will copy all properties in a blank object and return its reference. 这会将所有属性复制到一个空白对象中并返回其引用。 So basically you have copied object and not just reference. 因此,基本上您已经复制了对象,而不仅仅是引用。
You have 你有
let item = arr.find((x)=> x.id === 2);
and 和
let item2 = arr.find((x)=> x.id === 2);
In both cases the variables are a "reference" to the same object, the object contained inside the array arr
. 在这两种情况下,变量都是对同一对象的“引用”,该对象包含在数组arr
。 That means that if you change any of them, the changes are reflected into the others (even in the array) because they actually refer to exact same object. 这意味着,如果更改其中任何一个,这些更改都会反映到其他更改中(即使在数组中也是如此),因为它们实际上是指完全相同的对象。
Now, you modify the two variables in two different ways. 现在,您以两种不同的方式修改两个变量。 In this case 在这种情况下
Object.assign(item2, {id:3, name: "Do"});
You're merging the new values into item2
, and because it is a reference, the changes are reflected into the array. 您正在将新值合并到item2
,并且由于它是引用,因此更改将反映到数组中。
In the second case: 在第二种情况下:
item = Object.assign({}, {id:3, name: "Do"});
You're merging the new values in a brand new object (the first parameter of assign {}
) and then you overwrite the variable item
with it. 您正在将新值合并到一个全新的对象中(assign {}
的第一个参数),然后用它覆盖变量item
。 Now item
is no longer a reference to the object inside the array. 现在item
不再是对数组内部对象的引用。 It is a new object, and consequently the object inside the array is not touched. 它是一个新对象,因此不会触摸数组内的对象。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.