推动元件时元件溢出

Question

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);
        console.log(tempObj);
      }
    }
  }
}
console.log(Data);

虽然控制台 tempObjs 输出符合预期，但是当 tempObj 被推送到数组时，以前的元素将被新元素覆盖。

我期待类似的输出

[
  {
    header0: datacel0,
    header1: datacel1,
    header2: datacel2,
    header3: datacel3,
  },
  {
    header0: datacel4,
    header1: datacel5,
    header2: datacel6,
    header3: datacel7,
  }
];

我得到如下输出，所有对象都相同或覆盖

[
  {
    header0: datacel60,
    header1: datacel61,
    header2: datacel62,
    header3: datacel63,
  },
];

Answer 1

tempObj

包含对对象的引用，因此在每个循环中，您都会覆盖其先前的值，因为您使用的是相同的键。如果您希望示例正常工作，则必须为每个循环使用“不同的对象”。您可以通过使用 tempObj

method

:

 克隆 

Object.assign 来做到这一点

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 = Object.assign({}, tempObj);  // <-- added this line.
      tempObj[header[k]] = datacell[j];
      if (k === header.length - 1) {
        Data.push(tempObj);
        console.log(tempObj);
      }
    }
  }
}
console.log(Data);