前言
数组去重是一个老生常谈的话题，也是前端童鞋在面试时的一道高频题。本文将深入的探索数组去重的原理及实现，为各位小伙伴提供多种可以反手“调戏”面试官的解决方案。
话不多说，上去就来一梭子...
数组去重核心原理
价值100W的核心原理上来就给你了...，记得留言点赞鸭！
- 一般我们都会创建临时变量tmp，存储不重复的元素（以数组元素存储或对象的键来存储）；
- 遍历待去重数组arr，依次判断tmp中是否包含该元素；
- 若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']
如果你采用这种方式来回答面试官的话，你就陷入了他在内心中早早设下的陷阱：
- 你这种方式能区分数字和字符串吗？能区分
undefined和'undefined'吗？- 你现在返回的数据类型还和原有的数据类型一致吗？
带着面试官的疑问，我们来看另外一种经典去重方式。
经典去重方式二：
设置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, 如果你这么考虑，又陷入了面试官的另一个陷阱：
- 你这方式能筛选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]
此刻，你以为就结束吗？不，不可能！
面试官的坑已经在前面等你很久了：
- 你的这个筛选方式能区分对象吗？如{}、{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不相等，{}与{}不相等等知识点，以及灵活多变的思维逻辑。
当然，数组去重还有其他的多种实现方式，欢迎各位小伙伴留言交流！
