为什么更改复制数组中的对象也会影响原始对象? [英] 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屋！