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：

function uniqueArray(arr) {
  const newArr = [];
  let isRepeat;
  for (let i = 0; i < arr.length; i++) {
    isRepeat = false;
    for (let j = 0; j < newArr.length; j++) {
      if (newArr[j] === arr[i]) {
        isRepeat = true;
        break;
      }
    }
    if (!isRepeat) {
      newArr.push(arr[i])
    }
  }
  return newArr;
}

 测试时间为如下：

 

实现思路2： 

function uniqueArr(arr) {
  const newArr = [];
  let isRepeat;
  for (let i = 0; i < arr.length; i++) {
    isRepeat = false;
    for (let j = i + 1; j < arr.length; j++) {
      if (arr[i] === arr[j]) {
        isRepeat = true;
        break;
      }
    }
    if (!isRepeat) {
      newArr.push(arr[i])
    }
  }
  return newArr;
}

测试时间如下：

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

---

 

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

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

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

测试时间如下：

 

---

三：通过数组方法forEach + indexOf

实现思路：

function uniqueArr(arr) {
  const newArr = [];
  arr.forEach(item => {
    if (newArr.indexOf(item) === -1) {
      newArr.push(item)
    }
  });
  return newArr;
}

测试时间：

---

四：通过数组sort()方法

实现思路1：

function uniqueArray(arr) {
  const newArr = [];
  arr.sort();
  for (let i = 0; i < arr.length; i++) {
    if (arr[i] !==arr[i+1]) {
      newArr.push(arr[i])
    }
  }
  return newArr;
}

测试时间：

 

实现思路2：

function uniqueArray(arr) {
  const newArr = [];
  arr.sort()
  for (let i = 0; i < arr.length; i++) {
    if (arr[i] !== newArray[newArr.length-1]) {
      newArr.push(arr[i])
    }
  }
  return newArr;
}

测试时间：

 

---

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

实现思路：

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

测试时间：

 

---

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

实现思路： 

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

测试时间：

 

---

七：使用ES6的Map

实现思路：

function uniqueArray(arr) {
  const newArr = [];
  const tmp = new Map();
  for (let i = 0; i < arr.length; i++) {
    if (!tmp.get(arr[i])) {
      tmp.set(arr[i], 1);
      newArr.push(arr[i])
    }
  }
  return newArr;
}

测试时间：

 

---

 

八：使用ES6的Set

实现思路： 

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

测试时间：

 

 

总结：使用ES6的Set和Map效率最高，reduce()和sort()效率还可以，双层循环效率最低。