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

本文详解为何在循环中复用同一对象引用会导致数据覆盖，并提供使用 foreach 创建独立对象实例的标准实践，附可运行示例与关键注意事项。

本文详解为何在循环中复用同一对象引用会导致数据覆盖，并提供使用 `foreach` 创建独立对象实例的标准实践，附可运行示例与关键注意事项。

在 javaScript 中，对象是引用类型。当你在循环外部声明一个对象（如 aSeries = { name: ”, data: [{}] }），然后在每次迭代中仅修改其属性（如 aSeries.name = element）并推入数组，实际上所有数组元素都指向内存中的同一个对象实例。因此，后续迭代对 aSeries.name 的赋值会覆盖前一次的值，最终 seriesArray 中两个元素都显示为最后一个赋值（”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: [{}] } // ]

✅ 关键要点总结：

• 避免对象复用：切勿在循环外初始化引用类型变量后在循环内反复修改并推送；
• 优先使用 const 声明局部对象：配合块级作用域，天然防止意外复用；
• 可进一步简化为一行式构造（推荐）：

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

  map() 语义更清晰——明确表达“将每个标题映射为一个新配置对象”，且返回新数组，无副作用；

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

• 注意嵌套对象的深拷贝需求：若 data 数组需承载不同内容（如动态 json 数据），应确保 data 本身也按需实例化，而非共享空数组引用（当前 [{}] 是安全的，因每次新建对象时都新建了该数组）。

掌握对象引用与实例化的区别，是写出可靠、可维护 javascript 数据处理逻辑的基础。