JavaScript 中遍历数组并为每个元素创建独立 JSON 对象的正确方法

本文详解为何在循环中复用同一对象引用会导致所有数组项被覆盖为最后一项值，并提供基于 foreach 的安全初始化方案，强调对象深拷贝与引用隔离的核心原则。

本文详解为何在循环中复用同一对象引用会导致所有数组项被覆盖为最后一项值，并提供基于 `foreach` 的安全初始化方案，强调对象深拷贝与引用隔离的核心原则。

在 javaScript 中，对象是引用类型。当你在循环外部声明一个对象（如 aSeries = { name: ”, data: [{}] }），然后在每次迭代中仅修改其属性（如 aSeries.name = element）并将其推入数组，实际上你只是将同一个对象的多个引用存入了 seriesArray。最终数组中所有元素都指向内存中的同一对象实例——因此当最后一次迭代将 name 设为 ‘incline’ 时，所有项的 name 都同步变为 ‘incline’。

✅ 正确做法：每次迭代都创建一个全新的对象实例，确保各元素彼此独立：

const seriesTitles = ['depth', 'incline']; const seriesArray = [];  seriesTitles.forEach(element => {   // ✅ 每次循环都新建一个独立对象   const aSeries = {     name: element,     data: [{}]   };   seriesArray.push(aSeries); });  console.log(seriesArray); // 输出： // [ //   { "name": "depth", "data": [{}] }, //   { "name": "incline", "data": [{}] } // ]

? 进阶建议：

• 使用 map() 更语义化地表达“将数组映射为新对象数组”：

  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 // 或根据 title 动态获取对应数据 }));

⚠️ 注意事项：

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

• ❌ 避免在循环外定义可变对象后反复复用；
• ✅ 始终在循环体内执行 const obj = { … } 创建新对象；
• ? 可用 Object.is(seriesArray[0], seriesArray[1]) 验证是否为同一引用（返回 false 才正确）；
• ? 若需嵌套对象深度独立，考虑使用结构化克隆（structuredClone()）或手动展开。

掌握引用与值的区别，是写出可靠、可预测 javascript 数据操作逻辑的关键一步。