JavaScript将表头表体数组转换为JSON对象的循环逻辑问题修复

需要实现两个数组到目标JSON对象的转换：

• 第一个数组为表头字段集合
• 第二个数组为表体内容集合
• 映射规则：表体的每一列数据，按顺序对应赋值给表头的同名字段
  

原有实现采用三层嵌套循环，键名生成正常，但最终结果仅保留表体最后一行数据，原有代码如下：

const header = ['A','B','C','D']
const body = [
  ["A1","A2","A3","A4","A5","A6"],
  ["B1","B2","B3","B4","B5","B6"],
  ["C1","C2","C3","C4","C5","C6"],
  ["D1","D2","D3","D4","D5","D6"],
];

const json = [];

for (let y = 0; y < body[0].length; y++)
{
  const line = {};
  for(const hl of header)
  {
    for(const bo of body)
    {
      line[hl] = bo[y];
    }
  } 
  json.push(line);
}

console.log(json);

三层循环存在值覆盖问题：遍历body所有行的最内层循环，会反复覆盖同一个line[hl]的取值，循环结束后只会保留body最后一行对应位置的值。该逻辑不需要三层嵌套，仅两层循环即可完成映射。

核心逻辑：外层遍历表体列数（每一列对应一个输出对象），内层遍历表头时直接按索引匹配body对应行的当前列值即可，无需额外遍历body。

const header = ['A','B','C','D']
const body = [
  ["A1","A2","A3","A4","A5","A6"],
  ["B1","B2","B3","B4","B5","B6"],
  ["C1","C2","C3","C4","C5","C6"],
  ["D1","D2","D3","D4","D5","D6"],
];

const json = [];
// 遍历所有列，每列生成一个对象
for (let colIdx = 0; colIdx < body[0].length; colIdx++) {
  const line = {};
  // 按表头索引匹配对应行的列值
  header.forEach((key, rowIdx) => {
    line[key] = body[rowIdx][colIdx];
  });
  json.push(line);
}

console.log(json);

[
  {A: "A1", B: "B1", C: "C1", D: "D1"},
  {A: "A2", B: "B2", C: "C2", D: "D2"},
  {A: "A3", B: "B3", C: "C3", D: "D3"},
  {A: "A4", B: "B4", C: "C4", D: "D4"},
  {A: "A5", B: "B5", C: "C5", D: "D5"},
  {A: "A6", B: "B6", C: "C6", D: "D6"}
]

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