JavaScript遍历数组生成JSON数据时重复添加最后项问题求助

问题根源 #

JavaScript里的对象属于引用类型，你只创建了一个aSeries对象。在forEach循环中，每次修改的都是这个对象的name属性，然后把同一个对象的引用推入数组。这就导致数组里的两个元素其实指向同一个对象，最终显示的自然是最后一次修改的name值（也就是incline）。

修正方案 #

要解决这个问题，核心是每次循环时创建新的对象，而不是复用同一个对象的引用，有两种常见实现方式：

方式一：循环内直接创建新对象 #

把对象的创建逻辑放到循环内部，每次迭代都生成全新的对象：

const seriesTitles = ['depth', 'incline'];
const seriesArray = [];

seriesTitles.forEach((element) => {
  const aSeries = { name: element, data: [{}] };
  seriesArray.push(aSeries);
});
console.log(seriesArray);

方式二：基于基础对象复制新对象 #

如果有固定的对象结构需要复用，可以用展开语法（...）或Object.assign复制基础对象并修改属性：

const seriesTitles = ['depth', 'incline'];
// 定义基础结构
const baseSeries = { data: [{}] };
const seriesArray = [];

seriesTitles.forEach((element) => {
  // 复制基础对象并添加/覆盖name属性
  const aSeries = { ...baseSeries, name: element };
  seriesArray.push(aSeries);
});
console.log(seriesArray);

两种方式都会让数组中的每个元素指向独立的对象，修改各自的属性不会互相影响，最终就能得到你期望的输出。

内容的提问来源于stack exchange，提问作者DaveLister