js数组去重方法以及其效率总结

素颜马尾好姑娘i 2021-08-19 16:09 330阅读 0赞

# js数组去重方法以及其效率总结 #

主要是针对一些常用的数组去重方法以及这些方法需要消耗的时间的总结。

测试用的数组是百万级别的，下面是创建测试数组的方法：

let arr = [];
     
    for(let i = 0; i < 1000000;i ++) {
        arr.push(Math.floor(1000000* Math.random()))
    }
    使用console.time('test')和console.timeEnd('test')来测试时间(名称要相同)。
    
      console.time('test');
      console.log("方法名称")
      uniqueArray(arr);
      console.timeEnd('test');

##    一：通过数组的双重循环去重: ##

实现思路1：

测试时间为如下：

![70][]

实现思路2：

测试时间如下：

![70 1][]

总结：这种方法是我们刚开始学习编程语言最常用的方法，数据量小的时候看不出性能问题，但是数据量大就可以看出缺点了。

二：通过数组的filter()方法

实现思路：filter(）方法的过滤功能，indexOf()方法只返回第一次出现的索引

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

测试时间如下：

![70 2][]

三：通过数组方法forEach + indexOf

实现思路：

测试时间：

![70 3][]

四：通过数组sort()方法

实现思路1：

测试时间：

![70 4][]

实现思路2：

测试时间：

![70 5][]

五：通过数组的includes()方法

实现思路：

function uniqueArray(arr) {
      const newArr = [];
      arr.forEach(item => {
        if (!newArr.includes(item)) {
          newArr.push(item)
        }
      })
      return newArr;
    }

测试时间：

![70 6][]

六：通过数组的reduce()方法

实现思路：

function uniqueArray(arr) {
      return arr.sort().reduce((prev, cur) => {
        if (prev.length === 0 || prev[prev.length - 1] !== prev) {
          prev.push(cur)
        }
        return prev
      }, [])
    }

测试时间：

![70 7][]

七：使用ES6的Map

实现思路：

测试时间：

![70 8][]

八：使用ES6的Set

实现思路：

function uniqueArray(arr) {
      return Array.from(new Set(arr))
    }

测试时间：

![70 9][]

**总结：使用ES6的Set和Map效率最高，reduce()和sort()效率还可以，双层循环效率最低。**  
————————————————  
版权声明：本文为CSDN博主「xinyiyukenan」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。  
原文链接：https://blog.csdn.net/xinyiyukenan/article/details/81197612

[70]: /images/20210724/32760b3b1fad42649ba982dcc5ad2363.png
[70 1]: /images/20210724/9fa6cb5b951644069e35788afee61a64.png
[70 2]: /images/20210724/e3d204c8d186403784175a8a60e17713.png
[70 3]: /images/20210724/7cde53fd5cfb4d389bb37ad0130dd5ed.png
[70 4]: /images/20210724/79472ac58703447d861cd8ea93242e3f.png
[70 5]: /images/20210724/cea1fbe8176f44cb82b5d2dfbf45ab8a.png
[70 6]: /images/20210724/a3d19b14d72e4249a18bccb54ee8f102.png
[70 7]: /images/20210724/935ed21390b34db5aab93aa37b09adad.png
[70 8]: /images/20210724/a2d12b0fbe244dc782cf43d4afca32bf.png
[70 9]: /images/20210724/54cc16eda9f844ed86cc72086bb02e2f.png