es6数组去重的方法是什么

es6数组去重的方法:1、利用Set对象和数组的from方法,语法“Array.from(new Set(arr))”;2、利用Set和扩展运算符,语法“[…new Set(arr)]”;3、利用Map对象和数组的filter方法。

es6数组去重的方法是什么

本教程操作环境:windows7系统、ECMAScript 6版、Dell G3电脑。

第一种:利用Set对象和数组的Array.from方法

const newArr = Array.from(new Set(arr));

登录后复制

代码示例:

在这里插入图片描述

打印运行后的结果

在这里插入图片描述

简单来说,第二种方法比第一种还简单。同样来简单解释一下。

Set是ES6新提供的数据结构,类似于数组,但是本身没有重复值。

Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括 ES6 新增的数据结构 Set 和 Map)。

所以set结合Array.from同样可以达到数组去重的效果。不过需要注意的是,主流浏览器像Chrome,Firfox,Opera,Safari,包括微软的Edge,都是支持的,但是唯独IE系列不支持。

第二种:利用Set+扩展运算符 …

第三种办法可以说是更简单

const newArr = [...new Set(arr)];

登录后复制

代码示例:

在这里插入图片描述
打印后运行的结果
在这里插入图片描述

这就是利用ES6新特性达到数组去重的三种办法,这三种办法有个共同的好处就是代码简洁,对于undefined和NaN也同样可以达到去重的效果~~

第三种: 利用Map对象和数组的filter方法

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

登录后复制

代码示例:

在这里插入图片描述

打印后的结果

在这里插入图片描述
通过打印我们发现,确实实现了我们想要的效果。那么下面简单来解释一下。

Map对象是ES6提供的一个新的数据结构,其中has的办法是返回一个布尔值,表示某个值是否存在当前的Mp对象之中,set的办法是给Map对象设置key/value。

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

所以说,Map对象结合filter方法可以达到数组去重的效果~

【推荐学习:javascript高级教程】

以上就是es6数组去重的方法是什么的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2708320.html

(0)
上一篇 2025年3月7日 20:20:07
下一篇 2025年2月17日 23:45:32

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • es6新增加的数据类型有什么

    es6新增加的数据类型:1、Symbol类型;2、Set类型;3、Map类型;4、WeakSet类型;5、WeakMap类型;6、TypedArray类型。 本教程操作环境:windows7系统、ECMAScript 6版、Dell G3电…

    2025年3月7日 编程技术
    100
  • es6 set方法有哪些

    es6 set方法可分为两大类:1、操作方法“add(value)”、“delete(value)”、“has(value)”、clear();2、遍历方法keys()、values()、entries()、forEach()。 本教程操作…

    2025年3月7日
    200
  • 如何解决es6 import报错问题

    es6 import报错的解决办法:1、使用bebal把es6转化为es5;2、通过webpack进行打包,把所有的依赖都合并为一个文件,再使用babel进行转换即可。 本文操作环境:windows7系统、ECMAScript 6版、Del…

    2025年3月7日
    200
  • javascript数组去重怎么做

    方法:1、利用“[…new Set(arr)]”语句;2、利用“Array.from(new Set(arr))”语句;3、利用filter和indexOf函数;4、利用双重for循环,检查值是否重复,如果有重复就使用push(…

    2025年3月7日
    200
  • es6数组方法有什么

    es6数组方法有:“from()”、“of()”、“copyWithin()”、“fill()”、“find()”、“findIndex()”、“includes()”、“entries()”、“keys()”、“values()”等。 本…

    2025年3月7日
    200
  • es6箭头什么意思

    在es6中,箭头“=>”指的是箭头函数,是一种函数的简写方法,它将原函数的“function”关键字和函数名都删掉,并使用“=>”连接参数列表和函数体;例语句“v=>v;”,就相当于“function (v){return…

    2025年3月7日 编程技术
    200
  • 如何使用es6的set

    es6 set的使用方法:1、通过“let a=[1,2,3,4,5];”方式定义从var变为let;2、通过“let set=new Set();”语法运用set即可。 本文操作环境:windows7系统、ECMAScript 6版、De…

    2025年3月7日
    200
  • 解析JavaScript中的Generators

    JavaScript Generators指南 最近,为了更好地理解redux sagas的工作原理,我重学了javascript generators的知识,我把从网上收集到的各种知识点浓缩到一篇文章里,我希望这篇文章既通俗易懂,又足够严…

    编程技术 2025年3月7日
    200
  • es6 map()方法是干什么的

    在es6中,map()方法用于对数组中的每个元素调用指定的回调函数进行处理,并返回包含结果的数组;语法“array.map(function callbackfn (value, index, array), thisArg);”。 本教程…

    2025年3月7日
    200
  • javascript es6数组方法有哪些

    es6数组方法:1、map方法;2、find方法;3、findIndex方法;4、filter方法;5、every方法;6、some方法;7、reduce方法;8、reduceRight方法;9、foreach方法;10、keys方法等等。…

    2025年3月7日
    200

发表回复

登录后才能评论