在对象数组中传播语法答案

【问题标题】：Spread syntax in an array of objects在对象数组中传播语法
【发布时间】：2021-12-01 05:30:25
【问题描述】：

我有一个关于扩展语法和对象数组的问题。

有一个对象数组，例如：

const array = [{age:50}, {age:27}]

根据这个答案：https://stackoverflow.com/a/54138394/6781511，使用扩展语法将导致referencedArray 拥有array 的浅拷贝。

const referencedArray = [...array]

那么使用扩展语法和不使用它有什么区别呢？

const referencedArray = [...array]

对

const referencedArray = array

【问题讨论】：

使用扩展操作符会做一个浅拷贝，不使用它......不会。 clonedArray 在这种情况下是一个坏名字，它只是对同一对象的另一个引用。
使用扩展语法（它不是“运算符”）将有两个数组，使用简单赋值只有一个。
const referencedArray1 = [...array]; const referencedArray2 = array; array.push("hello"); console.log(referencedArray1, referencedArray2);

标签： javascript object multidimensional-array ecmascript-6

【解决方案1】：

请看下面的例子。

当您进行浅拷贝时，分配给原始元素不会影响克隆。当您不制作副本时，分配给原件会影响其他参考。

由于它是浅拷贝，分配给数组中对象的属性会影响所有对象。通过传播只复制了数组，而不是对象。

const array = [{age:50}, {age:27}];
const clonedArray = [...array];
const notClonedArray = array;

array[0] = {age: 100};
array[1].age = 30;
console.log("Original:", array);
console.log("Cloned:", clonedArray);
console.log("Not cloned:", notClonedArray);

【讨论】：

【解决方案2】：

数组中的对象在两者中具有相同的引用，但在传播场景中，修改数组不会影响原始。

const array = [{ name: 'Joe' }, { name: 'Paul' }];
const spreadArray = [...array];
const cloneArray = array;

spreadArray[3] = { name: 'Bob' };
console.log(array); //  [{ name: 'Joe' }, { name: 'Paul' }];

cloneArray[3] = { name: 'Bob' };
console.log(array); //  [{ name: 'Joe' }, { name: 'Paul' }, { name: 'Bob'} ];

这是因为cloneArray 是通过引用array 分配的，而spreadArray 分配给与array 具有相同元素的新数组。这也是为什么

cloneArray === array; // true
spreadArray === array; // false

【讨论】：