JavaScript数组推入对象时元素被覆盖问题排查求助

问题原因 #

你在循环外部只声明了一个tempObj对象，后续所有属性修改都是在这个同一个对象上进行的。每次将tempObj推入Data数组时，实际上是把这个对象的内存引用添加到数组中——数组里的所有元素指向的都是内存中的同一个对象。当后续循环修改tempObj的属性时，数组里所有之前的元素也会跟着变化，最终全部显示为最后一次修改后的结果。

解决方案 #

核心思路是：每次生成一组完整的键值对后，将新对象推入数组，而不是重复使用同一个对象的引用。下面提供两种可行方案：

方案1：复制对象后推入数组，重置临时对象 #

在每次完成一组属性赋值时，复制当前tempObj的内容到新对象，再推入数组，随后重置tempObj为空对象：

let header = [];

for (let index = 0; index < 4; index++) {
  header.push(`header${index}`);
}

let datacell = [];

for (let index = 0; index < 64; index++) {
  datacell.push(`datacell${index}`);
}

let Data = [];

let tempObj = {};

for (let j = 0; j < datacell.length; j++) {
  for (let k = 0; k < header.length; k++) {
    if (j % header.length === k) {
      tempObj[header[k]] = datacell[j];
      if (k === header.length - 1) {
        // 复制当前对象的所有属性到新对象
        Data.push({...tempObj});
        // 重置临时对象，准备下一组数据
        tempObj = {};
      }
    }
  }
}
console.log(Data);

方案2：重构循环逻辑，每次创建新临时对象 #

直接按header的长度分组遍历datacell，每组数据创建一个新的tempObj，逻辑更简洁直观：

let header = [];

for (let index = 0; index < 4; index++) {
  header.push(`header${index}`);
}

let datacell = [];

for (let index = 0; index < 64; index++) {
  datacell.push(`datacell${index}`);
}

let Data = [];

// 按header长度分组遍历datacell
for (let j = 0; j < datacell.length; j += header.length) {
  let tempObj = {};
  for (let k = 0; k < header.length; k++) {
    tempObj[header[k]] = datacell[j + k];
  }
  Data.push(tempObj);
}
console.log(Data);

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