JavaScript 数组去重的 8 种方法

44 阅读2分钟

1. 利用 Map 对象和数组的 filter 方法

const arr = [1, '1', 1, undefined, undefined, NaN, NaN]
function unique(arr) {
  const res = new Map()
  return arr.filter(a => !res.has(a) && res.set(a, 1)})
}
const newArr = unique(arr)
console.log(newArr) // [1, "1", undefined, NaN]
  1. Map 对象是 ES6 提供的一个新的数据结构,其中 has 的方法是返回一个布尔值,表示某个值是否存在当前的 Map 对象之中,如果不存在则返回 true,存在则返回 flaseset 方法是给 Map 对象设置 key/value

  2. filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素

所以说,Map 对象结合 filter 方法可以达到数组去重的效果~。

2. 利用 Set 对象和数组的 Array.from 方法

const arr = [1, '1', 1, undefined, undefined, NaN, NaN]
const newArr = Array.from(new Set(arr))
console.log(newArr) // [1, "1", undefined, NaN]
  1. SetES6 新提供的数据结构,类似于数组,但是本身没有重复值

  2. Array.from 方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括 ES6 新增的数据结构 SetMap

所以 set 结合 Array.from 同样可以达到数组去重的效果。不过需要注意的是,主流浏览器像 ChromeFirfoxOperaSafari,包括微软的 Edge ,都是支持的,但是唯独 IE 系列不支持。

3. 利用 Set + 扩展运算符

const arr = [1, '1', 1, undefined, undefined, NaN, NaN]
const newArr = [...new Set(arr)]
console.log(newArr) // [1, "1", undefined, NaN]

也可以用于字符串去重

;[...new Set('ababbc')].join('')

4. 利用 filter 数组方法

const arr = [1, '1', 1, undefined, undefined, NaN, NaN]
const newArr = arr.filter((item, index) => arr.indexOf(item) === index)
console.log(newArr) //  [1, "1", undefined]

5. 利用 reduce 数组方法

const arr = [1, '1', 1, undefined, undefined, NaN, NaN]
const newArr = arr.reduce((unique, item) => (unique.includes(item) ? unique : [...unique, item]), [])
console.log(newArr) // [1, "1", undefined, NaN]

6. 利用对象 key 唯一性

const arr = [1, '1', 1, undefined, undefined, NaN, NaN]
function unique(arr) {
  var res = []
  var json = {}
  for (var i = 0; i < arr.length; i++) {
    if (!json[arr[i]]) {
      res.push(arr[i])
      json[arr[i]] = true
    }
  }
  return res
}
console.log(unique(arr)) // [1, undefined, NaN]

7. 利用 indexOf

const arr = [1, '1', 1, undefined, undefined, NaN, NaN]
function unique(arr) {
  var res = []
  for (var i = 0; i < arr.length; i++) {
    if (res.indexOf(arr[i]) === -1) {
      res.push(arr[i])
    }
  }
  return res
}
console.log(unique(arr)) // [1, "1", undefined, NaN, NaN]

8. 数组中对象去重

function objTrim() {
  let obj = {}
  this.test = this.test.reduce((cur, next) => {
    obj[next.imageId] ? '' : (obj[next.imageId] = true && cur.push(next))
    return cur
  }, [])
  return this.test
}