前端es6数组去重的方法(js的es6数组去重常用的3种方法)

admin 1080 0

前端es6数组去重的方法(js的es6数组去重常用的3种方法)-第1张图片-前端这点事

前端es6数组去重的方法,下面介绍js的es6数组去重常用的3种方法,可以过滤掉数组相同的元素。其中我最中意的是Set, 因为最简洁,简单。

前端es6数组去重的方法(js的es6数组去重常用的3种方法)-第2张图片-前端这点事

1. 使用Set

先看一下Set定义:

Set对象是值的集合,你可以按照插入的顺序迭代它的元素。 Set中的元素只会出现一次,即 Set 中的元素是唯一的。

Set对象允许你存储任何类型的唯一值,无论是原始值或者是对象引用。

通过数组参数创建Set,因为Set只接受唯一值,重复的值会被去掉。

创建之后,重复的值会被去掉。然后在用...操作符转换回数组

前端es6数组去重的方法(js的es6数组去重常用的3种方法)-第3张图片-前端这点事

把Set转换为数组还可以使用Array.from,如下:

前端es6数组去重的方法(js的es6数组去重常用的3种方法)-第4张图片-前端这点事

2. 使用Filter

介绍这种方法之前,先熟悉一下indexOf, filter这两个api方法:

indexOf: 返回第一个找到的元素的索引值,找到了就立马返回

前端es6数组去重的方法(js的es6数组去重常用的3种方法)-第5张图片-前端这点事

filter:根据条件过滤元素,返回符合条件的新数组。如果条件返回true, 则元素包含在新数组中;如果条件返回false, 则新数组中不包含这个元素。

前端es6数组去重的方法(js的es6数组去重常用的3种方法)-第6张图片-前端这点事

下边是打印结果:

前端es6数组去重的方法(js的es6数组去重常用的3种方法)-第7张图片-前端这点事

也可以获取重复的元素:

前端es6数组去重的方法(js的es6数组去重常用的3种方法)-第8张图片-前端这点事

前端es6数组去重的方法(js的es6数组去重常用的3种方法)-第9张图片-前端这点事

3.使用Reduce

通过reducer函数,符合条件就把元素添加到结果数组中,不用额外创建数组变量。

前端es6数组去重的方法(js的es6数组去重常用的3种方法)-第10张图片-前端这点事

打印结果:

前端es6数组去重的方法(js的es6数组去重常用的3种方法)-第11张图片-前端这点事

三种方法介绍完了,可以结合具体使用场景去选择使用。


参考:

[Set]:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set

[filter]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

[reduce]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

观澜富士康官网

发布评论 0条评论)

还木有评论哦,快来抢沙发吧~