JavaScript 中数组遍历时对象引用陷阱与正确初始化实践

本文详解为何在 foreach 循环中复用同一对象引用会导致所有数组元素内容相同，并提供安全、可复用的初始化方案。

本文详解为何在 `foreach` 循环中复用同一对象引用会导致所有数组元素内容相同，并提供安全、可复用的初始化方案。

在 javaScript 中，对象是引用类型。当你在循环外部声明一个对象（如 aSeries = { name: ”, data: [{}] }），然后在每次迭代中仅修改其属性（如 aSeries.name = element）并推入数组，实际上你只是将同一个对象的多个引用存入了 seriesArray。最终所有数组项都指向内存中的同一对象，因此最后一次赋值（name: ‘incline’）会覆盖全部，导致输出中两个元素名称均为 “incline”。

✅ 正确做法是在每次迭代内部创建新对象，确保每个数组项持有独立的内存实例：

const seriesTitles = ['depth', 'incline']; const seriesArray = [];  seriesTitles.forEach((title) => {   // ✅ 每次迭代新建对象 —— 关键修复点   const aSeries = {     name: title,     data: [{}]   };   seriesArray.push(aSeries); });  console.log(seriesArray); // 输出： // [ //   { name: "depth", data: [{}] }, //   { name: "incline", data: [{}] } // ]

? 进阶优化建议：

• 使用 map() 替代 forEach + push，语义更清晰、代码更函数式：

  const seriesArray = seriesTitles.map(title => ({   name: title,   data: [{}] }));

• 若 data 数组需动态填充 json 数据，可在构造时直接注入，例如：

  const jsonData = [{ x: 0, y: 10 }, { x: 1, y: 15 }]; const seriesArray = seriesTitles.map(title => ({   name: title,   data: jsonData // 或深拷贝后使用：JSON.parse(JSON.stringify(jsonData)) }));

⚠️ 注意事项：

立即学习“Java免费学习笔记（深入）”；

• 避免在循环外定义对象/数组后在循环内重复赋值——这是引发“意外共享状态”的常见根源；
• 若对象结构复杂或含嵌套对象，需注意浅拷贝（{…obj}）或深拷贝（structuredClone 或 JSON.parse(JSON.stringify())）以防止深层引用污染；
• 在现代项目中，优先选用 const 声明 + map() 等不可变操作，提升代码可预测性与可维护性。

掌握对象生命周期与引用机制，是写出健壮 javascript 数据初始化逻辑的关键一步。