前端开发数组去重方法

使用原生 JavaScript 方法

1. filter() 方法配合 indexOf()

const uniqueArray = array.filter((item, index, self) => {
  return self.indexOf(item) === index;
});

该方法利用 filter() 遍历数组，对于每个元素，通过 indexOf() 查找其在原数组中的第一个索引。如果当前元素的索引与正在遍历的索引相同，说明这是该元素在数组中的首次出现，保留该元素；否则，忽略该元素。

2. reduce() 方法

const uniqueArray = array.reduce((acc, current) => {
  return acc.includes(current) ? acc : [...acc, current];
}, []);

这里使用 reduce() 函数将数组累积到一个新的数组（acc）中。在每次迭代中，检查当前元素是否已存在于累积数组中。若不存在，则将其添加至累积数组；否则，跳过该元素。

3. 利用对象存储的方法

const arr = [9, 2, 9, '123', '123', true, NaN, true, false, false, undefined, undefined, NaN, {}, {}]

function removeDuplicate(arr) {
    const newArr = []
    const obj = {}
 
    arr.forEach(item => {
        if (!obj[item]) {
            newArr.push(item)
            obj[item] = true
        }
    })
 
    return newArr
}
 
const result = removeDuplicate(arr)
console.log(result) //  [9, 2, '123', true, NaN, false, undefined]

注意：可以对 NaN 和 {} 去重

利用 ES6 新特性

1. new Set() + Array.from

const arr = [9, 2, 9, '123', '123', true, NaN, true, false, false, undefined, undefined, NaN, {}, {}]
const newArr = Array.from(new Set(arr))
console.log(newArr)   //  [9, 2, '123', true, NaN, false, undefined, {…}, {…}]

Set对象：是值的集合，你可以按照插入的顺序迭代它的元素。 Set中的元素只会出现一次，即Set中的元素是唯一的。Set本身是一个构造函数，用来生成 Set 数据结构。类似于数组，不是真正的数组，不能使用 length 方法
Array.from() 方法：对一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。
注意：以上去方式对NaN和undefined类型去重也是有效的，是因为NaN和undefined都可以被存储在Set中， NaN之间被视为相同的值（尽管在js中：NaN !== NaN）
对 {} 无效

2. 扩展运算符

const uniqueArray = [...new Set(array)];

这种方法简洁高效，利用 ES6 的 Set 数据结构自动去除重复元素的特性，再通过扩展运算符将 Set 转换回数组。Set 是一种特殊的集合，不允许重复元素存在，因此插入过程会自动过滤重复项。

3. 利用Map()

const arr = [9, 2, 9, '123', '123', true, NaN, true, false, false, undefined, undefined, NaN, {}, {}]

function getDisArray4(arr) {
    const map = new Map()
    const newArr = []
 
    arr.forEach(item => {
        if (!map.has(item)) { // has()用于判断map是否包为item的属性值
            map.set(item, true) // 使用set()将item设置到map中，并设置其属性值为true
            newArr.push(item)
        }
    })
 
    return newArr
}
 
getDisArray4(arr)   // [9, 2, '123', true, NaN, false, undefined, {…}, {…}]

注意：使用Map()也可对NaN去重，原因是Map进行判断时认为NaN是与NaN相等的，剩下所有其它的值是根据 === 运算符的结果判断是否相等；对 {} 不能检测