前言

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

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

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

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

1.一般我們都會創(chuàng)建臨時變量tmp，存儲不重復(fù)的元素（以數(shù)組元素存儲或?qū)ο蟮逆I來存儲）；
2.遍歷待去重數(shù)組arr，依次判斷tmp中是否包含該元素；
3.若tmp中不存在該元素，則放入；否則跳過不處理。

基本上無論什么樣的實現(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([) // [1, 2, 3, '1', undefined, 'undefined', NaN, {}, {a: 1}]

終于成功啦！來來來，可以瀟灑的問面試官，“您還有問題沒有？”
當(dāng)然，主動挑釁面試官，是要承擔(dān)風(fēng)險呦，有可能會因為你眨眼的時候，先眨了右眼被掛掉了...

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

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

小結(jié)

數(shù)組去重這道面試題，考察的知識點還是非常多的。

首先是對數(shù)組的常用方法要比較熟悉，還有其他的如NaN與NaN不相等，{}與{}不相等等知識點，以及靈活多變的思維邏輯。

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

let arr = [1, 2, 3, '1', 2, undefined, undefined,  'undefined', NaN, NaN, {}, {}, {a: 1}, {a: 1}]
let set = new Set(arr)
console.log([...set])
// [ 1, 2, 3, '1', undefined, 'undefined', NaN,  {}, {}, { a: 1 }, { a: 1 }]

本文引用：胡哥有話說