数组去重（保姆级代码解析，多种方法，由最原始的双循环到简化，一行一行代码解析）

前端工具代码详解（有防抖、节流等等常用工具解读）

第三章 数组去重的详细解读（一行一行分析代码带你深入了解数组去重）

---

序言

所有的详细解析，都在代码的注释中，大家可以复制到自己的编辑器中，一步一步的去观看，希望对大家有所帮助

一、数组去重一 （原始方法 双循环（建议细读，有助于代码逻辑提升））

详细观看注解，一行一行带你解读，包你理解！(有问题留言，我会回复)

let arr = [1, 2, 2, 3, 4, 4]
function deduplication(arrList) {
  let uniqueArr = []
  for (let i = 0; i < arrList.length; i++) {
    for (let j = 0; j < uniqueArr.length; j++) {
      // 判断 arrList，也就是我们传进来的数组 是否存在于我们新建的这个唯一数组中
      // 如果存在了，就停止循环，因为有了，所以就不保存在这个新的数组里面
      // 因为我们这个新的数组是去重过的嘛，里面的数据都是唯一的
      if (arrList[i] === uniqueArr[j]) {
        break
      }
      /*  有小伙伴会好奇为什么 j === uniqueArr.length 的时候保存这个数据
          因为你想想看，如果我们把 arrList[i] 这个数据一直和 uniqueArr里面
          每一个数据进行比较，如果这个数据不存在于uniqueArr里面，那么最后j会
          等于多少呢。
          这里我们进行一个假设，假设 uniqueArr = [1,2]  arrList[i] = 3
          那么 第一次循环 j = 0, uniqueArr[j] = 1
               第二次循环 j = 1, uniqueArr[j] = 2  
               第三次次循环 j = 2, uniqueArr[j] = 1  j = 2 不小于  uniqueArr.length，此时跳出循环
          但是 j = uniqueArr.length ，是不是很巧妙，所以就可以添加进去，只要是唯一的值都可以被添加
          到uniqueArr
          但是假设 arrList[i] = 2
          那么在第二次循环  第二次循环 j = 1, uniqueArr[j] = 2  
          会触发 arrList[i] === uniqueArr[j] 此时循环终止 j === uniqueArr.length 等于false 不会被添加
          开启 下一次 外层循环
      */
      if (j === uniqueArr.length) {
        uniqueArr.push(arrList[i])
      }
    }
  }
  return uniqueArr
}

二、优化内层循环采用 indexOf

代码如下：

let arr = [1, 2, 2, 3, 4, 4]
function deduplication2(array) {
  let uniqueArr = []
  for (let i = 0; i < array.length; i++) {
    let current = array[i]
    // uniqueArr.indexOf(current) === -1 代表当前 array[i] 在 uniqueArr 没有一模一样的值
    // 这样子是不是一下子简化了很多
    if (uniqueArr.indexOf(current) === -1) {
      uniqueArr.push(current)
    }
  }
  return uniqueArr
}

三.优化外层循环采用 filter

代码如下

function deduplication3(array) {
  // item 是 array 中的每个元素
  // index 是 item 这个元素 在 array 中 当前的下标位置
  // array 是当前数组
  // filter 是 过滤函数，如果 return 返回的是 false 当前元素会被去除
  // array.indexOf(item) 是返回当前元素 出现在 array 中 第一次出现的下标位置
  // 假设 array = [1,1]
  // 那么 第一次循环 array.indexOf(item) = 0 等于  index = 0
  // 第二次 array.indexOf(item) = 0 不等于 index = 1 ，就会被过滤
  // 所以就会成功
  let uniqueArr = array.filter((item, index, array) => {
    return array.indexOf(item) === index
  })
  return uniqueArr
}

四.简化 采用（ES6 中的 Set Map）

代码如下

// Set
function deduplicationSet4(array) {
  return Array.from(new Set(array))
}
// 简化
// function deduplication4(array) {
//   return [...new Set(array)];
// }
// 最终简化 let deduplication4 = (a) => [...new Set(a)]\
// Map
function deduplicationMap4(array) {
  const seen = new Map()
  return array.filter((a) => !seen.has(a) && seen.set(a, 1))
}

---

总结

以上就是一些比较常用的数组去重的方法，当然这些都是简单的类型对象，如果数组中存储的是对象，就需要一些进阶的方式来进行去重，我也会在后续的进阶文章中写到，感谢大家观看，希望大家找到好的工作，也希望本文对大家有所帮助