面試官在“逗”你系列：數(shù)組去重你會幾種呀？

前言

數(shù)組去重是一個老生常談的話題，也是前端童鞋在面試時的一道高頻題。本文將深入的探索數(shù)組去重的原理及實(shí)現(xiàn)，為各位小伙伴提供多種可以反手“調(diào)戲”面試官的解決方案。

話不多說，上去就來一梭子...

數(shù)組去重核心原理

價值100W的核心原理上來就給你了...，記得留言點(diǎn)贊鴨！

* 一般我們都會創(chuàng)建臨時變量tmp，存儲不重復(fù)的元素（以數(shù)組元素存儲或?qū)ο蟮逆I來存儲）；
* 遍歷待去重數(shù)組arr，依次判斷tmp中是否包含該元素；
* 若tmp中不存在該元素，則放入；否則跳過不處理。
基本上無論什么樣的實(shí)現(xiàn)，其核心皆是如此（判斷是否已存在）。不行你就留言，咱們可以battle一下

經(jīng)典去重方案一：

設(shè)置tmp為對象，對象的鍵存儲數(shù)組元素的值，最終返回對象的所有鍵。
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) } // 調(diào)用數(shù)組去重 let arr =
[1, 2, 3, 1, 2] let newArr = array_unique(arr) console.log(newArr) // ['1',
'2', '3']
如果你采用這種方式來回答面試官的話，你就陷入了他在內(nèi)心中早早設(shè)下的陷阱：

*
你這種方式能區(qū)分?jǐn)?shù)字和字符串嗎？能區(qū)分undefined和'undefined'嗎？

*
你現(xiàn)在返回的數(shù)據(jù)類型還和原有的數(shù)據(jù)類型一致嗎？

帶著面試官的疑問，我們來看另外一種經(jīng)典去重方式。

經(jīng)典去重方式二：

設(shè)置tmp為數(shù)組，數(shù)組中存儲唯一的元素，最終返回tmp
function array_unique (arr) { let len = arr.length if (!len) { return [] } let
tmp = [] for (let i = 0; i < len; i++) { // 判斷數(shù)組arr的元素是否在數(shù)組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']
此刻，內(nèi)心是否竊喜！

But, 如果你這么考慮，又陷入了面試官的另一個陷阱：

* 你這方式能篩選NaN嗎？
好吧，面試官最大，再考慮！

數(shù)組去重方式三：

原理還是同去重方式二，只不過我們使用ES6的includes替換indexOf方法，

includes() 方法，判斷數(shù)組中是否包含某個元素，如果包含返回true，否則返回false

就是這么so easy!
function array_unique (arr) { let len = arr.length if (!len) { return [] } let
tmp = [] for (let i = 0; i < len; i++) { // 判斷數(shù)組arr的元素是否在數(shù)組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]
此刻，你以為就結(jié)束嗎？不，不可能！

面試官的坑已經(jīng)在前面等你很久了：

* 你的這個篩選方式能區(qū)分對象嗎？如{}、{a: 1}
有沒有想把自己的四十米大砍刀拿出來，neng屎面試官！（圖就不配了，自己腦補(bǔ)吧...）
然而，什么都做不了，繼續(xù)想吧...

數(shù)組去重方式四：

原理同上，我們要繼續(xù)換一個判斷數(shù)組是否包含某元素的方法：```findIndex``

findIndex查詢數(shù)組是否包含某元素，如果存在返回元素的索引，否則返回-1。它比indexOf更加先進(jìn)的地方在于能傳入callback，按約定方式查詢。
function array_unique (arr) { let len = arr.length if (!len) { return [] } let
tmp = [] for (let i = 0; i < len; i++) { // 判斷數(shù)組arr的元素是否在數(shù)組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}]
終于成功啦！來來來，可以瀟灑的問面試官，“您還有問題沒有？”

當(dāng)然，主動挑釁面試官，是要承擔(dān)風(fēng)險呦，有可能會因為你眨眼的時候，先眨了右眼被掛掉了...

判斷數(shù)組是否包含某元素的幾種方式：

給大家列個表格，好區(qū)分幾個方法的作用，

方法\是否可檢測 null undefined NaN {} 備注
indexOf 是 是 否 否 無
includes 是 是 是 否 無
findIndex 是 是 是 是 需傳入特定的callback
小結(jié)


數(shù)組去重這道面試題，考察的知識點(diǎn)還是非常多的。首先是對數(shù)組的常用方法要比較熟悉，還有其他的如NaN與NaN不相等，{}與{}不相等等知識點(diǎn)，以及靈活多變的思維邏輯。

當(dāng)然，數(shù)組去重還有其他的多種實(shí)現(xiàn)方式，歡迎各位小伙伴留言交流！

后記

以上就是胡哥今天給大家分享的內(nèi)容，喜歡的小伙伴記得點(diǎn)贊、收藏呦，關(guān)注胡哥有話說，學(xué)習(xí)前端不迷路，歡迎多多留言交流...

胡哥有話說，一個有技術(shù)，有情懷的胡哥！現(xiàn)任京東前端攻城獅一枚。

胡哥有話說，專注于大前端技術(shù)領(lǐng)域，分享前端系統(tǒng)架構(gòu)，框架實(shí)現(xiàn)原理，最新最高效的技術(shù)實(shí)踐！

• ? 上一篇：springboot~引用地址jar包的方法
• ? 下一篇：設(shè)計模式之代理模式