JavaScript合并原数组与反转数组后仅为指定索引对象新增字段如何实现

你遇到的现象是JavaScript引用类型的特性导致的：

• 数组中存储的对象都是内存引用地址，reverse()、数组展开...、slice()这类数组操作都只会复制数组本身的结构，不会深度复制内部的对象元素
• 你构造的newArray中，索引0和索引5的name:"a"对象指向同一块内存空间，修改任意一个都会同步影响另一个

你只需要在构造新数组时，对内部的对象元素做拷贝切断引用关联即可，针对你的场景（对象只有一层属性），用对象浅拷贝就足够：

let array = [{name:"a"},{name:'b'},{name:'c'}];
// 对每个元素做浅拷贝，生成全新的对象
let newArray = [
  ...array.map(item => ({...item})),
  ...array.reverse().map(item => ({...item}))
];
newArray[0].id = 1;

运行后输出结果为：

[{"name":"a","id":1},{"name":"b"},{"name":"c"},{"name":"c"},{"name":"b"},{"name":"a"}]

如果你的对象存在多层嵌套属性，可以用原生深拷贝方法structuredClone处理：

let array = [{name:"a"},{name:'b'},{name:'c'}];
let newArray = [
  ...structuredClone(array),
  ...structuredClone(array.reverse())
];
newArray[0].id = 1;

你之前尝试slice无效的原因：slice是数组的浅拷贝方法，仅复制数组结构，不会处理内部的引用类型元素，无法切断对象的引用关联。

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