JavaScript数组合并求助：按name匹配补全value字段

没问题，我来帮你搞定这个数组合并的需求！首先明确你的核心需求：把data里的value对应到data2的每个name上，若data中没有匹配的name，就给该项的value设为0，最终生成完整的目标数组。

原始数据 #

第一个数组：

var data = [ { name: 'aa', value: 1 }, { name: 'bb', value: 2 }, { name: 'cc', value: 3 } ];

第二个数组：

var data2 = [ { name: 'aa' }, { name: 'bb' }, { name: 'cc' }, { name: 'dd' }, { name: 'ee' } ];

期望结果 #

var data3 = [ 
  {name: 'aa', value: 1}, 
  {name: 'bb', value: 2}, 
  {name: 'cc', value: 3}, 
  {name: 'dd', value: 0}, 
  {name: 'ee', value: 0} 
]; 
console.log(data3)

解决方案 #

我推荐先把data转换成一个以name为键、value为值的映射对象，这样能快速查找对应值，再遍历data2生成目标数组——这种方式查找效率更高，尤其适合元素较多的数组场景。

具体代码如下：

// 把data转成映射对象，实现快速查找
const valueMap = data.reduce((map, item) => {
  map[item.name] = item.value;
  return map;
}, {});

// 遍历data2生成最终数组
const data3 = data2.map(item => ({
  name: item.name,
  value: valueMap[item.name] ?? 0 // 找不到对应value时默认设为0
}));

console.log(data3);

代码解释 #

1. reduce生成映射对象：通过reduce把data转换成{aa:1, bb:2, cc:3}格式的对象，后续查找name对应的value仅需O(1)的时间成本。
2. map生成目标数组：遍历data2的每个元素，从映射对象中匹配对应value；若匹配不到（比如dd、ee），就用??空值合并运算符默认设为0。

如果需要兼容不支持??运算符的旧浏览器，可以替换成三元表达式：

value: valueMap[item.name] !== undefined ? valueMap[item.name] : 0

这样就能完美得到你想要的结果啦！

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