![4680d3589fd82dc3cdc517be8f7698c6.png](https://i-blog.csdnimg.cn/blog_migrate/d8fdc5e366dfdc815a9590db1d81eb55.jpeg)
下边介绍3种方法,可以过滤掉数组相同的元素。其中我最中意的是Set, 因为最简洁,简单。
![9082ee0098e574d884fe71e9676b062d.png](https://i-blog.csdnimg.cn/blog_migrate/fba8896062afd20290ca7d4b64babd44.jpeg)
1. 使用Set
先看一下Set定义:
Set对象是值的集合,你可以按照插入的顺序迭代它的元素。 Set中的元素只会出现一次,即 Set 中的元素是唯一的。
Set 对象允许你存储任何类型的唯一值,无论是原始值或者是对象引用。
通过数组参数创建Set,因为Set只接受唯一值,重复的值会被去掉。
创建之后,重复的值会被去掉。然后在用...操作符转换回数组。
![083eb01b84de37074bac50a4bddb64ab.png](https://i-blog.csdnimg.cn/blog_migrate/b2ac272d58793b0d51a929928045f4c1.jpeg)
把Set转换为数组还可以使用Array.from,如下:
![e0c06a7e88c95fc45d844251456084a9.png](https://i-blog.csdnimg.cn/blog_migrate/81f6b274af09c201a28ca01127927d1c.jpeg)
2. 使用Filter
介绍这种方法之前,先熟悉一下indexOf, filter这两个api方法:
indexOf: 返回第一个找到的元素的索引值,找到了就立马返回
![9e91577ddfd01a87ccafeb679f2dd5c9.png](https://i-blog.csdnimg.cn/blog_migrate/daa9213aa6dcdaa32adb130e098aee13.jpeg)
filter: 根据条件过滤元素,返回符合条件的新数组。如果条件返回true, 则元素包含在新数组中;如果条件返回false, 则新数组中不包含这个元素。
![7a105758ba28c7524ecfb9bf69a4128b.png](https://i-blog.csdnimg.cn/blog_migrate/01d9ff1685c7d047e76b6097d2a754d6.jpeg)
下边是打印结果:
![481253c708f490f6e45cd13f11310703.png](https://i-blog.csdnimg.cn/blog_migrate/7649813438ad323bf4908e759e2cd97a.jpeg)
也可以获取重复的元素:
![0094d1ab71bf5bedbfcc45f0b2c415c8.png](https://i-blog.csdnimg.cn/blog_migrate/07145420c183dc3ac3051c6f9eb960bc.jpeg)
![3ae0cc730d5e1f41de13d6b2cfb445ee.png](https://i-blog.csdnimg.cn/blog_migrate/a393cad4f2596dbab2827513e4febea4.jpeg)
3.使用Reduce
通过reducer函数,符合条件就把元素添加到结果数组中,不用额外创建数组变量。
![2d1fc668defc1d844138c6186c57fd8a.png](https://i-blog.csdnimg.cn/blog_migrate/2239efdf4c6c93025b1f92192152017d.jpeg)
打印结果:
![6007bce6ae2af3a7611f3edfee30fe5a.png](https://i-blog.csdnimg.cn/blog_migrate/e9bc24550ceb7acb1532766808112673.jpeg)
三种方法介绍完了,可以结合具体使用场景去选择使用。
相关文章:
使用Array.isArray更好地检查数组
JS扩展运算符(Spread Operator)的5种用法
JavaScript中如何反转数组
参考:
[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