JavaScript中如何简化Array.map搭配Array.find的实现？可使用Lodash

原生JS实现（更高效+更简洁） #

你原有写法的问题是每次遍历usersData时都会全量遍历users查找匹配项，数据量较大时性能会明显下降。可以先把基础信息数组转成ID映射表，后续直接查表取值，同时也能简化写法：

// 先构造ID为key的映射表，只需遍历一次users
const userMap = new Map(users.map(u => [u.id, u]));
// 合并数据，可选加默认值避免匹配不到时抛出异常
const result = usersData.map(data => ({
  ...data,
  name: userMap.get(data.userId)?.name ?? '未知用户'
}));

如果不需要容错处理，也可以直接简化原有写法为单行形式：

const result = usersData.map(data => ({...data, name: users.find(u => u.id === data.userId).name}));
// 仍优先推荐映射表写法，大数据量下性能优势非常明显

借助Lodash实现 #

用Lodash可以进一步简化映射表构造逻辑，自带的容错能力也能减少冗余代码：

// 用_.keyBy一键生成ID到用户对象的映射
const userMap = _.keyBy(users, 'id');
// 合并数据
const result = _.map(usersData, item => _.assign({}, item, {
  name: _.get(userMap, `${item.userId}.name`, '未知用户')
}));

如果需要全量合并两个匹配对象的所有属性，还可以写得更短：

const userMap = _.keyBy(users, 'id');
const result = _.map(usersData, item => _.merge({}, item, userMap.get(item.userId)));

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