讲师中心 微信公众号
AI工具推荐 视频效率加速

JavaScript数组去重怎么做_哪种方法性能最好?

胖枫小哥_6423

胖枫小哥_6423

发布时间:2026-01-04 22:45:09

|

687人浏览过

|

来源于php中文网

原创

Set去重最快且简洁,适用于基本类型;filter+indexOf兼容旧环境但性能差;对象数组需用Map按字段去重;避免JSON.stringify因键序和特殊值问题。

javascript数组去重怎么做_哪种方法性能最好?

Set 是最简单也最快的方法

现代 JavaScript 中,Array.from(new Set(arr))[...new Set(arr)] 是去重首选。它天然支持基本类型(stringnumberbooleannullundefined)和 Symbol,底层基于哈希表实现,时间复杂度接近 O(n)

注意:对象或数组等引用类型仍会去重失败,因为 Set 比较的是引用地址,不是内容。

const arr = [1, 2, 2, 'a', 'a', {x: 1}, {x: 1}];
console.log([...new Set(arr)]); // [1, 2, "a", {x: 1}, {x: 1}] —— 两个对象都被保留

filter + indexOf 适合兼容老环境但性能差

在不支持 Set 的旧浏览器(如 IE)中可用,但每次调用 indexOf 都要从头遍历,整体是 O(n²),数据量稍大(比如 > 10k)就明显卡顿。

  • 只适用于基本类型;引用类型同样按地址判断
  • indexOfNaN 返回 -1,所以 NaN 会被当成“不存在”而保留多个
  • 写法简洁但别在性能敏感路径里用
const arr = [1, 2, 2, NaN, NaN];
arr.filter((item, i) => arr.indexOf(item) === i); // [1, 2, NaN, NaN]

对象数组去重得靠 Map 或字符串化键

想根据某个字段(如 id)去重,Map 是最稳妥的选择:键唯一、插入有序、查找快。比 findIndex 或双循环快得多。

Revealjs Presentations
Revealjs Presentations

创建、编辑并部署 reveal.js 演示文稿为单个 HTML 文件,可选自定义 CSS。适用于需要制作演示文稿、幻灯片或宣传材料时使用。

下载

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

  • 避免 JSON.stringify —— 性能差、键序不确定、无法处理函数/undefined/循环引用
  • 如果字段名固定,直接用 item.idMap 键最安全
  • Map 在 Chrome/Firefox/Edge 中已高度优化,实测 10w 条数据耗时约 10ms 内
const users = [{id: 1, name: 'a'}, {id: 2, name: 'b'}, {id: 1, name: 'c'}];
const seen = new Map();
const unique = users.filter(item => {
  if (seen.has(item.id)) return false;
  seen.set(item.id, true);
  return true;
}); // [{id: 1, name: 'a'}, {id: 2, name: 'b'}]

别盲目追求“一行代码”,先看数据特征

性能不是只看算法复杂度。真实场景中,Set 虽快,但如果数组里混着大量对象且你其实只需要按 name 去重,硬套 [...new Set(arr)] 就完全没用——它根本不会比较 name 字段。

更常见的坑是:用 JSON.stringify 当去重依据,结果遇到 {a:1,b:2}{b:2,a:1} 被判为不同;或者把 undefinedfunction 序列化成 null 导致误删。

真正影响性能的,往往是数据结构是否规整、是否提前知道去重维度、以及有没有必要保留原始顺序——这些比选哪个函数更重要。

相关文章

数码产品性能查询
数码产品性能查询

该软件包括了市面上所有手机CPU,手机跑分情况,电脑CPU,电脑产品信息等等,方便需要大家查阅数码产品最新情况,了解产品特性,能够进行对比选择最具性价比的商品。

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
蛙蛙写作

一款AI论文写作工具,主要用于超级AI智能写作助手,适合需要提升相关任务效率的用户。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

UP简历
UP简历 Hot

一款AI办公效率工具,主要用于基于AI技术的免费在线简历制作工具,适合需要提升相关任务效率的用户。

AionClaw
AionClaw Hot

AionClaw是一款面向办公、创作和编程任务的AI桌面智能体。

讯飞绘文

讯飞绘文是一款由科大讯飞推出的一站式 AIGC 内容运营平台。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

切问学术

切问学术是一款AI论文写作工具,复旦大学NLP团队推出的AI学术智能体。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

1955

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

2582

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

896

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

2879

2025.09.10

chrome什么意思
chrome什么意思

chrome是浏览器的意思,由Google开发的网络浏览器,它在2008年首次发布,并迅速成为全球最受欢迎的浏览器之一。本专题为大家提供chrome相关的文章、下载、课程内容,供大家免费下载体验。

2446

2023.08.11

chrome无法加载插件怎么办
chrome无法加载插件怎么办

chrome无法加载插件可以通过检查插件是否已正确安装、禁用和启用插件、清除插件缓存、更新浏览器和插件、检查网络连接和尝试在隐身模式下加载插件方法解决。更多关于chrome相关问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

4259

2023.11.06

Chrome开启无痕模式
Chrome开启无痕模式

本专题整合了Chrome无痕模式开启相关内容,阅读专题下面的文章了解更多详细教程。

3067

2026.03.24

edge是什么浏览器
edge是什么浏览器

Edge是一款由Microsoft开发的网页浏览器,是Windows 10操作系统中默认的浏览器,其目标是提供更快、更安全、更现代化的浏览器体验。本专题为大家提供edge浏览器相关的文章、下载、课程内容,供大家免费下载体验。

2742

2023.08.21

Vibeknow在线使用入口合集
Vibeknow在线使用入口合集

本专题汇总了Vibeknow在线创作视频的官方入口及网页版使用教程,涵盖PPT、PDF、Word等文档一键转讲解视频的核心操作,并整理了免费版水印规则与手机端浏览器访问指南,助你快速将知识内容视频化。

0

2026.09.21

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 11.9万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.5万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn