js 数组去重及性能对比

看了那么多博客,数组去重无非就 2 类:两层循环法 和 对象自身键不可重复。

let arr1 = Array.from(new Array(100000), (item, index) => {
     return index;
});
let arr2 = Array.from(new Array(50000), (item, index) => {
     return index + index;
});
let arr = arr1.concat(arr2);

以上面的arr为例,分别进行测试:

一、两层循环法
  1. 两层 for 循环
for (let i = 0; i < arr.length; i++) {
     for (let j = arr.length - 1; j > i; j--) {//倒数
           if (arr[i] === arr[j]) {
               arr.splice(j, 1);//splice 会改变数组的长度
          }
     }
}
两层for 循环
  1. for + indexOf
let result = []
for (var i = 0; i < arr.length; i++) {
     if (result .indexOf(arr[i]) === -1) {
         result .push(arr[i])
     }
}
for + indexOf
  1. for + includes
let result = []
for (var i = 0; i < arr.length; i++) {
     if (!result .includes(arr[i]) ) {
         result .push(arr[i])
     }
}

for + includes

for 的变体如filterfor...offorEachmap等和for没差太多,此处不一一例举。

  1. reduce
arr = arr.reduce((prev, cur) => (prev.includes(cur) ? prev : [...prev, cur]),[]);
reduce
二、对象自身键不可重复
  1. for + Object
let result = []
let obj = {}
for (var i = 0; i < arr.length; i++) {
      const arrValue = arr[i];
      if (!obj[arrValue]) {
          result.push(arrValue);
          obj[i] = 1;
      }
}
for...of + Object
  1. Set:2 种写法,性能差不多
arr= [...new Set(arr)] 
//或
arr= Array.from(new Set(arr)); 
Set
总结
  • 性能最优的是for + Object,其次是set 方法,推荐这两种。其他单层 for循环性能都差不多
  • reduce性能最差,慎用。双重for循环性能也较差,最好不用
参考文章

JS实现数组去重方法整理

推荐阅读更多精彩内容