JavaScript如何简化根据引用数组从对象数组提取属性值的代码

方案1：map + find 组合（小数据量首选，写法最简） #

直接遍历refs数组，每一项都从categories中查找匹配ref的对象，提取name属性即可：

const newArr = refs.map(ref => categories.find(item => item.ref === ref)?.name);
// 输出结果：["Computer", "Food"]

如果能保证refs里的所有引用都能在categories中找到对应项，也可以去掉可选链?.，直接写.name。如果需要过滤掉匹配失败的undefined项，末尾追加.filter(Boolean)即可。

方案2：先转Map再取值（大数据量首选，性能更优） #

如果categories数组长度很大，嵌套查找会浪费性能，可以先把categories转成ref到name的映射Map，查找复杂度从O(n*m)降到O(n)：

// 生成映射表
const cateMap = new Map(categories.map(item => [item.ref, item.name]));
// 直接从映射表取值
const newArr = refs.map(ref => cateMap.get(ref));
// 输出结果：["Computer", "Food"]

内容的提问来源于stack exchange，提问作者Super Kai - Kazuya Ito