使用原生JS关联两个对象数组生成新数组并输出配对内容

你要做的是关联两个数组的同值字段，把手表和对应的颜色标签匹配后输出，有两种常见实现方式：

方法1：直接遍历匹配（小数据量适用） #

直接在遍历手表数组时，用Array.find()匹配对应的颜色项，代码简单易读，数据量小的时候足够用：

watches.forEach(watch => {
  const targetColor = watch_colors.find(color => color.id === watch.color);
  console.log(`${watch.label} ${targetColor.label}`);
})

方法2：预建映射表（大数据量适用） #

如果两个数组数据量很大，优先把颜色数组提前转换成以uuid为key的映射对象，查找效率会比每次遍历find高很多：

// 先构建颜色uuid到颜色名的映射
const colorMap = {};
watch_colors.forEach(color => {
  colorMap[color.id] = color.label;
});

// 遍历手表数组直接取映射值输出
watches.forEach(watch => {
  console.log(`${watch.label} ${colorMap[watch.color]}`);
});

如果需要兼容匹配不到颜色的异常场景，可以加个兜底逻辑：${colorMap[watch.color] || '未知颜色'}。

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