JavaScript中数组去重怎么做_有哪些高效方案-js教程-PHP中文网

JavaScript中数组去重怎么做_有哪些高效方案

夢幻星辰

发布： 2025-12-13 22:48:07

原创

879人浏览过

JavaScript数组去重需据场景选择：小数据量用[...new Set(arr)]，兼容性好且保持顺序；老旧环境用filter+indexOf；大数据量用Set哈希过滤；对象数组则按字段去重。

javascript中数组去重怎么做_有哪些高效方案

JavaScript数组去重有多种方式，核心在于根据场景选对方法：小数据量图简单，大数据量看性能，还要兼顾是否保留顺序、是否处理对象等细节。

Set + 扩展运算符（最常用）

适合基本类型（数字、字符串）且要求保持原顺序的场景，代码简洁、可读性强、现代浏览器兼容好。

原理：Set自动去重，扩展运算符转回数组
写法：[...new Set(arr)]
注意：不能处理对象或NaN的深层相等（比如{a:1}和{a:1}仍算不同）

filter + indexOf（兼容性最好）

适用于需要支持老旧环境（如IE）或明确依赖索引逻辑的场景，语义清晰，但时间复杂度为O(n²）。

写法：arr.filter((item, index) => arr.indexOf(item) === index)
优点：不依赖ES6，所有数组元素都走一遍比较
缺点：重复调用indexOf，大数据量时明显变慢

Map 或 Object 做哈希记录（大数据量首选）

当数组很长（上万项）、又需保留顺序时，用一次遍历+哈希查找，效率接近O(n)，比filter方案快得多。

Lateral App

整理归类论文

查看详情

立即学习“Java免费学习笔记（深入）”；

基础版（仅限字符串/数字）：arr.reduce((unique, item) => unique.has(item) ? unique : unique.set(item, 1) && unique, new Map()).keys()，再转数组

更实用写法：

const seen = new Set();
const result = arr.filter(item => !seen.has(item) && seen.add(item));

登录后复制

扩展提示：若要处理对象，可序列化键名（如JSON.stringify(obj)），但要注意属性顺序、undefined、函数等会被忽略

针对对象数组的去重（按指定字段）

不能直接用Set，需自定义唯一标识。常见做法是提取关键字段拼接成字符串作为key。

示例（按id去重）：

const seenIds = new Set();
const uniqueByField = arr.filter(item => {
  if (seenIds.has(item.id)) return false;
  seenIds.add(item.id);
  return true;
});

登录后复制

通用函数思路：接收数组和一个取值函数（如item => item.id或item => [item.name, item.age].join('|')）
注意：避免直接用JSON.stringify做key，性能差且不稳定（如属性顺序不同会导致key不同）

基本上就这些。日常开发中，[...new Set(arr)]覆盖80%需求；真遇到几万条数据或对象去重，再上Map/Set手动过滤。不复杂，但容易忽略适用边界。

以上就是JavaScript中数组去重怎么做_有哪些高效方案的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

深入理解与解决 Tailwind CSS 动态类名失效问题 NetSuite Suitelet实现拖放文件上传至文件柜教程 JavaScript中数组去重怎么做_有哪些高效方案 PHP与JavaScript Fetch POST请求数据处理指南解决HTML按钮点击不触发CSS类切换：理解type属性的关键作用