对象数组使用spread syntax扩展运算符赋值与直接赋值的区别是什么

基础前提 #

我们统一使用示例数组作为说明基础：

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

核心区别 #

写法2：const referencedArray = array #

这是引用赋值，不会生成新的数组：

• 仅把原数组array的内存指向地址赋值给新变量referencedArray，两个变量本质上对应同一个数组
• 不管修改哪个变量对应的数组本身（比如增删元素、重排顺序等），另一个变量访问到的结果会同步变更

写法1：const referencedArray = [...array] #

这是数组浅拷贝，会生成全新的独立数组：

• 扩展语法会遍历原数组的所有元素，把元素依次放到新创建的数组中，新数组和原数组的内存地址完全独立
• 对新数组本身做增删、重排等操作，完全不会影响原数组

注意：浅拷贝只会复制数组第一层的内容，数组内的元素如果是对象、数组这类引用类型，新旧数组的对应元素还是指向同一个内存地址。比如修改referencedArray[0].age = 60，原数组array[0].age也会同步变为60。

效果示例 #

// 写法2的效果验证
const array = [{age:50}, {age:27}]
const referencedArray = array
referencedArray.push({age:30})
console.log(array.length) // 输出 3，原数组被同步修改

// 写法1的效果验证
const array = [{age:50}, {age:27}]
const referencedArray = [...array]
referencedArray.push({age:30})
console.log(array.length) // 输出 2，原数组不受影响

// 浅拷贝的引用特性验证
referencedArray[0].age = 60
console.log(array[0].age) // 输出 60，元素对象是共享引用的

内容的提问来源于stack exchange，提问作者Victor