如何在TypeScript中使用lodash的_.union实现数组扁平化去重

为什么你的代码没有得到预期结果 #

_.union 方法的入参要求是多个独立的一维数组，会对所有传入数组的元素求并集去重。而user.users.map(user => user.city)返回的是一个二维数组：[["city_id1", "city_id2"], ["city_id3", "city_id4"], ["city_id1", "city_id3"], ["city_id2", "city_id4"]]，你直接把这个二维数组作为唯一参数传给_.union，自然无法得到正确的去重结果。

_.union 正确写法 #

用扩展运算符把二维数组展开为多个独立的一维数组传入即可：

const uniqueCities = _.union(...user.users.map(user => user.city))
// 输出：["city_id1", "city_id2", "city_id3", "city_id4"]

原生JS无依赖方案 #

如果项目不需要额外引入lodash，用原生的flatMap + Set组合可以实现完全相同的效果，性能更优也更轻量：

const uniqueCities = [...new Set(user.users.flatMap(user => user.city))]

这个写法的逻辑非常清晰：

1. flatMap 遍历所有用户，拿到每个用户的city数组后直接扁平化，得到包含所有city的一维数组
2. 利用Set结构的特性自动去重
3. 最后通过扩展运算符把Set实例转换为普通数组。

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