JavaScript数组去重—ES6的两种方式

article/2025/10/14 21:11:21

说明

JavaScript数组去重这个问题,经常出现在面试题中,以前也写过一篇数组去重的文章,(JavaScript 数组去重的多种方法原理详解)但感觉代码还是有点不够简单,今天和大家再说两种方法,代码可是足够的少了。

解释

方法一:

function unique(arr) {const res = new Map();return arr.filter((a) => !res.has(a) && res.set(a, 1))
}

就这么短,就可以了,我们来解释一下为什么。

Map对象

Map是ES6 提供的新的数据结构。
Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。

下表列出了 Map 对象的方法。

方法描述
clear删除所有的键/值对,没有返回值。
delete删除某个键,返回true。如果删除失败,返回false。
forEach对每个元素执行指定操作。
get返回Map对象key相对应的value值。
has返回一个布尔值,表示某个键是否在当前 Map 对象之中。
set给Map对象设置key/value 键/值对。

Map对象还有一个size属性,他返回Map对象的键/值对的数量。

数组的 filter() 方法

filter() 方法创建一个新的数组,新数组中的元素 是 通过检查 指定数组 中 符合条件的所有元素。

语法:

array.filter(function(currentValue,index,arr), thisValue)  

参数说明:
这里写图片描述

箭头函数

return arr.filter((a) => !res.has(a) && res.set(a, 1))
//上面的代码可以改成这样
return arr.filter(function(a){return !res.has(a) && res.set(a, 1);
});

1、箭头函数写代码拥有更加简洁的语法;
2、不会绑定this。

了解更多,点这里

方法一 分析

function unique(arr) {//定义常量 res,值为一个Map对象实例const res = new Map();//返回arr数组过滤后的结果,结果为一个数组//过滤条件是,如果res中没有某个键,就设置这个键的值为1return arr.filter((a) => !res.has(a) && res.set(a, 1))
}

方法二:

function unique(arr) {return Array.from(new Set(arr))
}

这个方法的代码量更少,简直不可思议。
数组的 from方法

Array.from() 方法从一个类似数组或可迭代的对象(包括 Array,Map,Set,String,TypedArray,arguments 对象等等) 中创建一个新的数组实例

语法:

Array.from(arrayLike[, mapFn[, thisArg]])
参数描述
arrayLike必需,想要转换成真实数组的类数组对象或可迭代的对象。
mapFn可选,如果指定了该参数,则最后生成的数组会经过该函数的加工处理后再返回。
thisArg可选,执行 mapFn 函数时 this 的值。

示例代码:

const bar = ["a", "b", "c"];
Array.from(bar);
// ["a", "b", "c"]Array.from('foo');
// ["f", "o", "o"]

Set对象

Set 对象允许你存储任何类型的 唯一值 ,无论是原始值或者是对象引用。
Set对象是值的集合,你可以按照插入的顺序迭代它的元素。
Set中的元素只会出现一次,即 Set 中的元素是唯一的。

语法:

new Set([iterable]);

参数:
iterable,如果传递一个可迭代对象(包括 Array,Map,Set,String,TypedArray,arguments 对象等等),它的所有元素将被添加到新的 Set中。如果不指定此参数或其值为null,则新的 Set为空。

下表列出了 Set 对象的方法。

方法描述
add添加某个值,返回Set对象本身。
clear删除所有的键/值对,没有返回值。
delete删除某个键,返回true。如果删除失败,返回false。
forEach对每个元素执行指定操作。
has返回一个布尔值,表示某个键是否在当前 Set 对象之中。

Set对象和Map对象一样,都有一个size属性,他返回Set对象的值的个数。

方法二 分析

function unique(arr) {//通过Set对象,对数组去重,结果又返回一个Set对象//通过from方法,将Set对象转为数组return Array.from(new Set(arr))
}

总结

这次说的两个方法,真的很简单,主要就是靠ES6里的新东西,难度不大,代码简单,主要就是多用用就好了。


经人提醒,再补充一种,[...new Set(arr)]

在这里插入图片描述

不懂 ... 的朋友,可以看这里 js扩展运算符

参考

ES6新特性:Javascript中的Map和WeakMap对象
http://www.cnblogs.com/diligenceday/p/5484130.html
Set和Map数据结构
http://es6.ruanyifeng.com/#docs/set-map
MDN
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map
Array filter()
http://www.runoob.com/jsref/jsref-filter.html
Array.from()
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/from
JavaScript初学者必看“箭头函数”
http://www.cnblogs.com/fundebug/p/6904753.html


http://chatgpt.dhexx.cn/article/yDXhyM3B.shtml

相关文章

ES6 Set() 数组去重

ES6 Set()去重 Set。它类似于数组,但是成员的值都是唯一的 通过add()方法向 Set 结构加入成员 let arr [1,2,3,4,1,5,2,3]; var set2 new Set(); arr.forEach(item>{set2.add(item) }) console.log(set2); console.log(Array.from(set2));let str [测试1,测试…

ES6数组去重的三个简单办法

ES6数组去重的三个简单办法 简单说一下利用ES6实现数组去重的三个办法。 第一种: 利用Map对象和数组的filter方法 贴上相关代码 打印后的结果 通过打印我们发现,确实实现了我们想要的效果。那么下面简单来解释一下。 1.Map对象是ES6提供的一个新的数据结构&…

一文弄懂Python中的*args 和 **kwargs

1. 引言 在本文中,我们将讨论 Python 中的 *args 和 **kwargs 及其用法和示例。 闲话少说,我们直接开始吧。 2. 问题引入 在Python中写函数的时候,我们经常需要给函数传值,这些值被称为函数参数。 我们不妨来举个栗子&#xff…

**kwargs python_python中**kwargs怎么用?

1、使用两个星号是收集关键字参数,可以将参数收集到一个字典中,参数的名字是字典的 “键”,对应的参数的值是字典的 “值”。请看下面的例子:>>> def print_kwargs(**kwargs): ... print(kwargs) ... >>> pr…

Python技巧:​args 和 kwargs 原来这么强大

大家好,今天我给大家分享Python技巧:​args 和 kwargs的相关技巧。喜欢记得收藏、关注、点赞。 注:完整代码、资料、技术交流文末获取 现在args和 kwargs参数仍然是 Python 中非常有用的特性,而且理解它们的威力将使您成为更有效…

*args和**kwargs是什么意思

去面试的时候,做了一道笔试题——什么是*args和**kwargs,区别在哪里? 有点蒙,好像见过,但是不知道具体的意思。所以回来查了一下资料,做一下笔记。 总的来说,*args代表任何多个无名参数&#x…

埃及分数c语言设计,埃及分数(四)

最优分解 源程序 下面就是求埃及分数最优分解的 C 语言源程序 EgyptianFraction.c: 1: #include 2: #include 3: #include 4: 5: const int SIZE 64; 6: static int wp -1, bp -1; 7: static mpz_t z, w, work[SIZE], best[SIZE]; 8: static mpq_t q1, q2; 9:…

埃及分数问题

问题描述: 古埃及人喜欢用最少的分子为 1 的真分数来表示一个真分数,比如7 / 8 1 / 2 1 / 3 1 / 24 。设计程序把一个真分数表示为最少的埃及分数之和的形式。 思路: 首先要知道什么是真分数:真分数是指大于0小于1的所有分数。这些分数的特…

贪心算法之埃及分数问题

1.问题:给定一个分数,如7/8,我们可以把它表示为1/2 1/3 1/24,埃及分数问题即把一个真分数表示为最少的埃及分数之和的形式,输入一个真分数把其分解为埃及分数之和。 2.设计思路:设分数为a/b,则cb/a,db%a,…

【数模】相关性分析

相关性:如果一个变量的变化引起了另一个变量的变化 目录 一、四种基本变量 二、 相关性分析方法 1.Pearson相关系数 2.Spearman 等级相关系数 3.Kendall tua-b 等级相关系数 4.卡方检测 5.Eta系数 *SPSS操作 三、偏相关 1.SPSS操作 2.偏相关系数和检验&…

数学建模-相关性分析及热力图

目录 一、相关性分析 二、相关性分析实例 三、三种相关系数 3.1 Pearson线性相关系数 3.2 Kendall tau系数 3.3 Spearman相关系数 4、Matlab代码 4.1 Pearson 显著性检验 4.2 Pearson 相关系数矩阵 4.3 Kendalltau相关系数矩阵 4.4 Spearman相关系数矩阵 5、代码…

R语言基础——简单相关性分析(1)

简单相关性分析(1) 简介1. 协方差和相关系数1.1 协方差1.2 相关系数 2. 相关性分析参考 简介 初次接触相关性分析,在摸索中前进,也顺便将笔记记录下来,未雨绸缪嘛! 简单来说,相关性分析就是衡量…

分类变量、有序变量与数值变量相关性分析方法总结及 R 语言应用

文章目录 一、分类 & 分类相关性分析二、有序 & 有序相关性分析三、数值 & 数值相关性分析四、分类 & 有序相关性分析五、分类 & 数值相关性分析六、有序 & 数值相关性分析 本文全部假设显著性水平为0.05,特殊说明的除外。 一、分类 & …

数据分析方法和思维—相关性分析法

01 写在前面 在数据分析的问题中, 经常会遇见的一种问题就是相关的问题, 比如抖音短视频的产品经理经常要来问留存(是否留下来)和观看时长, 收藏的次数, 转发的次数, 关注的抖音博主数等等是否有相关性, 相关性有多大。 因为只有知道了哪些因素和留存比较…

python相关性分析_python实践统计学中的三大相关性系数,并绘制相关性分析的热力图...

本文首发地址: https://yishuihancheng.blog.csdn.net/article/details/83547648 欢迎关注我的博客【Together_CZ】,我是沂水寒城! 今天我简单地使用了scipy模块进行了统计学中三大相关性分析方法(皮尔森相关性系数、斯皮尔曼相…

数据相关性分析笔记

一、数据相关性的含义 数据类型 数据可以是连续的值,比如声音、图像,称为模拟数据。也可以是离散的,如符号、文字,称为数字数据。(ppt)数值型数据、分类型数据、定序数据。 数据相关性 数据相关性是指数据之间存在某种关系&#…

ArcGIS栅格数据图层空间相关性分析方法

ArcGIS栅格数据图层空间相关性分析方法 也不知道严谨不严谨,先Mark吧欸。 矢量的空间相关分析可以通过Spatial Join以后,导出属性表到EXCEL中,进行相关分析Correlation Analysis.  而两个栅格数据图层直接能不能直接在ArcMap中进行相关分…

IBM SPSS Statistics常用的相关性分析方法

灵活运用IBM SPSS Statistics做数据的统计和分析是每个数据分析师都应该掌握的技能,这款软件为用户提供了全面的数据分析方法,可以解决我们在数据分析过程中遇到的各种难题。 接下来小编就为大家介绍一下SPSS相关性分析的方法。 图1:SPSS软件…

神经网络相关性分析方法,神经网络相关性分析图

1、bp神经网络怎么确定输入与输出是正相关还是负相关? 想了解输入输出关系你可以求协方差,进而求peason相关系数 当然你也可以求spearman 等,看他们的相关度即可,正负就代表是正相关还是负相关,具体值代表相关性度量 …

重剑无锋!15种相关分析算法,总有一款适合你!

相关系数(Correlation coefficient)可用于评估两个变量之间的线性关系,它的值在-1到1之间,-1或1代表完美的负相关和正相关,0表示不存在线性关系。 计算相关系数的方法种类繁多,各有自己的定义以及适用情况…