如何匹配avatar和Key的部分值实现两个JS对象数组的合并

核心思路 #

• 先提取avatar路径末尾的文件名：使用split('/')切割路径后取最后一段即可匹配image的Key字段
• 提前构建Image数据的索引映射：避免每次匹配都遍历整个Image数组，大幅提升匹配效率
• 遍历Person数组做匹配合并，可根据需求选择保留所有项或仅保留匹配成功的项

注意：如果你的avatar路径末尾带有查询参数（如https://xxx/filename.jpg?version=1），提取文件名时需要先过滤参数，修改为p.avatar?.split('?')[0].split('/').pop()即可。

完整代码实现 #

你给出的person、image结构是数字为键的对象，如果是普通数组可以跳过Object.values()转换步骤。

// 示例输入数据
const person = {
  0: {
    firstName: 'John',
    lastName: 'Doe',
    avatar: 'https://sitename.com/filename.jpg'
  },
  1: {
    firstName: 'Jane',
    lastName: 'Smith',
    avatar: 'https://sitename.com/avatar2.png'
  }
};
const image = {
  0: {
    Key: 'filename.jpg',
    files: {
      srcSet: 'filename.jpg 256w'
    }
  },
  1: {
    Key: 'avatar2.png',
    files: {
      srcSet: 'avatar2.png 512w'
    }
  }
};

// 1. 把数字键对象转为数组，同时构建Image的Key映射表
const imageList = Object.values(image);
const imageMap = new Map(imageList.map(img => [img.Key, img]));

// 2. 处理Person数据：保留所有Person，匹配成功则合并字段
const mergedPersonList = Object.values(person).map(p => {
  // 提取avatar末尾的文件名
  const avatarFileName = p.avatar?.split('/').pop();
  // 匹配到对应Image则合并，否则返回原对象
  const matchedImg = avatarFileName ? imageMap.get(avatarFileName) : null;
  return matchedImg ? { ...p, ...matchedImg } : p;
});

// 如果你只需要保留匹配成功的项，用filter+map链式调用即可
const filteredMergedList = Object.values(person)
  .filter(p => {
    const fileName = p.avatar?.split('/').pop();
    return fileName && imageMap.has(fileName);
  })
  .map(p => {
    const fileName = p.avatar.split('/').pop();
    return { ...p, ...imageMap.get(fileName) };
  });

// 如果需要转回原有的数字键对象结构
const mergedPersonObj = Object.fromEntries(
  mergedPersonList.map((item, index) => [index, item])
);

输出验证 #

合并后的结构符合你要求的格式：

{
  0: {
    firstName: 'John',
    lastName: 'Doe',
    avatar: 'https://sitename.com/filename.jpg',
    Key: 'filename.jpg',
    files: { srcSet: 'filename.jpg 256w' }
  },
  1: {
    firstName: 'Jane',
    lastName: 'Smith',
    avatar: 'https://sitename.com/avatar2.png',
    Key: 'avatar2.png',
    files: { srcSet: 'avatar2.png 512w' }
  }
}

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