JS实现数组去重的11种方法总结

在JavaScript中，数组去重是经常会遇到的问题。本篇文章总结了11种常用的数组去重方法，包括传统的for循环遍历、使用ES6 Set、使用对象属性、使用Array.filter()高阶函数等方法。下面将逐一介绍这些方法。

1. 使用for循环遍历

这是最简单的一种方法，也是最经典的一种方法。遍历数组中的每个元素，将其与数组中前面的每个元素进行比较，如果已经出现过，则删除当前元素。具体实现如下：

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

示例说明：

let arr = [1,2,3,4,3,2,1];
console.log(unique(arr)); // [1,2,3,4]

2. 使用ES6 Set

ES6中的Set是一种值的集合，其中不允许出现重复的元素。可以借助这一特性来实现数组去重。将数组转换为Set，并再次转换回数组即可。具体实现如下：

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

示例说明：

let arr = [1,2,3,4,3,2,1];
console.log(unique(arr)); // [1,2,3,4]

3. 使用对象属性

创建一个空对象，遍历数组中的每个元素，判断该对象是否已经存在当前元素的属性，如果不存在则新增该属性。最后再将对象转换为数组即可。具体实现如下：

function unique(arr) {
  const obj = {};
  arr.forEach(item => {
    obj[item] = true;
  })
  return Object.keys(obj);
}

示例说明：

let arr = [1,2,3,4,3,2,1];
console.log(unique(arr)); // ["1", "2", "3", "4"]

4. 使用Array.indexOf()

这是一个比较老的方法，利用Array.indexOf()方法判断当前元素是否在数组中出现过，如果出现过则不再将当前元素加入新数组。具体实现如下：

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

示例说明：

let arr = [1,2,3,4,3,2,1];
console.log(unique(arr)); // [1,2,3,4]

5. 使用Array.includes()

使用Array.includes()方法来判断当前元素是否在数组中出现过，如果出现过则不再将当前元素加入新数组。具体实现如下：

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

示例说明：

let arr = [1,2,3,4,3,2,1];
console.log(unique(arr)); // [1,2,3,4]

6. 使用Array.filter()

使用Array.filter()方法来过滤出数组中不重复的元素即可。具体实现如下：

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

示例说明：

let arr = [1,2,3,4,3,2,1];
console.log(unique(arr)); // [1,2,3,4]

7. 使用Array.reduce()

使用Array.reduce()方法遍历数组，将每个元素添加到新数组中，如果已经出现过，则不添加。具体实现如下：

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

示例说明：

let arr = [1,2,3,4,3,2,1];
console.log(unique(arr)); // [1,2,3,4]

8. 使用Map

利用Map数据结构的键是唯一的特性来进行去重。具体实现如下：

function unique(arr) {
  let map = new Map();
  let res = [];
  for(let i = 0; i < arr.length; i++) {
    if(!map.has(arr[i])) {
      map.set(arr[i], true);
      res.push(arr[i])
    }
  }
  return res;
}

示例说明：

let arr = [1,2,3,4,3,2,1];
console.log(unique(arr)); // [1,2,3,4]

9. 使用Object.keys()和Object.values()

先使用Object.values()方法获取数组中的不重复的元素，再使用Object.keys()方法将其转换为数组即可。具体实现如下：

function unique(arr) {
  return Object.keys(Object.fromEntries(new Map(arr.map(item => [item, true]))))
}

示例说明：

let arr = [1,2,3,4,3,2,1];
console.log(unique(arr)); // ["1", "2", "3", "4"]

10. 使用ES6的Map和数组解构

使用ES6的Map数据结构，以及数组解构赋值的方法进行去重。具体实现如下：

function unique(arr) {
  const map = new Map();
  arr.forEach(item => {
    map.set(item, true);
  })
  return [...map.keys()];
}

示例说明：

let arr = [1,2,3,4,3,2,1];
console.log(unique(arr)); // [1,2,3,4]

11. 使用ES6的Array.from()和Set

使用ES6的Array.from()和Set方法进行去重即可。具体实现如下：

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

示例说明：

let arr = [1,2,3,4,3,2,1];
console.log(unique(arr)); // [1,2,3,4]

总结：

通过本篇文章的介绍，可以看到我们可以使用各种方法进行数组去重，这里提供了11种常用的方法，选择哪一种方法要根据实际情况而定，比如数组大小、元素类型、浏览器兼容性等因素都需要考虑。