JS篇-数组去重的十种方法

本文记录了自己在平时常用的，和在一些博客中提到的供给十种数组去重的方法，供大家参考指正。

数组的去重方法，无论是在实际项目还是在面试中都会有用到，下面我们来看下常见的十种：

1. 使用 for 循环和 includes
2. 使用 Set 和 Array.from()
3. 使用 for 循环和 indexOf
4. for 循环嵌套循环，结合 splice
5. 使用 sort 和 reduce 方法
6. 使用 filter 和 indexOf
7. 使用 forEach 循环和 includes
8. 使用扩展运算符和 set
9. 使用 reduce 和 includes
10. 如果是数组对象，可以使用 forEach 和 includes 的方法

使用 for 循环和 includes

function unique(arr) {
    let newArr = []
    for (let i = 0; i < arr.length; i++) {
        if (!newArr.includes(arr[i])) {
            newArr.push(arr[i])
        }
    }
    return newArr;
}

// 测试
const arr = [2,3,4,5,6,2,3]
unique(arr); // -> [2, 3, 4, 5, 6]

使用 Set 和 Array.from()

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

// 测试
const arr = [2,3,4,5,6,2,3]
unique(arr); // -> [2, 3, 4, 5, 6]

使用 for 循环和 indexOf

function unique(arr) {
  let newArr = []
  for (let i = 0; i < arr.length; i++) {
    if (newArr.indexOf(arr[i]) === -1) {
      newArr.push(arr[i])
    }
  }
  return newArr;
}

// 测试
const arr = [2,3,4,5,6,2,3]
unique(arr); // -> [2, 3, 4, 5, 6]

for 循环嵌套 for 循环，结合 splice

function unique(arr) {
  for (let i = 0; i < arr.length; i++) {    
    for (let j = i + 1; j < arr.length; j++) {
      if (arr[i] == arr[j]) {
        arr.splice(j, 1);
        j--;
      }
    }
  }
  return arr;
}

// 测试
const arr = [2,3,4,5,6,2,3]
unique(arr); // -> [2, 3, 4, 5, 6]

不过该方法修改了原数组

使用 sort 和 reduce 方法

function unique(arr) {
  let newArr = [arr[0]];
  arr.sort().reduce((prev, next) => {
    if (prev !== next) {
      newArr.push(next)
    }
    return next
  })
  return newArr;
}

// 测试
const arr = [2,3,4,5,6,2,3]
unique(arr); // -> [2, 3, 4, 5, 6]

也会修改原数组，不过只是排序而已

使用 forEach 循环和 Map

function unique(arr) {
  let map = new Map()
  let array = []
  arr.forEach((item) => {
    if (!map.has(item)) {
      map.set(item, true);
      array.push(item);
    }
  });
  return array;
}

使用 reduce 和 includes

function unique(arr) {
  return arr.reduce((newArr, next) => {
    if (!newArr.includes(next)) {
      newArr.push(next);
    }
    return newArr;
  }, []);
}

使用扩展运算符和 Set

function unique(arr) {
  return [...new Set(arr)];
}

如果是数组对象的数据格式，可以使用 forEach 和 includes 的方法

function uniqueArrayObj(arr, key) {
  let newArr = [arr[0]];
  arr.forEach((item) => {
    newArr.filter((newitem) => {
      if (item[key] !== newitem[key]) {
        newArr.push(item);
      }
    });
  });
  return newArr;
}

总结

当然，还有一些其他方法，但是这里就不多做赘述了。其实这些方法总结一下，它们的去重思想都大同小异，比如说：

1、3、5、6、7、8、10 的解题思路都是新生成一个数组，然后判断新数组是否包含当前值，若没有包含，则把这个值 push 进去，反之则不用 push，最后把新数组返回去。那按照这个思路，我们可以调用的 API 方法就有很多了（如上）。

那剩下的 2、4、9 这三个相对来说是借助了 ES6 里的一些新特性来做的，更加的方便快捷。