对象数组中的扩展语法

Question

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

有一个对象数组，如:

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

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

const referencedArray = [...array]

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

const referencedArray = [...array]

和

const referencedArray = array

Answer 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);

Answer 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