【JS】数组去重的四种方法

1.ES6的Set方法

此方法需要考虑兼容性

let arr = [12, 20, 13, 13, 12, 5, 20]
let res = []
res = [...new Set(arr)]
// 或者
// res = Array.from(new Set(arr)) // [12, 20, 13, 5]

2.循环比较法

取出某一项，拿后一项与之对比

let arr = [12, 20, 13, 13, 12, 5, 20]
// 第一种：遇到重复的，就删除当前项,结果会改变原本的顺序,而且性能差，每次删掉后，后面剩余数据的index都要变化
for (let i = 0; i < arr.length - 1; i++) {
      let cur = arr[i] // 当前项
      let args = arr.slice(i +1) // 剩余的项
      const index = args.indexOf(cur)
      if (index !== -1) { // 说明有重复的
        // 删掉当前项,[13, 12, 5, 20]
        arr.splice(i, 1) // 删掉当前项
        i-- // 从新的当前项开始继续循环
      }      
    }
// 第二种：遇到重复的，就拿最后一项替代当前项，然后把最后一项删除掉，不需要每次都改变index，性能好一点
for (let i = 0; i < arr.length - 1; i++) {
      let cur = arr[i] // 当前项
      let args = arr.slice(i +1) // 剩余的项
      const index = args.indexOf(cur)
      if (index !== -1) { // 说明有重复的
        // 遇到重复的，拿最后一项来替换，结果 [5, 20, 12, 13]
        arr[i] = arr[arr.length - 1]
        i-- // 从当前项（原本的最后一项）开始继续比较
        arr.length-- // 去掉最后一项

        将重复项设置为null, 结果[null, null, null, 13, 12, 5, 20]，结合filter过滤null, [13, 12, 5, 20]
        arr[i] = null
      }      
    }
// 第三种：遇到重复的，就将当前项设置为null，结合filter将null过滤掉
for (let i = 0; i < arr.length - 1; i++) {
      let cur = arr[i] // 当前项
      let args = arr.slice(i +1) // 剩余的项
      const index = args.indexOf(cur)
      if (index !== -1) { // 说明有重复的
        // 将重复项设置为null, 结果[null, null, null, 13, 12, 5, 20]，结合filter过滤null
        arr[i] = null
      }
    }
res = arr.filter(val => val !== null) // [13, 12, 5, 20]
// 第四种：从后面开始循环，删掉重复项后不会改变前面元素的index，可以保证顺序不改变，[12, 20, 13, 5]
for (let i = arr.length-1; i >= 0; i--) {
      let cur = arr[i]
      let args = arr.slice(0, i)
      if (args.indexOf(cur) !== -1) { // 重复项
        arr.splice(i, 1)
      }
    }

3.对象法

利用对象键值不能重复的特性，此方法可以保证顺序不改变[12, 20, 13, 5]

let arr = [12, 20, 13, 13, 12, 5, 20]
let obj = {}
for (let i = 0; i < arr.length; i++) {
  let cur = arr[i]
  if (obj[cur] === undefined) { // 如果为undefined，表示前面没有与该项相同的
    obj[cur] = cur
  } else { // 如果有相同的，就把当前项删掉
    arr.splice(i, 1)
    i--
  }
}

4.正则法

// 先将数组按升序或者降序排列
arr.sort((a, b) => a - b) // 升序
// arr.sort((a, b) => b - a) // 降序
// 将数组转化为字符串
arr = arr.join('@') + '@'
// 定义正则表达式，找到数字后面带有@符号的，1*表示连续匹配0到n次、
const reg = /(\d+@)\1*/g
// 定义新数组用来存放结果
 let newArr = []
arr.replace(reg, (val, group1) => {
	console.log(val, group1)
    newArr.push(Number(group1.split('@')[0]))
    // 或者
    // newArr.push(Number(group1.slice(0, group1.length - 1)))
})

 res = newArr // [20, 13, 12, 5]