JavaScript数组去重最简单的 4 种方案

前言

JavaScript 数组去重是前端很容易碰到的笔试题，而且在前端开发中应用也非常广泛，今天给大家分享4种数组去重方案，分别使用 ES6 新语法 Set，indexOf，includes 以及数组的 filter 方法。

一、ES6 新语法 Set

用 ES6 新语法 Set函数是最简单粗暴的方法。
案例如下：

var arr = [1,2,3,2,4,6];
arr = Array.from(new Set(arr));//先转换为set类型，然后转换为普通数组类型
console.log(arr);

结果如下：

二、indexOf 与索引值比较

indexOf 得到某个指定的字符串值在字符串中首次出现的位置或者对象在数组中首次出现的位置。如果数组中没有重复数据，那么indexOf 值与索引值相等，相反如果数组中有重复的数据，那么 indexOf 值也会重复。比如[1,2,3,1]，第一个1的indexOf值为0，第二个1的 indexOf 也是 0。但它的数组索引值为 3。因此如果元素索引值与 元素 indexOf 值不相等，则有重复数据。

案例如下：

var arr = [1,2,3,2,4,6];
var arrNew = [];
arr.map((item,index)=>{
    if(arrNew.indexOf(item)<0){//如果索引值小于0则将数据push到空数组，push过的数据不会小于0
          arrNew.push(item);
    }
})
console.log(arrNew);

结果如下：

三、使用 includes 判断元素是否在数组内

includes 的用法和 indexOf 类似，只不过一个是判断一个元素是否在一个数组中，返回一个布尔值，而另一个是返回出现的位置。这里用 for 循环来展示一下，map 方法也可以。包括以上的案例中也可以用 for 循环。

var arr = [1,2,3,2,4,6];
var arrNew = [];
for(var i = 0;i<arr.length;i++){
   if(!arrNew.includes(arr[i])){
       arrNew.push(item);
   }
}
console.log(arrNew);

结果如下：

四、使用 filter 过滤数组

filter 是过滤数组，返回满足判断条件的数组。没有重复的数组元素索引值（index）与首次出现的索引位置（indexOf）相同。
案例如下：

var arr = [1,2,3,2,4,6];
arr = arr.filter((item,index)=>{
    return arr.indexOf(item) == index;
})
console.log(arr);

结果如下：