浅谈JavaScript 数组操作---去重

数组去重也是老生常谈的事情了，作为前端开发人员，操作数组也是基本操作。尤其是后台管理类的项目。由后台返回json数据，前端通过接口请求到数据以后，对数据进行业务上的处理，进而渲染到页面上。

数组去重的核心思想

通过创建一个临时变量temp，用以存储不重复的元素。遍历待去重的数组，依次判断temp中是否存在此元素，不存在就将该元素放入temp。存在则跳过此元素。

数组去重的几种方法：

方案一：经典方法（indexOf）

function array_noRepeat(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_noRepeat(arr)
console.log(newArr) // [1, 2, 3, '1', undefined, 'undefined']

此方法可以区分字符串和数字，区分 undefined 和 “undefined”，但是此种方法不能区分NaN。不考虑这些情况，还可以使用下面的方法（方法三）：

方案二：适用于数组元素不存在特殊类型且类型单一的情况

function array_noRepeat(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_noRepeat(arr)
console.log(newArr) // ['1', '2', '3']

方案三：利用ES6的includes 替代方案一中的indexOf方法。

includes 方法判断数组中是否包含某个元素，如包含返回true，反之返回false

function array_noRepeat(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_noRepeat(arr)
console.log(newArr) // [1, 2, 3, '1', undefined, 'undefined', NaN]

此方法对数组中包含数字、字符串、undefined、NaN都可以达到效果，如若你的数组中包含对象呢？那就需要用到下面的方法：

方案四：使用 findIndex

findIndex查询数组是否包含某个元素，如存在就返回元素的索引，如不存在返回-1。此方法可以传入回调函数callback，以约定方式进行查询。

function array_noRepeat(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_noRepeat(arr)
console.log(newArr) // [1, 2, 3, '1', undefined, 'undefined', NaN, {}, {a: 1}]

方案五：使用 Set

Set 为ES6新增的数据结构，Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。

let arr = [1, 2, 3, '1', 2, undefined, undefined, 'undefined']
let newArr = [...new Set(arr)]
console.log(newArr)  // [1, 2, 3, "1", undefined, "undefined"]

以上方法均可以用于数组的去重操作，具体选用那种还需以实际情况决定，如有更好的方法，欢迎评论补充。
Tips:
如果本文章对您有帮助，欢迎评论告知！