如何在JavaScript中实现类似Excel VLOOKUP的对象数组合并

高效解法（利用Map优化查找） #

先将array2转换为以id为键的Map，大幅提升匹配效率，再遍历array1完成属性合并：

let array1 = [
    {"first":"Ana","last":"Anderson","id":"0001"},
    {"first":"Bob","last":"Brown","id":"0002"},
    {"first":"Charlie","last":"Clark","id":"0003"},
    {"first":"Danielle","last":"Dunn","id":"0004"}
]

let array2 = [
    {"age":"38","id":"0002","eyeColor":"hazel","hieght":"5.5"},
    {"age":"45","id":"0001","eyeColor":"brown","hieght":"5"},
    {"age":"23","id":"0003","eyeColor":"blue","hieght":"6"}
]

// 转换array2为Map，键为id，值为对应对象
const array2Map = new Map(array2.map(item => [item.id, item]));

// 遍历array1合并属性
const array3 = array1.map(item => {
  const matched = array2Map.get(item.id) || {};
  return {
    ...item,
    age: matched.age || '',
    eyeColor: matched.eyeColor || '',
    hieght: matched.hieght || ''
  };
});

console.log(array3);

逻辑说明

1. Map转换：把array2转成Map后，通过id查找匹配对象的时间复杂度从O(n)降到O(1)，数据量大时优势明显。
2. 属性合并：用对象展开运算符...保留原对象所有属性，对需要从array2获取的属性，有匹配则取对应值，无匹配则填充空字符串。

传统for循环实现（适配你的尝试思路） #

如果你更习惯用for循环，可通过find方法替代indexOf实现精准匹配：

let array1 = [
    {"first":"Ana","last":"Anderson","id":"0001"},
    {"first":"Bob","last":"Brown","id":"0002"},
    {"first":"Charlie","last":"Clark","id":"0003"},
    {"first":"Danielle","last":"Dunn","id":"0004"}
]

let array2 = [
    {"age":"38","id":"0002","eyeColor":"hazel","hieght":"5.5"},
    {"age":"45","id":"0001","eyeColor":"brown","hieght":"5"},
    {"age":"23","id":"0003","eyeColor":"blue","hieght":"6"}
]

const array3 = [];
// 提取array2中需要合并的属性（排除id）
const extraProps = array2.length ? Object.keys(array2[0]).filter(key => key !== 'id') : [];

for (let i = 0; i < array1.length; i++) {
    // 复制原对象，避免修改原数组
    const currentObj = {...array1[i]};
    // 先初始化所有额外属性为空字符串
    extraProps.forEach(prop => currentObj[prop] = '');
    
    // 查找匹配id的对象
    const matchedObj = array2.find(item => item.id === currentObj.id);
    if (matchedObj) {
        // 覆盖为匹配到的属性值
        extraProps.forEach(prop => currentObj[prop] = matchedObj[prop]);
    }
    
    array3.push(currentObj);
}

console.log(array3);

逻辑说明

1. 动态提取属性：避免硬编码属性名，适配array2属性变化的场景。
2. 空值初始化：先给所有需要合并的属性设空值，确保无匹配时结果符合预期。
3. 精准匹配：用find方法根据id查找对象，替代无法直接匹配对象属性的indexOf。

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