在React中如何合并两个数组生成指定JSON格式数据

嘿，这事儿其实挺容易实现的，咱们可以用JavaScript的几种常见方法来完成，我给你整理了两种实用方案：

方案1：使用Array.map()（推荐，代码更简洁） #

map()方法可以直接遍历其中一个数组，同时对应取另一个数组相同索引的值，还能顺便生成自增的id：

const age = [31, 53, 62];
const names = ['john', 'sam', 'kathy'];

const data = {
  children: names.map((name, index) => ({
    id: index + 1, // 索引从0开始，加1得到1、2、3的id
    name: name,
    age: age[index]
  }))
};

console.log(data);

运行这段代码后，就能得到你想要的JSON结构啦。map()会返回一个新数组，每个元素都是包含id、name和age的对象，最后把这个数组放到children属性里就行。

方案2：使用for循环（适合新手理解逻辑） #

如果你刚接触JavaScript，用for循环能更清晰地看到每一步的逻辑：

const age = [31, 53, 62];
const names = ['john', 'sam', 'kathy'];
const children = [];

// 先判断两个数组长度是否一致，避免出现匹配错误
if (names.length !== age.length) {
  console.error('注意：两个数组长度不相等，无法一一匹配！');
} else {
  for (let i = 0; i < names.length; i++) {
    children.push({
      id: i + 1,
      name: names[i],
      age: age[i]
    });
  }

  const data = { children };
  console.log(data);
}

这段代码先初始化一个空数组children，然后循环遍历每个索引，把对应的name、age和生成的id组装成对象，push到children数组里，最后再把它放到data对象中。

小提示 #

一定要确保names和age两个数组的长度是一样的哦，不然会出现某个对象的age或者name为undefined的情况，上面的代码里也加了长度判断的逻辑，可以提前规避这个问题。

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