JavaScript（三）数组去重总结

数组去重总结

生成 [0,10000] 之间随机数组

var arr = [];
for(i = 0; i < 10000; i++){
  arr.push(0 + Math.floor((10000 - 0 + 1) * Math.random()))
}
console.log(arr);

执行结果

1. 最原始方法

• 兼容性好

console.log('1. 最原始方法--------------');
function t1(arr){
  var res = [];
  for(var i = 0; i < arr.length; i++){
    for(var j = 0; j < res.length; j++){
      if(arr[i] === res[j]){
        break;
      }
    }
    // 如果array[i]是唯一的，那么执行完循环，j等于res.length
    if(j === res.length){
      res.push(arr[i]);
    }
  }
  return res;
}
console.time('t1');
console.log(t1(arr));
console.timeEnd('t1');

2. indexOf 简化内层循环

console.log('2. 用 indexOf 简化内层循环-------------');
function t2(arr){
  var res = [];
  for(var i = 0; i < arr.length; i++){
    if(res.indexOf(arr[i]) === -1){
      res.push(arr[i]);
    } 
  }
  return res;
}
console.time('t2');
console.log(t2(arr));
console.timeEnd('t2');

3. 排序后去重

• 相同的值会被排在一起，然后我们就可以只判断当前元素与上一个元素是否相同，相同就说明重复，不相同就添加进 res。

console.log('3. 排序后去重--------------------');
function t3(arr){
  var res = [];
  var sortedArr = arr.concat().sort();
  var seen;
  for(var i = 0; i < arr.length; i++){
    // 是第一个元素 或 相邻元素不同
    if(!i || seen !== sortedArr[i]){
      res.push(sortedArr[i]);
    }
    seen = sortedArr[i];
  }
  return res;
}
console.time('t3');
console.log(t3(arr));
console.timeEnd('t3');

4. unique API

• unique 工具函数，我们根据一个参数 isSorted 判断传入的数组是否是已排序的，如果为 true，我们就判断相邻元素是否相同，如果为 false，我们就使用 indexOf 进行判断

console.log('4. unique -------------------');
function unique(arr,isSorted){
  var res = [];
  var seen = [];
  for(var i = 0; i < arr.length; i++){
    if(isSorted){
      if(!i || seen !== arr[i]){
        res.push(arr[i]);
      }
      seen = arr[i];
    }
    else if(res.indexOf(arr[i]) === -1){
      res.push(arr[i]);
    }
  }
  return res;
}
console.time('unique');
console.log(unique(arr));
console.timeEnd('unique');

5. filter

• 简化外层循环

console.log('5. filter--------------------------');
function t5(arr){
  var res = arr.filter(function(item,index,self){
    return self.indexOf(item) === index;
  })
  return res;
}
console.time('t5');
console.log(t5(arr));
console.timeEnd('t5');

6. 排序后 filter

console.log('6. 排序后 filter -----------------');
function t6(arr){
   return arr.concat().sort().filter(function(item,index,self){
      return !index || item !== self[index-1]
   })
}
console.time('t6');
console.log(t5(arr));
console.timeEnd('t6');

7. ES6

• ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。

console.log('7. set ----------------------');
function set1(arr){
  return arr.from(new Set(arr));
}
function set2(arr){
  return [...new Set(arr)];
}
var set3 = arr => [...new Set(arr)];
console.time('set3');
console.log(set3(arr));
console.timeEnd('set3');

console.log('8. map ------------------------');
function testMap(arr){
	const seen = new Map();
    return arr.filter((a) => !seen.has(a) && seen.set(a,1));
}
console.time('testMap');
console.log(testMap(arr));
console.timeEnd('testMap');

参考资料

冴羽----JavaScript专题之数组去重