0

0

js 怎样用unique对数组元素进行去重

小老鼠

小老鼠

发布时间:2025-08-08 09:06:02

|

1003人浏览过

|

来源于php中文网

原创

数组去重的首选方法是使用set,因为其基于哈希表实现,查找效率为o(1),性能优于其他方法;1. 使用set去重:通过[...new set(arr)]可快速去除重复值,适用于简单数据类型且通常保持原顺序;2. 使用filter与indexof:通过arr.filter((item, index) => arr.indexof(item) === index)实现,兼容性好但性能较低;3. 使用reduce与includes:通过累加器和includes判断是否包含当前元素,逻辑清晰但效率不高;4. 处理对象数组时需自定义比较函数,如利用some方法结合id等属性判断唯一性;5. 若需排除null和undefined,可在去重前先用filter过滤;6. set还可用于集合运算,如求交集、并集、差集等,具备add、delete、has、clear和size等实用方法,功能丰富。因此,set是高效且多功能的去重选择。

js 怎样用unique对数组元素进行去重

数组去重,简单来说,就是把数组里重复的元素去掉,留下唯一的值。JavaScript 提供了多种方法来实现这个目标,但哪种方法最适合你的场景,取决于你的具体需求,比如数组的大小、数据类型、性能要求等等。

解决方案

  1. 使用 Set 数据结构

    ES6 引入了 Set,它是一种集合数据结构,其特性就是不允许存储重复的值。利用这个特性,我们可以很方便地对数组进行去重。

    function unique(arr) {
      return [...new Set(arr)];
    }
    
    // 示例
    const numbers = [1, 2, 2, 3, 4, 4, 5];
    const uniqueNumbers = unique(numbers);
    console.log(uniqueNumbers); // 输出: [1, 2, 3, 4, 5]

    这种方法简洁高效,是处理简单数据类型数组(如数字、字符串)的常用选择。

  2. 使用 Array.filter() 和 Array.indexOf()

    这种方法利用

    filter()
    遍历数组,并使用
    indexOf()
    检查当前元素是否已经存在于结果数组中。如果不存在,则将其添加到结果数组。

    function unique(arr) {
      return arr.filter((item, index) => arr.indexOf(item) === index);
    }
    
    // 示例
    const numbers = [1, 2, 2, 3, 4, 4, 5];
    const uniqueNumbers = unique(numbers);
    console.log(uniqueNumbers); // 输出: [1, 2, 3, 4, 5]

    这种方法兼容性较好,但对于大型数组,性能可能不如使用 Set。

  3. 使用 Array.reduce() 和 includes()

    reduce()
    方法可以将数组中的每个值(从左到右)累加,最终计算为一个值。我们可以利用它来构建一个去重后的数组。

    讯飞星火
    讯飞星火

    科大讯飞推出的多功能AI智能助手

    下载
    function unique(arr) {
      return arr.reduce((acc, curr) => {
        if (!acc.includes(curr)) {
          acc.push(curr);
        }
        return acc;
      }, []);
    }
    
    // 示例
    const numbers = [1, 2, 2, 3, 4, 4, 5];
    const uniqueNumbers = unique(numbers);
    console.log(uniqueNumbers); // 输出: [1, 2, 3, 4, 5]

    这种方法思路清晰,但

    includes()
    方法在大型数组中查找元素时效率较低。

  4. 处理包含对象或复杂数据类型的数组

    如果数组包含对象或其他复杂数据类型,简单的

    ===
    比较无法判断两个对象是否相等。这时,我们需要自定义比较函数。

    function unique(arr, compare) {
      const result = [];
      arr.forEach(item => {
        if (!result.some(existing => compare(item, existing))) {
          result.push(item);
        }
      });
      return result;
    }
    
    // 示例:比较两个对象是否具有相同的 id 属性
    const objects = [{ id: 1, name: 'A' }, { id: 2, name: 'B' }, { id: 1, name: 'C' }];
    const uniqueObjects = unique(objects, (a, b) => a.id === b.id);
    console.log(uniqueObjects); // 输出: [{ id: 1, name: 'A' }, { id: 2, name: 'B' }]

    这里,

    compare
    函数用于比较两个对象是否相等。你需要根据对象的具体结构和比较逻辑来实现这个函数。

为什么 Set 通常是首选的去重方法?

Set 的底层实现通常基于哈希表,这使得它在查找元素时具有近乎常数时间的复杂度 O(1)。相比之下,

indexOf()
includes()
方法在数组中查找元素的时间复杂度为 O(n)。因此,对于大型数组,使用 Set 可以显著提高去重效率。

去重后数组的顺序会改变吗?

使用 Set 去重通常会保留原始数组的顺序。然而,不同的 JavaScript 引擎可能对此有不同的实现。如果你需要绝对保证去重后数组的顺序与原始数组一致,可以考虑使用

Array.filter()
Array.indexOf()
方法,或者在去重后对数组进行排序。

如何处理数组中的 null 和 undefined 值?

在去重时,

null
undefined
也被视为普通的值。如果需要将它们排除在去重结果之外,可以在去重前先将它们过滤掉。

function unique(arr) {
  return [...new Set(arr.filter(item => item !== null && item !== undefined))];
}

// 示例
const values = [1, 2, null, undefined, 2, 3, null];
const uniqueValues = unique(values);
console.log(uniqueValues); // 输出: [1, 2, 3]

除了去重,还能用 Set 做什么?

Set 不仅仅可以用于去重。它还提供了一些其他有用的方法,例如:

  • add(value)
    : 向 Set 中添加一个值。
  • delete(value)
    : 从 Set 中删除一个值。
  • has(value)
    : 检查 Set 中是否包含一个值。
  • clear()
    : 清空 Set 中的所有值。
  • size
    : 返回 Set 中值的数量。

你可以利用这些方法来实现一些集合操作,例如求交集、并集、差集等。比如,求两个数组的交集可以这样做:

function intersection(arr1, arr2) {
  const set1 = new Set(arr1);
  return [...new Set(arr2)].filter(item => set1.has(item));
}

// 示例
const arr1 = [1, 2, 3, 4, 5];
const arr2 = [3, 4, 5, 6, 7];
const intersectionResult = intersection(arr1, arr2);
console.log(intersectionResult); // 输出: [3, 4, 5]

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
es6新特性
es6新特性

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

106

2023.07.17

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

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

195

2023.08.04

JavaScript ES6新特性
JavaScript ES6新特性

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

223

2025.12.24

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

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

310

2023.10.31

php数据类型
php数据类型

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

222

2025.10.31

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

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

237

2023.09.22

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

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

499

2024.03.01

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

361

2023.08.03

go语言 注释编码
go语言 注释编码

本专题整合了go语言注释、注释规范等等内容,阅读专题下面的文章了解更多详细内容。

30

2026.01.31

热门下载

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

精品课程

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

共28课时 | 3.8万人学习

Excel 教程
Excel 教程

共162课时 | 14.9万人学习

MongoDB 教程
MongoDB 教程

共17课时 | 2.5万人学习

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

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号