JavaScript：如何将两个数组的对应元素合并为包含year和value属性的对象数组

你的问题出在使用concat的方式上——concat只是把两个数组的元素按顺序拼接在一起，所以merged数组里是先5个只有year属性的对象，再5个只有value属性的对象，遍历的时候每个元素只能拿到一个属性，自然得不到预期的合并结果。

这里有几种更直接的解决方法：

方法一：直接使用map一步完成（推荐） #

不需要先创建arr和arr2，直接遍历其中一个数组，同时取另一个数组对应索引的元素来生成对象：

var year = ["January 2022", "February 2022", "March 2022", "April 2022", "May 2022"]; 
var value = [600000, 900000, 180000, 600000, 300000]; 

var mergedArray = year.map((currentYear, index) => {
  return {
    year: currentYear,
    value: value[index]
  };
});

console.log(mergedArray);

这样就能直接得到你想要的结果，代码更简洁高效。

方法二：基于你已有的arr和arr2进行合并 #

如果一定要保留之前生成的arr和arr2，可以通过遍历索引的方式，把对应位置的对象合并：

var arr = []; var arr2 = []; 
var year = ["January 2022", "February 2022", "March 2022", "April 2022", "May 2022"]; 
var value = [600000, 900000, 180000, 600000, 300000]; 

year.forEach(element => { arr.push({year: element}); }); 
value.forEach(element2 => { arr2.push({value: element2}); }); 

// 合并对应位置的对象
var newData = arr.map((item, index) => {
  return {...item, ...arr2[index]};
  // 或者用Object.assign：return Object.assign({}, item, arr2[index]);
});

console.log(newData);

这里用展开运算符（...）或者Object.assign把同一个索引的arr和arr2的对象属性合并到一起，就能得到预期的结果。

为什么你的原方法不行？ #

再解释下你之前代码的问题：

• arr.concat(arr2)得到的数组是[{year: ...}, {year: ...}, ..., {value: ...}, {value: ...}]，一共10个元素
• 遍历这个数组时，前5个元素只有year属性，没有value；后5个只有value属性，没有year
• 所以newData里的对象会是{year: "January 2022", value: undefined}这样的形式，不符合预期

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