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

javascript数组怎么去重

夏杰同学_3200

夏杰同学_3200

发布时间:2025-08-23 13:53:01

|

863人浏览过

|

来源于php中文网

原创

javascript数组去重的核心答案是:1. 使用set可高效去重基本类型,但无法处理对象引用;2. indexof/includes适合小数组但性能差;3. map性能优于indexof,适合大数据量;4. 对象数组需基于唯一键或自定义比较规则去重;5. nan在set中被视为相同,而indexof无法识别;6. null和undefined可正常去重;7. 多属性或深比较需构造唯一标识或使用深比较逻辑;选择方法应综合考虑数据类型、性能需求和数组规模。

javascript数组怎么去重

JavaScript数组去重,简单来说,就是把数组里重复的元素都干掉,只留下独一份。方法挺多的,各有优劣,选择哪个取决于你的具体需求,比如性能要求、数据类型等等。

javascript数组怎么去重

解决方案

  1. 利用Set数据结构

Set是ES6引入的新数据结构,它最大的特点就是不允许重复的值。所以,我们可以先把数组转成Set,然后再把Set转回数组。

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

javascript数组怎么去重
const arr = [1, 2, 2, 3, 4, 4, 5];
const uniqueArr = [...new Set(arr)]; // 或者 Array.from(new Set(arr))
console.log(uniqueArr); // [1, 2, 3, 4, 5]

这种方法简洁高效,尤其适合处理基本数据类型的数组。但需要注意的是,Set认为

NaN
是相等的,只会保留一个。另外,对于对象类型的数组,Set无法直接去重,因为对象是引用类型,即使属性值相同,它们在内存中的地址也不同。

  1. 使用indexOf或includes

遍历数组,如果当前元素不在新数组中,就把它push进去。

javascript数组怎么去重
const arr = [1, 2, 2, 3, 4, 4, 5];
const uniqueArr = [];
for (let i = 0; i < arr.length; i++) {
  if (uniqueArr.indexOf(arr[i]) === -1) { // 或者 !uniqueArr.includes(arr[i])
    uniqueArr.push(arr[i]);
  }
}
console.log(uniqueArr); // [1, 2, 3, 4, 5]

这种方法兼容性好,但性能相对较差,特别是对于大型数组。

indexOf
和
includes
都需要遍历已去重的数组,时间复杂度是O(n)。

  1. 使用filter和indexOf

结合

filter
方法,可以更简洁地实现去重。

const arr = [1, 2, 2, 3, 4, 4, 5];
const uniqueArr = arr.filter((item, index) => {
  return arr.indexOf(item) === index;
});
console.log(uniqueArr); // [1, 2, 3, 4, 5]

这种方法本质上还是基于

indexOf
,所以性能瓶颈依然存在。

  1. 使用Map数据结构

Map对象保存键值对,任何值(对象或者原始值) 都可以作为一个键或一个值。我们可以利用Map的键的唯一性来实现去重。

const arr = [1, 2, 2, 3, 4, 4, 5];
const map = new Map();
const uniqueArr = [];
for (let i = 0; i < arr.length; i++) {
  if (!map.has(arr[i])) {
    map.set(arr[i], true);
    uniqueArr.push(arr[i]);
  }
}
console.log(uniqueArr); // [1, 2, 3, 4, 5]

Map的

has
方法查找效率比
indexOf
高,所以这种方法在处理大型数组时性能更好。

  1. 针对对象数组的去重

如果数组中的元素是对象,那么简单的

Set
或者
indexOf
就不管用了。我们需要自定义比较函数。

const arr = [{id: 1, name: 'a'}, {id: 2, name: 'b'}, {id: 1, name: 'a'}];

function uniqueObjectArray(arr, key) {
  const seen = new Set();
  return arr.filter(item => {
    const k = item[key];
    return seen.has(k) ? false : seen.add(k);
  });
}

const uniqueArr = uniqueObjectArray(arr, 'id');
console.log(uniqueArr); // [{id: 1, name: 'a'}, {id: 2, name: 'b'}]

这个例子中,我们根据对象的

id
属性来判断是否重复。如果需要根据多个属性来判断,可以修改比较函数。

JavaScript数组去重有哪些性能优化的技巧?

  1. 避免重复遍历: 尽量减少循环次数。例如,使用

    Set
    或
    Map
    可以在一次遍历中完成去重。

  2. 选择合适的数据结构:

    Set
    和
    Map
    的查找效率比
    indexOf
    高,适合处理大型数组。

  3. 避免不必要的类型转换: 如果数组元素类型已知,避免在比较过程中进行类型转换,可以提高性能。

  4. 利用缓存: 对于复杂的比较逻辑,可以利用缓存来避免重复计算。

  5. 考虑数组规模: 对于小型数组,简单的

    indexOf
    可能足够快。对于大型数组,更高效的算法更重要。

如何处理包含

null
、
undefined
和
NaN
的数组去重?

  1. null
    和
    undefined
    : 可以直接使用
    Set
    或
    indexOf
    进行去重。它们会被视为普通的值。

  2. NaN
    :
    NaN
    与任何值都不相等,包括它自身。
    indexOf
    无法找到
    NaN
    。
    Set
    认为
    NaN
    是相等的,只会保留一个。如果需要区分多个
    NaN
    ,需要自定义比较逻辑。

  3. 混合类型: 如果数组包含多种类型的值,需要注意类型转换问题。可以使用

    typeof
    运算符来判断类型,并进行相应的处理。

对象数组去重时,如何定义比较规则?

  1. 单属性比较: 如果只需要根据一个属性来判断对象是否重复,可以直接比较该属性的值。

  2. 多属性比较: 如果需要根据多个属性来判断,可以将这些属性的值组合成一个字符串或对象,然后进行比较。

  3. 自定义比较函数: 可以编写自定义的比较函数,根据复杂的业务逻辑来判断对象是否重复。

  4. 考虑深比较: 如果对象包含嵌套的对象或数组,需要进行深比较,确保所有属性都相同才认为对象重复。可以使用递归或第三方库来实现深比较。

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

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

热门AI工具

更多
创客贴AI

创客贴AI是一款AI图像与设计工具,AI辅助的智能在线设计工具。

Atoms
Atoms Hot

Atoms是一款AI智能体工具,第一支自动构建真实业务的 AI 团队。

小橡皮AI

一款AI工具,主要用于小橡皮一键去AI味,将机器味重的内容改得更有活人感,防止因为 AI 内容被平台打上 AI 标签,以及限流,适合需要提升相关任务效率的用户。

DeepSeek

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

豆包大模型

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

二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

WorkBuddy

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

Lovart
Lovart Hot

一款面向视觉设计创作的AI设计平台,可通过智能体和画布工作流辅助制作海报、Logo、网页、PPT及其他视觉内容。

火山引擎

火山引擎是一款面向企业的云计算与AI服务平台。

相关专题

更多
es6新特性
es6新特性

es6新特性有:1、块级作用域变量;2、箭头函数;3、模板字符串;4、解构赋值;5、默认参数;6、 扩展运算符;7、 类和继承;8、Promise。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

285

2023.07.17

es6新特性有哪些
es6新特性有哪些

es6的新特性有:1、块级作用域;2、箭头函数;3、解构赋值;4、默认参数;5、扩展运算符;6、模板字符串;7、类和模块;8、迭代器和生成器;9、Promise对象;10、模块化导入和导出等等。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

406

2023.08.04

JavaScript ES6新特性
JavaScript ES6新特性

ES6是JavaScript的根本性升级,引入let/const实现块级作用域、箭头函数解决this绑定问题、解构赋值与模板字符串简化数据处理、对象简写与模块化提升代码可读性与组织性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

375

2025.12.24

数据类型有哪几种
数据类型有哪几种

数据类型有整型、浮点型、字符型、字符串型、布尔型、数组、结构体和枚举等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

3131

2023.10.31

php数据类型
php数据类型

本专题整合了php数据类型相关内容,阅读专题下面的文章了解更多详细内容。

554

2025.10.31

c语言 数据类型
c语言 数据类型

本专题整合了c语言数据类型相关内容,阅读专题下面的文章了解更多详细内容。

542

2026.02.12

c语言中null和NULL的区别
c语言中null和NULL的区别

c语言中null和NULL的区别是:null是C语言中的一个宏定义,通常用来表示一个空指针,可以用于初始化指针变量,或者在条件语句中判断指针是否为空;NULL是C语言中的一个预定义常量,通常用来表示一个空值,用于表示一个空的指针、空的指针数组或者空的结构体指针。

549

2023.09.22

java中null的用法
java中null的用法

在Java中,null表示一个引用类型的变量不指向任何对象。可以将null赋值给任何引用类型的变量,包括类、接口、数组、字符串等。想了解更多null的相关内容,可以阅读本专题下面的文章。

1698

2024.03.01

Gradle插件开发入门教程
Gradle插件开发入门教程

本专题介绍Gradle插件开发的基本流程,涵盖插件类编写、自定义任务注册、扩展参数设计和插件应用方法,帮助你理解插件如何组织构建逻辑,减少多个项目之间的重复配置。

100

2026.10.22

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
MongoDB 教程
MongoDB 教程

共17课时 | 6.4万人学习

第三期培训_PHP开发
第三期培训_PHP开发

共116课时 | 32.9万人学习

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

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