JS 数组去重的8种方法

1 Array.from(new Set(arr))

let arr1 = [1,1,3,4,5,5,4,2,3,1,1,1]
console.log(Array.from(new Set(arr1))) // 打印结果是[1, 3, 4, 5, 2]

利用...可以简化代码

let arr8 = [1,1,3,4,5,5,4,2,3,1,1,1]
console.log([...new Set(arr8)]) // 打印结果是[1, 3, 4, 5, 2]

2 暴力切除：for循环 + arr.splice(index,length)

let arr2 = [1,1,3,4,5,5,4,2,3,1,1,1]
for(let i=0;i<arr2.length;i++){
  for(let j=arr2.length;j>i;j--){
    if(arr2[i]==arr2[j]){
      arr2.splice(j,1)
    }
  }
}
console.log(arr2) // 打印结果是[1, 3, 4, 5, 2]

3 indexOf定位 + arr.push(num)压入新元素

let arr3 = [1,1,3,4,5,5,4,2,3,1,1,1], res3=[]
for(let i=0; i<arr3.length; i++){
  // 第4种方法: 判断语句可以换成 !res5.includes(arr5[i])
  if(res3.indexOf(arr3[i])==-1){
    res3.push(arr3[i])
  }
}
console.log(res3) // 打印结果是[1, 3, 4, 5, 2]

5 arr.sort()排序后，按顺序去重

let arr5 = [1,1,3,4,5,5,4,2,3,1,1,1], res5=[arr5[0]]
arr5.sort()
for(let i=1; i<arr5.length; i++){
  if(arr5[i] != arr5[i-1]){
    res5.push(arr5[i])
  }
}
console.log(res5) // 打印结果是[1, 2, 3, 4, 5]

6 filter((curVal,curIndex,arr)=>{…})

let arr6 = [1,1,3,4,5,5,4,2,3,1,1,1]
console.log(arr6.filter((cur, index, arr)=>{
  return arr6.indexOf(cur) === index
}))  // 打印结果是[1, 3, 4, 5, 2]

7 arr.reduce((total, curVal, curIndex, arr)=>{…})

let arr7 = [1,1,3,4,5,5,4,2,3,1,1,1]
console.log(arr7.reduce((res7, curVal)=>
  res7.includes(curVal)? res7:[...res7, curVal],[]
)) // 打印结果是[1, 3, 4, 5, 2]

第三行代码的解析如下：
,是等级十分低的运行符号（比=还低），因此第3行代码切分为两句代码：

1. res7.includes(curVal)? res7:[...res7, curVal]

2. []

主要运行的是第1行代码，...的解释。

但若没有第2行代码，会报错res7.includes is not a function，因为最开始的res7并没有初始化，值是undefined。

【待解决】不太理解的地方

问题1：如果箭头函数外部加上{}会报错
问题2：[]如果用于初始化，那为什么后面res7的值不是[]

JS ...的用法

对于数组：将数组表达式或者string在语法层面展开；

对于对象：将对象表达式按key-value的方式展开;

PS: 常用于数组、对象的拼接

let arr = [1,2,34,5]
console.log(...arr, [...arr], {...arr})

let obj1 = {'a': 123, 'b': 'abc'}
let obj2 = {'a': "123", 'c': [1,2]}
console.log({...obj1},{...obj1,...obj2},{...obj2,...obj1})