数组去重的方法

1.利用includes方法

创建一个新的空数组，遍历原数组，如果新数组中没有这个元素，则添加到新数组中，最终返回的这个新数组就是去重后的数组。

const arr = [1, 2, 2, 'abc', 'abc', true, true, false, false, undefined, undefined, NaN, NaN]

const newArr = arr.reduce((pre, cur) => {
  // 数组中没有这个元素则放到新数组中
  if (!pre.includes(cur)) pre.push(cur)
  return pre
}, [])

console.log(newArr);
// [1, 2, 'abc', true, false, undefined, NaN]

2.利用indexOf方法

遍历原数组，使用indexOf方法获取当前元素第一次出现在数组中的索引，如果索引和当前索引相等，说明元素是第一次出现，则添加到新数组中。

const arr = [1, 2, 2, 'abc', 'abc', true, true, false, false, undefined, undefined, NaN, NaN]

const newArr = arr.filter((item, i) => {
  // 元素第一次出现的索引值等于当前元素索引才返回
  return arr.indexOf(item) === i
})

console.log(newArr);
// [1, 2, 'abc', true, false, undefined]

不过使用indexOf方法有个弊端，看上面的输出结果，发现不能对“NaN”去重。使用时慎用！

const arr = [1,NaN]
console.log(arr.indexOf(1));
// 0
console.log(arr.indexOf(NaN));
// -1

3.利用Set()

Set是值的集合，里面的值不会重复。扩展运算符用于将集合中的元素展开，再放到数组中，通俗来说就是将集合转换为数组，也可以使用Array.from方法进行转换。

const arr = [1, 2, 2, 'abc', 'abc', true, true, false, false, undefined, undefined, NaN, NaN]

const newArr = [...new Set(arr)]
// const newArr = Array.from(new Set(arr))

console.log(newArr);
// [1, 2, 'abc', true, false, undefined, NaN]

4.利用Map()

Map的结构为”键值对“，遍历数组，通过has方法，判断Map集合中是否含有当前元素，如果有，则用set方法放到集合的键中。最后只需取出Map中的所有的键

const arr = [1, 2, 2, 'abc', 'abc', true, true, false, false, undefined, undefined, NaN, NaN]

const newArr = arr.reduce((pre, cur) => {
  if (!pre.has(cur)) pre.set(cur)
  return pre
}, new Map())
const result = Array.from(newArr).map(item=>item[0])

console.log(result);
// [1, 2, 'abc', true, false, undefined, NaN]

5.利用对象

对象的键名是不能重复的，我们可以利用这一点，进行数组去重

const arr = [1, 2, 2, 'abc', 'abc', true, true, false, false, undefined, undefined, NaN, NaN]

const obj = {}
const newArr = arr.reduce((pre,item)=>{
  if(!obj[item]){
    obj[item] = true
    pre.push(item)
  }
  return pre
},[])

console.log(newArr);
// [1, 2, 'abc', true, false, undefined, NaN]