数组去重三重奏

发布时间:2019-01-03 作者:一点通


如何快速去重数组

var arr = ['a', 'b', 'c', 'b']

常规做法

常见的做法就是遍历原数组,利用indexOf检测是否已经加入过某项了,没有的话就push进去

arr.reduce((result, item) => {
    if(result.indexOf(item) < 0){
        result.push(item)
    }
    return result
}, [])

当然这里用forEach也是可以的,reduce只是避免了新创建外部变量

巧妙做法

先上代码

arr.filter(function(item, index){
    return arr.indexOf(item) === index
})

filter用来以指定的条件过滤数组,并返回一个新的数组,用法是:

arr.filter(callback(element [, index [, array]])[, thisArg])

其中element表示当前遍历的项,index表示当前项的索引。

indexOf表示返回给定元素在某个数组中的第一个索引,重点是第一个

然后有意思的事情发生了,细想一下,如果某个数组中有重复的元素,那么在filter中的过程中,indexOf(该元素)的值肯定是不会变的,只有第一个该元素的index才会和indexOf的值相等

我们可以验证一下

arr.filter(function(item, index){
    console.log(index, arr.indexOf(item))
})

输出

0 0
1 1
2 2
3 1

可以看到,第二个bindex3,而indexOf仍然为1,由此也就达到了巧妙的去重效果。

最新最简做法

ES6为我们提供了新的数据结构Set,它类似于数组,但是有一个很重要的特点就是,Set里面成员的值都是唯一的,没有重复的值。试试下面的代码

let newArr = [...new Set(arr)]

先将数组转换成Set,然后再利用...将其展开为数组

或者

let newArr = Array.from(new Set(arr))

demo