javascript如何实现数组去重_有哪些高效的方案【教程】

8次阅读

javaScript数组去重无唯一最优解,需据数据特征选方案:基础类型且需保序用Set+扩展运算符对象数组须自定义比较逻辑;超大数组优先用map/Object哈希表降为O(n)。

javascript如何实现数组去重_有哪些高效的方案【教程】

javascript 数组去重没有唯一“最优解”,方案选择取决于你的数据特征和约束条件:是否需保持顺序、是否含对象、是否考虑性能、是否兼容旧环境。

Set + 扩展运算符是最简且现代的写法

适用于基础类型(StringnumberBooleanNULLundefined)且需保持原始顺序的场景。它底层基于唯一值语义,代码简洁、可读性强、V8 引擎优化充分。

常见错误是误以为能处理对象数组:[{a:1}, {a:1}][...new Set(arr)] 后仍是两个元素,因为对象引用不同。

实操建议:

立即学习Java免费学习笔记(深入)”;

  • 确认数组元素全是基础类型再用此法
  • IE 不支持 Set 或扩展运算符,需转译或降级
  • 小到中等规模数组(
const arr = [1, 2, 2, 3, 'a', 'a']; const unique = [...new Set(arr)]; // [1, 2, 3, 'a']

filter + indexOf 兼容性好但注意性能陷阱

适合需要支持 IE9+ 且数据量不大的项目。原理是只保留首次出现的元素索引位置一致的项。

容易踩的坑:

  • indexOfNaN 返回 -1,导致所有 NaN 都被保留(实际应视为相同值)
  • 时间复杂度 O(n²),数组超 1 万项时明显变慢
  • 无法区分 0false(两者 indexOf 查找结果可能互相干扰,取决于数组内容)
const arr = [1, 2, 2, 3]; const unique = arr.filter((item, index) => arr.indexOf(item) === index);

处理对象数组必须自定义比较逻辑

不能依赖 SetindexOf,因为它们比的是引用而非结构。常见做法是用 reduce + some 或构建临时键(如 jsON 序列化)。

关键权衡点:

  • json.stringify 简单但不可靠:属性顺序敏感、忽略函数/undefined/symbol、循环引用直接报错
  • some 比较安全但性能差,O(n²),适合几百项以内
  • 真要高性能且健壮,得用 Lodash 的 uniqBy 或手写基于 Map 的哈希键生成(如取特定字段拼接)
const arr = [{id: 1}, {id: 1}, {id: 2}]; const unique = arr.filter((item, index, self) =>   index === self.findIndex(obj => obj.id === item.id) );

超大数组(>10 万)优先用 MapObject 做哈希表

当明确知道元素类型且可构造唯一键(如数字 ID、字符串 name),用哈希表可将时间复杂度降到 O(n),避免 Set 在某些引擎下对非基础类型的隐式转换开销。

注意点:

  • Object 键会强制转为字符串,{'0':1, '1':2}{0:1, 1:2} 是一样的,对纯数字 ID 安全;但若含 truenull 等,String(true) === 'true',没问题;String(undefined)'undefined',也无歧义
  • Map 更通用,支持任意类型作键,但内存占用略高
  • 不要在键里拼接未转义的用户输入,防止键冲突(比如 name + '_' + id 中 name 含下划线)
const arr = [1, 2, 2, 3]; const seen = new Map(); const unique = arr.filter(item => {   if (seen.has(item)) return false;   seen.set(item, true);   return true; });

真正难的不是写出一个去重函数,而是判断当前数组里到底存的是什么——是简单数字?带空值的混合类型?还是嵌套很深的对象?选错方案轻则结果不对,重则页面卡死。别抄完代码就跑,先 console.log(typeof arr[0]) 看一眼。

text=ZqhQzanResources