JS向数组追加对象时怎么避免引用共享问题

一、现象复现：为什么数组里的对象全都一模一样？

我们先来看一段绝大多数初学者或疏忽时都写过的代码片段。假设需要从一组基础数据生成 3 个员工对象并存入数组：

// 典型错误示例：在循环外部声明复用对象
const employees = [];
const item = { id: 0, department: "技术部" };

for (let i = 1; i <= 3; i++) {
  item.id = i;
  employees.push(item); // 连续推入 item
}

console.log(employees);
// 期望结果: [{id: 1, ...}, {id: 2, ...}, {id: 3, ...}]
// 实际输出:
// [
//   { id: 3, department: "技术部" },
//   { id: 3, department: "技术部" },
//   { id: 3, department: "技术部" }
// ]

打印出来的三个元素，其 id 全部变成了 3。不仅如此，如果此时执行 employees[0].department = "市场部"，你会发现 employees[1] 和 employees[2] 的 department 也跟着变成了“市场部”。

内存层面的根本原因

在 JavaScript 运行环境中，基本类型（如数字、字符串、布尔值）的值存放在栈内存中；而对象（包括数组、普通对象、函数）属于复合数据类型，实际的键值对存放在堆内存中。变量 item 本身保存的，仅仅是一个指向堆内存具体地址的指针。

调用 employees.push(item) 时，JavaScript 引擎并不会在堆内存中把对象完整复制一份，而只是把 item 保存的指针复制并放进了数组。因此，数组的索引 0、1、2 保存的是完全相同的指针，指向堆中同一块内存区域。

二、浅层对象的隔离方案：适用单层无嵌套结构

如果你的对象只包含基础类型属性（数字、字符串、布尔值等），没有任何嵌套的对象或子数组，以下三种方式能够以极高的执行效率阻断引用共享。

1. 将对象声明直接移入循环内部

最直观也是开销最低的改法，就是不复用循环外的对象变量，而是在每次循环迭代时使用对象字面量（{}）实例化一个全新的对象：

const employees = [];

for (let i = 1; i <= 3; i++) {
  // 关键：每次循环都会在堆内存中开辟一个新对象
  const item = {
    id: i,
    department: "技术部"
  };
  employees.push(item);
}

2. 使用对象展开运算符（Spread Syntax）

当存在一个固定的基础模板对象，或者我们需要从外部参数追加对象时，可以使用 ES6 提供的对象展开运算符 { ...template }：

const baseTemplate = { role: "guest", permissions: "read" };
const userList = [];

function addUser(id, name) {
  // 浅拷贝模板，并覆盖或追加新属性，生成独立的新对象
  userList.push({
    ...baseTemplate,
    id,
    name
  });
}

addUser(101, "张三");
addUser(102, "李四");

// 修改 userList[0].name 不会影响 userList[1]

3. 使用 Object.assign()

在需要兼容更旧执行环境，或者需要合并多个源对象时，可以使用 Object.assign。注意：第一个参数必须传入一个全新的空对象字面量 {} 作为目标对象：

const template = { status: "pending", retries: 0 };
const queue = [];

for (let i = 0; i < 3; i++) {
  // 必须把 {} 放在首位，否则会直接修改 template 本身
  const task = Object.assign({}, template, { taskId: `task_${i}` });
  queue.push(task);
}

三、深层复杂对象的彻底解耦方案

当要追加到数组中的对象具有两层或更多层嵌套关系时，我们需要**深拷贝（Deep Clone）**来递归复制每一个层级的对象与数组。

1. 现代原生标准：structuredClone()

structuredClone() 是 HTML 标准规范并已被各大现代浏览器（Chrome 98+、Firefox 94+、Safari 15.4+）以及 Node.js（v17.0.0+）全面支持的原生全局 API。它不仅能完整递归复制所有层级，还能正确保留 Date、RegExp、Map、Set、ArrayBuffer 等复杂内建类型，并原生支持循环引用。

const templateConfig = {
  theme: "dark",
  userPreferences: {
    notifications: true,
    filterTags: ["tech", "frontend"]
  },
  createdAt: new Date()
};

const userConfigs = [];

for (let i = 0; i < 3; i++) {
  // 原生深拷贝，完美解耦多层嵌套
  const copy = structuredClone(templateConfig);
  copy.userPreferences.filterTags.push(`tag_${i}`);
  userConfigs.push(copy);
}

// 此时修改 userConfigs[0].userPreferences.filterTags 绝对不会影响 userConfigs[1]

2. 经典兼容方案：JSON 序列化与反序列化

如果运行环境是较旧的浏览器或旧版 Node.js，且被追加的对象只包含简单的 JSON 安全数据（字符串、数字、布尔值、普通对象、常规数组），可以使用 JSON.parse(JSON.stringify(obj))：

const complexItem = {
  id: 1,
  details: { count: 10, codes: [101, 102] }
};

const list = [];
// 通过 JSON 转换阻断所有引用
list.push(JSON.parse(JSON.stringify(complexItem)));

3. 轻量手写递归深拷贝（纯 JS 兜底）

若在不允许使用 structuredClone 且包含特定类型时，可在项目中编写一个简洁的深拷贝工具函数：

function deepClone(target, hash = new WeakMap()) {
  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 (hash.has(target)) return hash.get(target);

  const clone = Array.isArray(target) ? [] : {};
  hash.set(target, clone);

  for (const key of Object.keys(target)) {
    clone[key] = deepClone(target[key], hash);
  }
  return clone;
}

// 追加时调用
array.push(deepClone(targetObject));

四、函数式与工厂模式：从设计源头避免引用问题

在很多工程场景中，我们之所以需要向数组追加对象，是因为正在通过数据源转换生成一份新的列表。如果转变思维，采用函数式编程（Functional Programming）或工厂模式（Factory Pattern），引用共享的问题从代码组织形式上就可以被自然规避。

1. 使用 Array.prototype.map() 代替循环 push

当需要将一个数组转换为另一个对象数组时，map() 方法天然要求每次返回一个崭新的对象表达式：

const userIds = [101, 102, 103];

// map 每次回调都会计算并返回一个全新的对象引用
const users = userIds.map((id, index) => ({
  id,
  seat: index + 1,
  active: true
}));

2. 使用对象工厂函数（Factory Function）

如果你的对象初始化逻辑较长，或者具有默认初始状态，建议封装一个工厂函数。每次调用工厂函数都会在内部 return { ... } 返回一个全新内存分配的对象：

// 工厂函数：确保每次产出的都是完全独立的实例
function createLogEntry(level, message) {
  return {
    timestamp: Date.now(),
    level,
    message,
    metadata: {
      platform: "web",
      traceId: Math.random().toString(36).slice(2)
    }
  };
}

const logBuffer = [];
logBuffer.push(createLogEntry("INFO", "应用启动"));
logBuffer.push(createLogEntry("WARN", "内存占用较高"));

// 此时两个 log 对象的 metadata 拥有完全独立的堆内存地址

五、开发中极易忽略的“连环共享”踩坑场景

陷阱 1：Array.prototype.fill() 初始化对象

很多开发者希望创建一个包含 5 个默认配置对象的数组，会很自然地写出以下代码：

// 严重错误：fill 的参数对象只被创建了一次！
const grid = new Array(3).fill({ selected: false });

grid[0].selected = true;

console.log(grid);
// 输出：每个元素的 selected 全部变成了 true！
// [{ selected: true }, { selected: true }, { selected: true }]

正确解法：使用 Array.from() 并传入映射函数：

// 正确做法：Array.from 第二个参数每次迭代执行，生成独立对象
const safeGrid = Array.from({ length: 3 }, () => ({ selected: false }));

safeGrid[0].selected = true;
// safeGrid[1].selected 仍然是 false，互不干扰

陷阱 2：Vue / React 状态管理中的引用污染

在 React 的 useState 或 Vue 响应式数据中，如果直接将组件内部的某个表单对象 formState 通过 setList([...list, formState]) 推入数组，之后用户在界面上继续修改表单输入框，会导致数组中刚推入的历史记录也跟着同步跳变！

解决方案：提交时务必做快照拷贝：

// React 示例：推入副本而不是引用
const handleSubmit = () => {
  setList(prev => [
    ...prev,
    structuredClone(currentFormData) // 提交快照切断双向绑定引用
  ]);
};

六、方案横向对比与总结

面对不同的业务规模与数据形态，各种避免引用共享的手段各有所长。下表总结了各种常见方案的适用维度：

总结来说，向数组追加对象时避免引用共享并不是一个深奥的难题，关键在于时刻牢记**“对象变量只是指针”**这一事实。只要在追加的那一刻根据数据深度做出明智判断：单层用展开运算、多层用 structuredClone、批量构建用工厂与 map，就能彻底杜绝对象相互污染的隐疾。