JS数组合并后修改元素影响原数组怎么办

一、现象重现：为什么合并后修改元素会“牵一发而动全身”

当数组元素全为字符串、数字或布尔值等基本数据类型时，无论是使用展开运算符还是 concat()，修改合并后的新数组都不会波及原数组。但一旦数组项是引用类型（如纯对象 {} 或嵌套数组 []），问题就会暴露。

// 准备两个包含对象元素的初始数组
const departmentA = [
  { id: 101, name: "Alice", role: "Developer" },
  { id: 102, name: "Bob", role: "Designer" }
];

const departmentB = [
  { id: 201, name: "Charlie", role: "Product Manager" }
];

// 使用展开运算符合并
const allStaff = [...departmentA, ...departmentB];

// 业务操作：修改合并后数组中第一个员工的岗位
allStaff[0].role = "Tech Lead";

// 观察原数组 departmentA 中的对应项
console.log("departmentA[0].role:", departmentA[0].role);
console.log("allStaff[0] === departmentA[0]:", allStaff[0] === departmentA[0]);

许多开发者误以为 [...departmentA] 或 departmentA.concat(...) 创建了一个“全新”的数组，因此里面的元素也是崭新的。然而在 JavaScript 内存模型中，数组本身确实是一个新开辟的数组容器，但容器内部索引槽所存放的，仅仅是原始对象在堆内存中的内存地址指针。

如上图所示，在浅拷贝模式下，arr1[0] 与 shallow[0] 存储的物理地址同为 0x8801。当访问 shallow[0].role = "guest" 时，V8 引擎顺着指针找到堆内存中的实际对象并直接覆写了字段。因此，任何持有该指针的变量都会立刻读取到修改后的值。

二、四步排查与解决流程：精准阻断原数组污染

遇到原数组被修改的问题时，不需要盲目重构所有数据逻辑。按照以下四个标准步骤，可以清晰评估数据层级并落实最适合的解决方案：

1. 步骤 1：判定数组元素的数据类型
   检查数组中是否确实存在对象、数组或类实例。如果数组元素仅是 number、string 等原始类型，直接合并无需做深拷贝；如果存在 typeof item === 'object' && item !== null，则必须采取内存隔离措施。
2. 步骤 2：评估对象嵌套层级与内部数据复杂度
   判断对象是简单的键值对（例如 { id: 1, name: 'A' }），还是深层嵌套了子数组、子对象（例如 { id: 1, info: { age: 20 } }），或者包含 Date、RegExp、Map、Set 等特殊类型。
3. 步骤 3：选定深拷贝或解构映射方案并执行合并
   根据环境与数据复杂度，在现代标准 API structuredClone()、单层映射解构 .map()、JSON 序列化或递归深拷贝中选定方案。
4. 步骤 4：编写断言验证内存隔离效果
   在开发和测试环节，校验 newArr[0] !== oldArr[0]，并验证属性修改后原数组字段未发生变动。

三、四大解决方案与完整代码实现

方案 1：现代原生标准深拷贝 structuredClone()（首选推荐）

structuredClone() 是 HTML 规范与 ECMAScript 运行时接纳的内建全局深拷贝 API（支持 Node.js 17+、Chrome 98+、Firefox 94+、Safari 15.4+ 等现代环境）。它由底层引擎实现，能够完整处理深层嵌套、循环引用，以及 Date、RegExp、Map、Set、ArrayBuffer 等复杂类型。

// 待合并的原数组
const originalA = [{ id: 1, meta: { tags: ["alpha", "beta"] } }];
const originalB = [{ id: 2, meta: { tags: ["gamma"] } }];

// 关键步骤：在合并的同时进行深拷贝
const mergedSafe = structuredClone([...originalA, ...originalB]);

// 修改新数组中的深层属性
mergedSafe[0].meta.tags.push("new-tag");
mergedSafe[0].id = 999;

// 验证原数组状态
console.log("originalA[0].id:", originalA[0].id); // 保持 1 不变
console.log("originalA tags 长度:", originalA[0].meta.tags.length); // 保持 2 不变
console.log("引用是否隔离:", mergedSafe[0] !== originalA[0]); // true

方案 2：单层扁平对象的映射解构（性能优先）

如果数组内的对象只有一层属性（没有嵌套子对象或子数组），使用原生 Array.prototype.map() 配合对象展开运算符 { ...item } 是运行时执行效率最高的做法。它避免了全量深层遍历与序列化开销。

const list1 = [{ id: 10, title: "Draft" }];
const list2 = [{ id: 20, title: "Review" }];

// 先合并数组，再为每一个元素生成新对象
const shallowIsolatedList = [...list1, ...list2].map(item => ({ ...item }));

// 修改合并后元素
shallowIsolatedList[0].title = "Published";

// 检验原数组
console.log("list1[0].title:", list1[0].title); // "Draft"
console.log("对象引用是否分离:", shallowIsolatedList[0] !== list1[0]); // true

方案 3：JSON 序列化与反序列化（老旧纯数据环境兜底）

对于纯 JSON 数据格式（仅包含字符串、数字、布尔值、纯对象和数组），JSON.parse(JSON.stringify(arr)) 是一种跨平台兼容性极强（支持至 ES5）的快速深拷贝手段。

const sourceA = [{ id: 1, timestamp: 1680000000 }];
const sourceB = [{ id: 2, timestamp: 1680001000 }];

// 通过 JSON 转换实现完整断开引用
const safeMerged = JSON.parse(JSON.stringify([...sourceA, ...sourceB]));

safeMerged[0].timestamp = 0;
console.log("sourceA[0].timestamp:", sourceA[0].timestamp); // 1680000000

方案 4：轻量级无依赖递归深拷贝函数（复杂或老旧环境通用）

在不支持 structuredClone 且包含较复杂数据类型或循环引用的老旧生产环境中，可以使用自定义递归深拷贝函数，或者引入成熟工具库中的 lodash.cloneDeep。

/**
 * 递归深拷贝函数（支持纯对象、数组与循环引用）
 * @param {*} target 需要拷贝的数据
 * @param {WeakMap} map 缓存已克隆对象的映射表，防止死循环
 * @returns {*} 全新隔离的数据副本
 */
function deepClone(target, map = new WeakMap()) {
  // 基础类型与 null 直接返回
  if (target === null || typeof target !== "object") {
    return target;
  }

  // 处理日期与正则实例
  if (target instanceof Date) return new Date(target);
  if (target instanceof RegExp) return new RegExp(target);

  // 检查循环引用
  if (map.has(target)) {
    return map.get(target);
  }

  // 创建数组或对象容器
  const cloneTarget = Array.isArray(target) ? [] : {};
  map.set(target, cloneTarget);

  // 递归复制所有自有属性
  for (const key of Object.keys(target)) {
    cloneTarget[key] = deepClone(target[key], map);
  }

  return cloneTarget;
}

// 结合合并操作使用
const originalGroup1 = [{ id: 1, info: { count: 10 } }];
const originalGroup2 = [{ id: 2, info: { count: 20 } }];

const clonedMerged = deepClone([...originalGroup1, ...originalGroup2]);
clonedMerged[0].info.count = 999;

console.log("originalGroup1[0].info.count:", originalGroup1[0].info.count); // 依然为 10

四、结果验证：如何确认原数组已完全免受污染

在生产环境或自动化测试用例中，判断数组合并与隔离是否成功的黄金法则是同时验证引用隔离性与数据保真性。建议在关键数据合并流水线中加入类似如下断言逻辑：

function verifyIsolation(originalArr, mergedArr, indexToTest, testKey, testVal) {
  // 1. 验证对象引用指针是否独立
  const isReferenceIsolated = mergedArr[indexToTest] !== originalArr[indexToTest];
  
  if (!isReferenceIsolated) {
    throw new Error(`[安全警报] 索引 ${indexToTest} 的对象仍然共享同一内存指针！`);
  }

  // 2. 暂存原值并执行修改测试
  const previousOriginalVal = originalArr[indexToTest][testKey];
  mergedArr[indexToTest][testKey] = testVal;

  // 3. 校验原数组对应键值是否保持不变
  const isValueIntact = originalArr[indexToTest][testKey] === previousOriginalVal;

  if (!isValueIntact) {
    throw new Error(`[数据污染] 原数组属性已遭到连带篡改！`);
  }

  return true; // 验证通过，完全安全
}

五、生产实践总结与选型决策指南

处理“JS数组合并后修改元素影响原数组”这一问题的核心思路始终是：识别引用类型并在适当时机断开内存指针。

在日常项目开发中，建议遵循以下最佳实践：

• 在现代 Node.js 与现代前端项目中：将 structuredClone([...arr1, ...arr2]) 作为默认首选，既语义清晰，又能免去额外引入第三方库的包体积负担。
• 在高频渲染、大规模列表等性能关键路径中：如果数据模型保证为扁平单层，优先使用 [...arr1, ...arr2].map(x => ({ ...x }))，运行开销最小。
• 坚持函数式编程与不可变数据规范：在 Redux、Pinia、Vuex 等状态管理或 React 组件属性传递中，养成不原地（in-place）修改对象属性的习惯，通过返回新对象代替直接覆写，从编码规范层面消除隐式污染隐患。