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

前言

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

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

數組去重核心原理

價值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}]

終於成功啦！來來來，可以瀟灑的問面試官，“您還有問題沒有？”

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

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

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

小結

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

當然，數組去重還有其他的多種實現方式，歡迎各位小伙伴留言交流！

後記

以上就是胡哥今天給大家分享的內容，喜歡的小伙伴記得點贊、收藏呦，關註胡哥有話說，學習前端不迷路，歡迎多多留言交流...

胡哥有話說，一個有技術，有情懷的胡哥！現任京東前端攻城獅一枚。

胡哥有話說，專註於大前端技術領域，分享前端系統架構，框架實現原理，最新最高效的技術實踐！