如何根据 React/JS 中的另一个数组修改数组的每个对象的属性？

Question

我在名为“customData”的 object 中有两个 arrays。 arrays 名称是“标题”和“表格数据”。
我想修改“tabularData”数组对象，使每个 object 具有匹配“headings”数组的前 6 个属性和“tabularData”中的“id”属性的属性。

示例“customData”对象-

{
  headings: [{"id":"k1"},{"id":"k2"},...,{"id":"k6"}],
  tabularData: [{"k1":"v11","k2":"v12",...,"id":1},{"k1":"v21":"k2":"v22",...,"id":2}]
}

预期结果应该是 -

[{"k1":"v11","k2":"v12",...,"k6":"v16","id":1},
{"k1":"v21","k2":"v22",...,"k6":"v26","id":2}] 

我的代码-

let selectedHeadings = customData.headings.slice(0, 6);

let array = [];
let temp = {};
customData.tabularData.forEach((eachObj) => {
  for (const [key, value] of Object.entries(eachObj)) {
    if (
      selectedHeadings.find((heading) => heading.id === key) ||
      key === "id"
    ) {
      temp[key] = value;
      array.push(temp);
    }
  }
});
console.log(array);

沙盒链接

请帮忙。

Answer 1

首先，如果您将选择的标题变成 map，事情会变得更容易

let selectedHeadings = customData.headings.slice(0, 6).reduce((acc, h) => {
  acc[h.id] = h;
  return acc;
}, {});

除此之外，您将推送到内部循环内的新数组，而不是外部循环。 您还应该在每个外循环内启动一个新的temp object。 这应该这样做：

let array = [];
customData.tabularData.forEach((eachObj) => {
  let temp = {};
  for (const [key, value] of Object.entries(eachObj)) {
    if (selectedHeadings[key] != undefined || key === "id") {
      temp[key] = selectedHeadings[key] || value;
    }
  }
  array.push(temp);
});

分叉沙箱