在JavaScript中,如何给字符串数组中的元素去重

在 JavaScript 中,给字符串数组(或其他类型数组)去重有多种方法,下面列举几种常用的方式,并说明各自的特点。


1. 利用 Set(最简洁、推荐)

Set 是 ES6 新增的数据结构,它类似于数组,但成员的值都是唯一的。将数组传入 Set 构造函数,再通过扩展运算符或 Array.from() 转回数组即可。

javascript 复制代码
const arr = ['apple', 'banana', 'apple', 'orange', 'banana'];
const unique = [...new Set(arr)];
console.log(unique); // ['apple', 'banana', 'orange']

优点 :代码简洁,效率高(时间复杂度 O(n))。
缺点 :无法保留原数组中的元素顺序吗?------会保留第一次出现的顺序,Set 遍历顺序就是插入顺序,因此顺序是保持的。所以一般没有缺点。但注意 :Set 去重使用"SameValueZero"比较,认为 NaN 与自身相等,而 === 不认为相等;在字符串数组中基本无影响。


2. 利用 filter + indexOf

通过数组自身的 filter 方法,配合 indexOf 检测当前元素第一次出现的位置是否等于当前索引。

javascript 复制代码
const arr = ['apple', 'banana', 'apple', 'orange', 'banana'];
const unique = arr.filter((item, index) => arr.indexOf(item) === index);
console.log(unique); // ['apple', 'banana', 'orange']

优点 :兼容性非常好(ES5 即可),语义清晰。
缺点indexOf 会从头遍历数组,整体时间复杂度 O(n²),在大型数组上性能较差。同时 indexOf 无法正确查找 NaN,但字符串数组通常无此问题。


3. 利用 reduce 累加器

通过 reduce 构建新数组,判断当前元素是否已存在于累加器中。

javascript 复制代码
const arr = ['apple', 'banana', 'apple', 'orange', 'banana'];
const unique = arr.reduce((acc, cur) => {
  if (!acc.includes(cur)) {
    acc.push(cur);
  }
  return acc;
}, []);
console.log(unique); // ['apple', 'banana', 'orange']

优点 :逻辑直观,可灵活扩展。
缺点includes 也是遍历,时间复杂度 O(n²);同时 includes 能处理 NaN 但字符串场景无影响。


4. 利用对象/Map 作为哈希表(性能最优)

使用 Map 或普通对象记录已出现的元素,一次遍历即可,时间复杂度 O(n)。

javascript 复制代码
const arr = ['apple', 'banana', 'apple', 'orange', 'banana'];
const map = new Map();
const unique = arr.filter(item => {
  if (map.has(item)) return false;
  map.set(item, true);
  return true;
});
console.log(unique); // ['apple', 'banana', 'orange']

用对象也可以,但对象键会被转为字符串,对于纯字符串数组没问题,但若数组中包含数字或其他类型,需注意类型转换。

javascript 复制代码
const obj = {};
const unique = arr.filter(item => 
  obj.hasOwnProperty(item) ? false : (obj[item] = true)
);

优点 :线性时间复杂度,适合大数据量。
缺点:代码略复杂。


5. 进阶:保持首次出现顺序 + 去重

上述所有方法中,除了 Setfilter+indexOf 默认保持顺序,其余若稍加调整也能保持顺序。SetMap 本身也是按插入顺序迭代,因此上述基于 SetMap 的方案自然保持顺序。


总结

  • 日常开发 :推荐使用 [...new Set(arr)],代码最简洁,性能也不错。
  • 需要兼容极旧环境(如 IE) :可用 filter+indexOf
  • 大数据量且对性能有极致要求 :用 Map 哈希表方式。

注意,以上方法不仅适用于字符串数组,同样适用于数字、混合类型数组,但去重逻辑是基于严格相等(或 Set 的 SameValueZero)。对于对象数组,则需要根据对象的某个属性去重,以上方法需配合 map 提取属性值再进行去重。

相关推荐
To_OC4 小时前
别再串行写 await 了,Promise.all 才是并行请求的正确打开方式
前端·javascript·promise
To_OC4 小时前
LC 17 电话号码的字母组合:我的回溯算法,就是从这道题开窍的
javascript·算法·leetcode
我是坏垠5 小时前
Crypto、Cipher与Password:Java加密开发的三个核心概念
java·开发语言·python
white_ant6 小时前
JDK LTS 版本升级迁移注意事项大全
java·开发语言
Bobolink_6 小时前
跨境业务网络环境评估,“干净、一致、独享”三个关键指标
开发语言·网络·php·跨境网络·网络环境
你怎么知道我是队长6 小时前
JavaScript的变量和数据类型介绍
开发语言·javascript·ecmascript
xingke6 小时前
C 语言多文件编程:(一)头文件、extern、编译链接
c语言·开发语言·多文件
戮漠summer7 小时前
Missing Semester 计算机教育中缺失的一课 Lecture 01 Shell
开发语言·后端·scala
jinyishu_7 小时前
C++ string使用方法
开发语言·c++
EW Frontier7 小时前
三级跳突破864维动作空间——QMIX-Hierarchical多无人机协同通信方法全解析【附python代码】
开发语言·python·无人机·强化学习·通信资源分配