Angular 4：如何利用两个数组生成目标结构的JSON对象？

先明确你的需求：valArray1是表头字段集合，valArray2里包含了两组对应的数据（每组4个元素，刚好匹配表头的长度），最终要生成包含两个键值对对象的JSON结构，每个对象的键对应表头，值对应一组数据。

你的现有数组：

const valArray1 = ["registration", "id", "first_name","last_name"];
const valArray2 = ['2016-02-03',23, 'kevin','fox','2016-03-05',3, 'Beety','marks'];

解决方案：分组+映射 #

我们需要先把valArray2按表头数组的长度拆分成分组，再将每组数据和表头一一对应生成对象，最后组装成目标结构。

基础实现代码

// 定义分组大小（等于表头数组的长度）
const groupSize = valArray1.length;
// 把数据数组拆分成多个数据组
const dataGroups = [];
for (let i = 0; i < valArray2.length; i += groupSize) {
  dataGroups.push(valArray2.slice(i, i + groupSize));
}

// 生成最终的JSON对象
const result = {};
dataGroups.forEach((group, index) => {
  const itemObj = {};
  // 遍历表头，将每个键和对应位置的数据绑定
  valArray1.forEach((key, keyIndex) => {
    itemObj[key] = group[keyIndex];
  });
  // 给每个对象命名为objArray1、objArray2...
  result[`objArray${index + 1}`] = itemObj;
});

console.log(result);

输出结果

运行这段代码后，你会得到期望的结构：

{
  "objArray1": {
    "registration": "2016-02-03",
    "id": 23,
    "first_name": "kevin",
    "last_name": "fox"
  },
  "objArray2": {
    "registration": "2016-03-05",
    "id": 3,
    "first_name": "Beety",
    "last_name": "marks"
  }
}

更简洁的函数式写法

如果你偏好更紧凑的代码，可以用reduce完成，不需要额外的分组数组：

const groupSize = valArray1.length;
const result = valArray2.reduce((acc, _, index) => {
  // 每到分组的起始位置时处理一组数据
  if (index % groupSize === 0) {
    const currentGroup = valArray2.slice(index, index + groupSize);
    // 将当前组数据和表头映射成对象
    const itemObj = valArray1.reduce((obj, key, keyIndex) => {
      obj[key] = currentGroup[keyIndex];
      return obj;
    }, {});
    // 添加到结果对象中
    acc[`objArray${Object.keys(acc).length + 1}`] = itemObj;
  }
  return acc;
}, {});

关于你原有结果的问题 #

你之前得到的结果里objArray1是第二组数据、objArray2为空，大概率是分组逻辑出错——没有正确按表头长度拆分valArray2，或者映射时索引对应错误，上面的代码会帮你规避这个问题。

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