js数组去重的常见方式

前言

数组去重，在面试、笔试中，会经常遇到，下面谈下常见的去重方法，从中可以观察不同的去重方法的效果。

利用ES6的Set去重

let arr = [1, '1', 2, 2, true, true, 'true', undefined, null, undefined, null, NaN, NaN, {}, {}, [], []]

// 利用ES6 Set去重（ES6中最常用），{}没去重
const unique1 = arr => {
  return Array.from(new Set(arr))
}
const unique2 = arr => {
  return [... new Set(arr)]
}

console.log('----------Array.from(new Set(arr))--------')
console.log(unique1(arr)) // [ 1, '1', 2, true, 'true', undefined, null, NaN, {}, {}, [], [] ]

console.log('----------[... new Set(arr)]--------')
console.log(unique2(arr)) // [ 1, '1', 2, true, 'true', undefined, null, NaN, {}, {}, [], [] ]

利用indexOf去重

const unique3 = arr => {
  let array = []
  for (let i = 0; i < arr.length; i++) {
    // if (array.indexOf(arr[i]) === -1) {
    //   array.push(arr[i])
    // }
    if (!(~array.indexOf(arr[i]))) {
      array.push(arr[i])
    }
  }
  return array
}
console.log('----------indexOf--------')
console.log(unique3(arr)) // [ 1, '1', 2, true, 'true', undefined, null, NaN, NaN, {}, {}, [], [] ]

利用includes去重

const unique4 = arr => {
  let array = []
  for (let i = 0; i < arr.length; i++) {
    if (!array.includes(arr[i])) {
      array.push(arr[i])
    }
  }
  return array
}
console.log('----------includes--------')
console.log(unique4(arr)) // [ 1, '1', 2, true, 'true', undefined, null, NaN, {}, {}, [], [] ]

利用reduce去重

const unique5 = arr => {
  return arr.reduce((total, curr) => {
    total.includes(curr) ? '' : total.push(curr)
    return total
  }, [])
}
console.log('----------reduce--------')
console.log(unique5(arr)) // [ 1, '1', 2, true, 'true', undefined, null, NaN, {}, {}, [], [] ]

利用filter+hasOwnProperty去重

const unique6 = arr => {
  let obj = {}
  return arr.filter(val => {
    let type = typeof val + val
    return obj.hasOwnProperty(type) ? false : (obj[type] = true)
  })
}
console.log('----------filter+hasOwnProperty--------')
console.log(unique6(arr)) // [ 1, '1', 2, true, 'true', undefined, null, NaN, {}, [] ]