史上最详细JavaScript数组去重方法(14种）

Elena_Lucky_baby

已于 2024-05-17 18:10:50 修改

阅读量3.3k

点赞数 17

文章标签： javascript 前端开发语言

于 2024-05-17 18:03:51 首次发布

本文链接：https://blog.csdn.net/weixin_52493208/article/details/139009517

版权

1.利用Set()+Array.from()

将数组的每一个元素依次与其他元素做比较，发现重复元素，删除

Set对象：是值的集合，你可以按照插入的顺序迭代它的元素。 Set中的元素只会出现一次，即Set中的元素是唯一的。
Array.from() 方法：对一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。

const arr = [1, 2, 2, 'abc', 'abc', true, true, false, false, undefined, undefined, NaN, NaN]

const result = Array.from(new Set(arr))
console.log(result) // [ 1, 2, 'abc', true, false, undefined, NaN ]

注意：以上去方式对NaN和undefined类型去重也是有效的，是因为NaN和undefined都可以被存储在Set中， NaN之间被视为相同的值（尽管在js中：NaN !== NaN）。

特点:不考虑兼容性，这种去重的方法代码最少。这种方法还无法去掉 {} 空对象，后面的高阶方法会添加去掉重复 {} 的方法。

2.利用数组的includes+push方法

此方法逻辑与indexOf方法去重异曲同工，只是用includes方法来判断是否包含重复元素。

includes()方法：用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false。

const arr = [1, 2, 2, 'abc', 'abc', true, true, false, false, undefined, undefined, NaN, NaN]
 function removeDuplicate(arr) {
    const newArr = []
    arr.forEach(item => {

       if (!newArr.includes(item)) {
       newArr.push(item)
      }

   })
  return newArr
 }

 const result = removeDuplicate(arr)
 console.log(result) // [ 1, 2, 'abc', true, false, undefined, NaN ]

注意：为什么includes能够检测到数组中包含NaN，其涉及到includes底层的实现。如下图为includes实现的部分代码，在进行判断是否包含某元素时会调用sameValueZero方法进行比较，如果为NaN，则会使用isNaN()进行转化。

简单测试includes()对NaN的判断：

const testArr = [1, 'a', NaN]
console.log(testArr.includes(NaN)) // true

特点: {}没有去重

3.利用 for 嵌套 for，然后 splice 去重（ES5 中最常用）

通过两层循环对数组元素进行逐一比较，然后通过splice方法来删除重复的元素。此方法对NaN是无法进行去重的，因为进行比较时NaN !== NaN。

带nan的数据是为了举例对nan学习
var arr = [1,23,1,1,1,3,23,5,6,7,9,9,8,5,5,5,5];
const arr = [1, 2, 2, 'abc', 'abc', true, true, false, false, undefined, undefined, NaN, NaN]
  
    function noRepeat1(arr) {
        for(var i = 0; i < arr.length-1; i++){
            for(var j = i+1; j < arr.length; j++){
                if(arr[i]===arr[j]){
                    arr.splice(j,1);
                    j--;
                }
            }
        }
        return arr;
    }
    var arr2 = noRepeat1(arr);
    console.log(arr2);    //[1, 23, 3, 5, 6, 7, 9, 8]
                          // [ 1, 2, 'abc', true, false, undefined, NaN, NaN ]

特点:双层循环，外层循环元素，内层循环时比较值。值相同时，则删去这个值。NaN和{}没有去重，两个null直接消失了

4.利用forEach+indexOf方法

新建一个空数组，遍历需要去重的数组，将数组元素存入新数组中，存放前判断数组中是否已经含有当前元素，没有则存入。此方法也无法对NaN去重。

indexOf() 方法：返回调用它的String对象中第一次出现的指定值的索引，从 fromIndex 处进行搜索。如果未找到该值，则返回 -1。

const arr = [1, 2, 2, 'abc', 'abc', true, true, false, false, undefined, undefined, NaN, NaN]
function removeDuplicate(arr) {

   const newArr = []

   arr.forEach(item => {

     if (newArr.indexOf(item) === -1) {
     newArr.push(item)
    }
 })
 return newArr // 返回一个新数组
}

const result = removeDuplicate(arr)
console.log(result) // [ 1, 2, 'abc', true, false, undefined, NaN, NaN ]

5.利用for + indexOf方法

2.借助indexOf()方法判断此元素在该数组中首次出现的位置下标与循环的下标是否相等
var arr = [1,23,1,1,1,3,23,5,6,7,9,9,8,5,5,5];
    console.log(arr);    //[1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5, 5, 5]
    function noRepeat2(arr) {
        for (var i = 0; i < arr.length; i++) {
            if (arr.indexOf(arr[i]) != i) {
                arr.splice(i,1);//删除数组元素后数组长度减1后面的元素前移
                i--;//数组下标回退
            }
        }
        return arr;
    }
    var newArr = noRepeat2(arr);
    console.log(newArr);    //[1, 23, 3, 5, 6, 7, 9, 8]

6.利用数组的filter()+indexOf()

filter方法会对满足条件的元素存放到一个新数组中，结合indexOf方法进行判断。

filter() 方法：会创建一个新数组，其包含通过所提供函数实现的测试的所有元素。

const arr = [1, 2, 2, 'abc', 'abc', true, true, false, false, undefined, undefined, NaN, NaN] 
function removeDuplicate(arr) {

    return arr.filter((item, index) => {

       return arr.indexOf(item) === index
  })
}

const result = removeDuplicate(arr)

console.log(result) // [ 1, 2, 'abc', true, false, undefined ]

注意：这里的输出结果中不包含NaN，是因为indexOf()无法对NaN进行判断，即arr.indexOf(item) === index返回结果为false。测试如下：

const testArr = [1, 'a', NaN]
console.log(testArr.indexOf(NaN)) // -1

7.利用 indexOf + push()方法

4.借助新数组 通过indexOf方判断当前元素在数组中的索引如果与循环的下标相等则添加到新数组中
var arr = [1,23,1,1,1,3,23,5,6,7,9,9,8,5,5,5];
    console.log(arr)    //[1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5, 5, 5]
    function noRepeat4(arr) {
        var ret = [];
        for (var i = 0; i < arr.length; i++) {
            if (arr.indexOf(arr[i]) == i) {
                ret.push(arr[i]);
            }
        }
        return ret;
    }
    var arr2 = noRepeat4(arr);
    console.log(arr2);    //[1, 23, 3, 5, 6, 7, 9, 8]

特点:新建一个空的结果数组，for 循环原数组，判断结果数组是否存在当前元素，如果有相同的值则跳过，不相同则 push 进数组。NaN、{}没有去重。

8.利用 indexOf + splice方法

2.借助indexOf()方法判断此元素在该数组中首次出现的位置下标与循环的下标是否相等
var arr = [1,23,1,1,1,3,23,5,6,7,9,9,8,5,5,5];
    console.log(arr);    //[1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5, 5, 5]
    function noRepeat2(arr) {
        for (var i = 0; i < arr.length; i++) {
            if (arr.indexOf(arr[i]) != i) {
                arr.splice(i,1);//删除数组元素后数组长度减1后面的元素前移
                i--;//数组下标回退
            }
        }
        return arr;
    }
    var newArr = noRepeat2(arr);
    console.log(newArr);    //[1, 23, 3, 5, 6, 7, 9, 8]

9.利用对象forEach循环+push（）方法

其实现思想和Map()是差不多的，主要是利用了对象的属性名不可重复这一特性。

const arr = [1, 2, 2, 'abc', 'abc', true, true, false, false, undefined, undefined, NaN, NaN]
function removeDuplicate(arr) {

   const newArr = []

   const obj = {}

   arr.forEach(item => {

       if (!obj[item]) {
       newArr.push(item)
       obj[item] = true
      }
   })

   return newArr
 }

 const result = removeDuplicate(arr)

 console.log(result) // [ 1, 2, 'abc', true, false, undefined, NaN ]

10.利用对象for循环+push（）方法

5.利用空对象来记录新数组中已经存储过的元素
var arr = [1,23,1,1,1,3,23,5,6,7,9,9,8,5];
    console.log(arr)    //[1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5]
    var obj={};
    var newArr=[];
    for(var i=0;i<arr.length;i++){
        if(!obj[arr[i]]){
            obj[arr[i]]=true;
            newArr.push(arr[i]);
        }
    }
    console.log(newArr);    //[1, 23, 3, 5, 6, 7, 9, 8]

11.双层循环改变原数组+splice

var arr = [1,1,2,2,3,3,4,4,5,5,4,3,1,2,6,6,6,6];
    console.log(arr);    //[1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 4, 3, 1, 2, 6, 6, 6, 6]
    function noRepeat9(arr){
        for (var i = 0; i < arr.length; i++) {
            for (var j = 0; j < arr.length; j++) {
                if (arr[i] == arr[j] && i != j) {//将后面重复的数删掉
                    arr.splice(j, 1);
                }
            }
        }
        return arr;
    }
    var arr2  = noRepeat9(arr);
    console.log(arr2);    //[1, 2, 3, 4, 5, 6]

12.利用Map()

Map对象是JavaScript提供的一种数据结构，结构为键值对形式，将数组元素作为map的键存入，前端培训然后结合has()和set()方法判断键是否重复。

Map 对象：用于保存键值对，并且能够记住键的原始插入顺序。任何值（对象或者原始值）都可以作为一个键或一个值。

function removeDuplicate(arr) {

const map = new Map()

const newArr = []

arr.forEach(item => {

  if (!map.has(item)) { // has()用于判断map是否包为item的属性值

    map.set(item, true) // 使用set()将item设置到map中，并设置其属性值为true
  
    newArr.push(item)
  }
})

return newArr
}

const result = removeDuplicate(arr)

console.log(result) // [ 1, 2, 'abc', true, false, undefined, NaN ]

注意：使用Map()也可对NaN去重，原因是Map进行判断时认为NaN是与NaN相等的，剩下所有其它的值是根据 === 运算符的结果判断是否相等。

特点:创建一个空 Map 数据结构，遍历需要去重的数组，把数组的每一个元素作为 key 存到 Map 中。由于 Map 中不会出现相同的 key 值，所以最终得到的就是去重后的结果。NaN,{}没有去重

13.利用 sort()

function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return;
    }
    arr = arr.sort()
    var arrry= [arr[0]];
    for (var i = 1; i < arr.length; i++) {
        if (arr[i] !== arr[i-1]) {
            arrry.push(arr[i]);
        }
    }
    return arrry;
}
     var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
        console.log(unique(arr))
// [0, 1, 15, "NaN", NaN, NaN, {}, {}, "a", false, null, true, "true", undefined]

特点:利用 sort() 排序方法，然后根据排序后的结果进行遍历及相邻元素比对。NaN、{}没有去重。

14.麻烦透顶用它干嘛

8.此方法没有借助新数组直接改变原数组,并且去重后的数组被排序
var arr = [1,23,1,1,1,3,23,5,6,7,9,9,8,5];
    console.log(arr);    //[1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5]
    function noRepeat8(arr) {
        var end;//临时变量用于对比重复元素
        arr.sort();//将数重新组排序
        end = arr[0];
        for (var i = 1; i < arr.length; i++) {
            if (arr[i] == end) {//当前元素如果和临时元素相等则将此元素从数组中删除
                arr.splice(i,1);
                i--;
            }else{
                end = arr[i];
            }
        }
        return arr;
    }
    var arr2 = noRepeat8(arr);
    console.log(arr2);    //[1, 23, 3, 5, 6, 7, 8, 9]