面试官在“逗”你系列：数组去重你会几种呀？

前言

数组去重是一个老生常谈的话题，也是前端童鞋在面试时的一道高频题。本文将深刻的探索数组去重的原理及实现，为各位小伙伴提供多种能够反手“调戏”面试官的解决方案。

话很少说，上去就来一梭子...

数组去重核心原理

价值100W的核心原理上来就给你了...，记得留言点赞鸭！

1. 通常咱们都会建立临时变量tmp，存储不重复的元素（以数组元素存储或对象的键来存储）；
2. 遍历待去重数组arr，依次判断tmp中是否包含该元素；
3. 若tmp中不存在该元素，则放入；不然跳过不处理。

基本上不管什么样的实现，其核心皆是如此（判断是否已存在）。不行你就留言，我们能够battle一下

经典去重方案一：

设置tmp为对象，对象的键存储数组元素的值，最终返回对象的全部键。

function array_unique (arr) {
  if (arr.length === 0) {
    return arr
  }
  let tmp = {}
  let len = arr.length
  for (let i = 0; i < len; i++) {
    if (tmp[arr[i]] === undefined) {
      tmp[arr[i]] = i
    }
  }
  return Object.keys(tmp)
}

// 调用数组去重
let arr = [1, 2, 3, 1, 2]
let newArr = array_unique(arr)
console.log(newArr) // ['1', '2', '3']
复制代码

若是你采用这种方式来回答面试官的话，你就陷入了他在心里中早早设下的陷阱：

1. 你这种方式能区分数字和字符串吗？能区分undefined和'undefined'吗？

2. 你如今返回的数据类型还和原有的数据类型一致吗？

带着面试官的疑问，咱们来看另一种经典去重方式。

经典去重方式二：

设置tmp为数组，数组中存储惟一的元素，最终返回tmp

function array_unique (arr) {
  let len = arr.length
  if (!len) {
    return []
  }
  let tmp = []
  for (let i = 0; i < len; i++) {
    // 判断数组arr的元素是否在数组tmp中
    if (tmp.indexOf(arr[i]) === -1) {
      tmp.push(arr[i])
    }
  }
  return tmp
}
let arr = [1, 2, 3, '1', 2, undefined, undefined, 'undefined']
let newArr = array_unique(arr)
console.log(newArr) // [1, 2, 3, '1', undefined, 'undefined']
复制代码

此刻，心里是否窃喜！

But, 若是你这么考虑，又陷入了面试官的另外一个陷阱：

1. 你这方式能筛选NaN吗？

好吧，面试官最大，再考虑！

数组去重方式三：

原理仍是同去重方式二，只不过咱们使用ES6的includes替换indexOf方法，

includes() 方法，判断数组中是否包含某个元素，若是包含返回true，不然返回false

就是这么so easy!

function array_unique (arr) {
  let len = arr.length
  if (!len) {
    return []
  }
  let tmp = []
  for (let i = 0; i < len; i++) {
    // 判断数组arr的元素是否在数组tmp中
    if (!tmp.includes(arr[i]) {
      tmp.push(arr[i])
    }
  }
  return tmp
}
let arr = [1, 2, 3, '1', 2, undefined, undefined,  'undefined', NaN, NaN]
let newArr = array_unique(arr)
console.log(newArr) // [1, 2, 3, '1', undefined, 'undefined', NaN]
复制代码

此刻，你觉得就结束吗？不，不可能！

面试官的坑已经在前面等你好久了：

1. 你的这个筛选方式能区分对象吗？如{}、{a: 1}

有没有想把本身的四十米大砍刀拿出来，neng屎面试官！（图就不配了，本身脑补吧...） 然而，什么都作不了，继续想吧...

数组去重方式四：

原理同上，咱们要继续换一个判断数组是否包含某元素的方法：```findIndex``

findIndex查询数组是否包含某元素，若是存在返回元素的索引，不然返回-1。它比indexOf更加先进的地方在于能传入callback，按约定方式查询。

function array_unique (arr) {
  let len = arr.length
  if (!len) {
    return []
  }
  let tmp = []
  for (let i = 0; i < len; i++) {
    // 判断数组arr的元素是否在数组tmp中
    if (tmp.findIndex((v) => JSON.stringify(v) === JSON.stringify(arr[i])) === -1) {
      tmp.push(arr[i])
    }
  }
  return tmp
}
let arr = [1, 2, 3, '1', 2, undefined, undefined,  'undefined', NaN, NaN, {}, {}, {a: 1}, {a: 1}]
let newArr = array_unique(arr)
console.log(newArr) // [1, 2, 3, '1', undefined, 'undefined', NaN, {}, {a: 1}]
复制代码

终于成功啦！来来来，能够潇洒的问面试官，“您还有问题没有？”

固然，主动挑衅面试官，是要承担风险呦，有可能会由于你眨眼的时候，先眨了右眼被挂掉了...

判断数组是否包含某元素的几种方式：

给你们列个表格，好区分几个方法的做用，

方法\是否可检测	null	undefined	NaN	{}	备注
indexOf	是	是	否	否	无
includes	是	是	是	否	无
findIndex	是	是	是	是	需传入特定的callback

小结

数组去重这道面试题，考察的知识点仍是很是多的。首先是对数组的经常使用方法要比较熟悉，还有其余的如NaN与NaN不相等，{}与{}不相等等知识点，以及灵活多变的思惟逻辑。

固然，数组去重还有其余的多种实现方式，欢迎各位小伙伴留言交流！

后记

以上就是胡哥今天给你们分享的内容，喜欢的小伙伴记得点赞、收藏呀，关注胡哥有话说，学习前端不迷路，欢迎多多留言交流...

胡哥有话说，一个有技术，有情怀的胡哥！现任京东前端攻城狮一枚。

胡哥有话说，专一于大前端技术领域，分享前端系统架构，框架实现原理，最新最高效的技术实践！