如何在JavaScript中避免数组对象赋值时的引用关联？

架构老林

2026-8-5

问题解决：修改数组B时数组A同步更新的原因及修复方案

原因分析

你用B = [...A]做的是浅拷贝——这种操作只会复制数组的外层结构，但数组里的每一个对象还是和原数组A里的对象共享同一个内存引用。所以当你修改B中某个对象的属性时，本质上是在修改内存里的同一个对象，数组A自然会跟着发生变化。

修复方案

以下几种方法可以实现数组的深拷贝，让B和A彻底独立：

对象展开语法实现浅层级深拷贝
如果数组里的对象都是单层结构（没有嵌套对象），可以用map配合对象展开：

B = A.map(item => ({...item}));

这个方法会遍历A中的每个对象，复制其所有属性生成新对象，最终得到的B数组里的对象和A完全独立。

JSON序列化反序列化（适合无特殊类型的对象）
如果你的对象里没有函数、Symbol、循环引用这类特殊内容，用JSON转译是最简单的深拷贝方式：

B = JSON.parse(JSON.stringify(A));

把数组转成JSON字符串再解析回来，相当于创建了一份完全独立的副本。

递归深拷贝函数（处理嵌套对象）
如果数组里的对象有多层嵌套，上面两种方法就不够用了，可以写一个递归的深拷贝函数：

function deepCopy(obj) {
  if (typeof obj !== 'object' || obj === null) return obj;
  // 处理数组
  if (obj instanceof Array) return obj.map(item => deepCopy(item));
  // 处理对象
  const newObj = {};
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      newObj[key] = deepCopy(obj[key]);
    }
  }
  return newObj;
}

// 初始化B
B = deepCopy(A);