为什么更改复制数组中的对象也会影响原始对象? [英] Why does changing object in copied array also affects the object from original one?
问题描述
在这段代码中,我使用扩展运算符将obj
复制到了copiedObj
中.然后将checked
属性值修改为false
.但是,当我console.log(obj.checked[0])
时,它返回false而不是true.而且,似乎copiedObj
中的checked
值也更改了原始属性值.这是为什么?
In this code, I copied obj
using spread operator into copiedObj
. Then modified the checked
property value to false
. However when I console.log(obj.checked[0])
, it returns false not true. And it seems like the checked
value in copiedObj
also changed original property value. Why is that?
const obj = [{id: 1, checked: true}];
const copiedObj = [...obj];
copiedObj.checked[0] = false;
console.log(obj.checked[0]);
推荐答案
obj
和copiedObj
是数组,而不是普通对象.更改copiedObj
的状态(通过向其添加checked
属性)不会更改obj
的状态,因为它们是独立的数组.
obj
and copiedObj
are arrays, not plain objects. Changing the state of copiedObj
(by adding a checked
property to it) does not change the state of obj
because they're separate arrays.
但是,两个数组都包含对相同对象(上面带有cheecked
的对象)的引用.因此,如果您这样做:
But, both of the arrays contain a reference to the same object (the one with cheecked
on it). So if you did:
checkedObj[0].checked = true;
这将更改该对象的状态,您将看到是在obj[0]
还是checkedObj[0]
上查找该对象的.
that would change the state of that one object, which you would see whether you looked up that object on obj[0]
or checkedObj[0]
.
If you want to make a deep copy so that you have separate arrays and separate objects, see this question's answers.
由于我99%确信您的意思是checkedObj[0].checked = true
,所以我将解释这段代码中发生的事情:
Since I'm 99% sure you meant checkedObj[0].checked = true
, I'll explain what's happening in this code:
// Creates an array containing an object
const obj = [{id: 1, checked: true}];
// Creates a new array that contains the *same* object (NOT a *copy* of it)
const copiedObj = [...obj];
// Sets `checked` on that one object that is in both arrays
copiedObj[0].checked = false;
// Looks at the `checked` property on that one object that is in both arrays
console.log(obj[0].checked);
逐步:
之后
// Creates an array containing an object
const obj = [{id: 1, checked: true}];
在内存中您有类似的东西
in memory you have something like
+−−−−−−−−−−−−−+
obj:Ref44329−−−−−>| (array) |
+−−−−−−−−−−−−−+ +−−−−−−−−−−−−−−−+
| 0: Ref82445 |−−−>| (object) |
+−−−−−−−−−−−−−+ +−−−−−−−−−−−−−−−+
| id: 1 |
| checked: true |
+−−−−−−−−−−−−−−−+
那么当你做
// Creates a new array that contains the *same* object (NOT a *copy* of it)
const copiedObj = [...obj];
您有类似的东西:
+−−−−−−−−−−−−−+
obj:Ref44329−−−−−−−−−−>| (array) |
+−−−−−−−−−−−−−+
| 0: Ref82445 |−−+
+−−−−−−−−−−−−−+ |
|
| +−−−−−−−−−−−−−−−−+
+−−>| (object) |
+−−−−−−−−−−−−−+ | +−−−−−−−−−−−−−−−−+
checkedObj:Ref12987−−−>| (array) | | | id: 1 |
+−−−−−−−−−−−−−+ | | checked: true |
| 0: Ref82445 |−−+ +−−−−−−−−−−−−−−−−+
+−−−−−−−−−−−−−+
那么当你做
// Sets `checked` on that one object that is in both arrays
copiedObj[0].checked = false;
它更改两个数组都指向的对象
it changes the object that both arrays point to
+−−−−−−−−−−−−−+
obj:Ref44329−−−−−−−−−−>| (array) |
+−−−−−−−−−−−−−+
| 0: Ref82445 |−−+
+−−−−−−−−−−−−−+ |
|
| +−−−−−−−−−−−−−−−−+
+−−>| (object) |
+−−−−−−−−−−−−−+ | +−−−−−−−−−−−−−−−−+
checkedObj:Ref12987−−−>| (array) | | | id: 1 |
+−−−−−−−−−−−−−+ | | checked: false |
| 0: Ref82445 |−−+ +−−−−−−−−−−−−−−−−+
+−−−−−−−−−−−−−+
...因此,无论您通过哪个数组查看它,查找它都会得到false
.
...so looking it up will give you false
regardless of which array you look at it through.
这篇关于为什么更改复制数组中的对象也会影响原始对象?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!