JavaScript如何高效拆分含管道符的数组成员并去重得到新数组

不需要手写显式循环，直接用JS原生内置方法就能实现，性能比手写普通循环更高——内置方法是JS引擎底层做过定向优化的，执行效率远高于上层JS写的循环逻辑。 #

写法1：性能最优的极简实现 #

全程无显式JS层遍历，大数量级下性能表现最好，完全匹配你当前的需求：

var arr = ["A|B|C","B|A","E|A|D","F"]
// 拼接后统一拆分，直接衔接你计划的去重逻辑，不需要单独存临时数组
var result = [...new Set(arr.join('|').split('|'))]

实现逻辑： #

• 调用arr.join('|')把原数组所有元素用|拼成一个完整长字符串，原字符串内部的|和数组元素间的连接符完全一致，不会出现分隔符错乱问题
• 对拼接后的长字符串统一调用split('|')，一次性拿到所有拆分后的值组成的一维数组
• 直接传入Set去重，和你原本写的去重逻辑完全兼容

写法2：扩展性更好的灵活实现 #

如果后续需要对拆分后的值做预处理（比如过滤空值、去除首尾空格、格式转换等），可以用flatMap实现，仅做一次数组遍历，性能同样优异：

var arr = ["A|B|C","B|A","E|A|D","F"]
var result = [...new Set(
  arr.flatMap(function(item) {
    // 可在此处扩展自定义逻辑，比如 return item.split('|').filter(Boolean) 过滤空值
    return item.split('|')
  })
)]

实现逻辑： #

• flatMap会在遍历每个元素执行拆分逻辑后，自动把所有拆分得到的子数组拍平成一维数组，比先map再flat的写法少一次全量遍历，没有额外的中间数组开销
• 回调函数支持自定义处理逻辑，适配后续可能的需求变更

结果验证 #

两种写法最终得到的去重结果都符合预期，不需要排序的话可以直接使用：

// 输出结果：["A","B","C","E","D","F"]，覆盖所有唯一值，无重复
console.log(result)

注意：两种写法的逻辑和逐个循环拆分的结果完全一致，哪怕原数组包含空字符串、单字符无分隔符的元素（比如示例里的"F"），都能正确处理，不会出现边界值错误。

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