美文网首页js前端大杂烩
JavaScript 数组去重

JavaScript 数组去重

作者: lio_zero | 来源:发表于2021-06-08 23:13 被阅读0次

Set

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

我们可以从给定数组创建一个新的 Set(),以丢弃重复的值。然后使用扩展运算符(...)将其转换回数组。

const arr = [1, 2, 2, '1', null, '', undefined, NaN, NaN, true, false]

const unique = arr => [...new Set(arr)]
unique(arr) // [1, 2, "1", null, "", undefined, NaN, true, false]

注意,如果数值中存的是对象,值相同,但他们引用的是不同的内存地址,他会认为每个对象都是唯一的:

[...new Set([{ a: 1 }, { a: 1 }])] // [{a: 1}, {a: 1}]

// 你可以改成如下
const obj = { a: 1 }
[...new Set([obj, obj])] // [{ a: 1 }]

Set 除了和扩展运算符配合,还可以和 Array.form() 一起使用:

const unique = (arr) => Array.from(new Set(arr))

unique(arr) // [1, 2, "1", null, "", undefined, NaN, true, false]

Map

创建一个空 Map 数据结构,使用 Array.prototype.filter() 和 创建一个只包含唯一值的新数组。

const unique = arr => {
  const seen = new Map()
  return arr.filter(item => !seen.has(item) && seen.set(item, 1))
}

unique(arr) // [1, 2, "1", null, "", undefined, NaN, true, false]

Array.prototype.filter()

使用 Array.prototype.filter() 创建一个只包含唯一值的新数组。

const unique = arr => 
  arr.filter((item, index, arr) => arr.indexOf(item) === index)

unique(arr) // [1, 2, "1", null, "", undefined, true, false]

注意:该方法直接把 NaN 全局过滤了。

Array.prototype.includes()

const unique = arr => {
  const newArr = []
  arr.map(item => !newArr.includes(item) && newArr.push(item))
  return newArr
}
  
unique(arr) // [1, 2, "1", null, "", undefined, NaN, true, false]

也可以使用 Array.prototype.indexOf() 进行判断,但是存在着一个问题,该方法无法判断数组中是否含有 NaN

const unique = arr => {
  const newArr = []
  arr.map(item => newArr.indexOf(item) == -1 && newArr.push(item))
  return newArr
}

unique(arr) //  [1, 2, "1", null, "", undefined, NaN, NaN, true, false]

Array.prototype.reduce()

Array.prototype.reduce() 方法对数组中的每个元素执行一个由您提供的 reducer 函数(升序执行),将其结果组合成数组返回。

const unique = arr =>
  arr.reduce(
    (unique, item) => (unique.includes(item) ? unique : [...unique, item]),
    []
  )

unique(arr) // [1, 2, "1", null, "", undefined, NaN, true, false]

Object.hasOwnProperty()

利用 Object.hasOwnProperty 判断是否存在对象属性

const unique = arr => {
  const obj = {}
  return arr.filter(item =>
    obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true))
}

unique(arr) // [1, 2, "1", null, "", undefined, NaN, true, false]

Object 键值对

利用对象键值对不能相同名来去重

const unique = arr => {
  const obj = {}
  arr.forEach(value => {
    obj[value] = ''
  })
  return Object.keys(obj)
}

unique(arr) // ["1", "2", "null", "", "undefined", "NaN", "true", "false"]

注意两个问题

  • 数组中的任何类型都会转为字符串类型。
  • 当数组中存在相同值不同类型的数据时,会去掉其中一个。如数值 1 和字符串 '1',会去掉其中一个。

当然,为了快速开发,我们会使用一些工具库来去重。例如:

  • lodash 的 _.uniq(array)
  • Ramda 的 R.uniq(array)

更多资料

Remove duplicate values from JS array [duplicate]

相关文章

  • JavaScript数组去重算法实例

    本文主要介绍了JavaScript数组去重算法,结合实例形式总结分析了JavaScript数组去重相关的读写、遍历...

  • javascript数组去重,数组对象去重

    利用Reduce去重 function unique(arr) {var obj = {};arr = arr.r...

  • JavaScript - 数组去重

    数组去重 1.for循环 2.0 少了多少行代码~~~ 3.0 indexOf 4.0 map/forEach E...

  • javascript 数组去重

    es6数组去重的方法

  • JavaScript 数组去重

    数组去重,一般都是在面试的时候才会碰到,一般是要求手写数组去重方法的代码。如果是被提问到,数组去重的方法有哪些?你...

  • JavaScript 数组去重

    博客地址:https://ainyi.com/#/32 单数组去重 filter + indexOf() filt...

  • JavaScript数组去重

    数组去重是一个js中在面试中经常被问到的问题,被问到是因为确实能够考察一些问题。如果不使用第三方的工具库,完全使用...

  • Javascript 数组去重

    数组去重 数组去重,一般需求是给你一个数组,调用去重方法,返回数值副本,副本中没有重复元素。一般来说,两个元素通过...

  • 【JavaScript】数组去重

    话说面试常会碰到面试官会问JavaScript实现数组去重的问题,最近刚好在学习有关于JavaScript数组相关...

  • JavaScript数组去重

    当前元素的下标,和从数组里找到该元素的下标一样时,说明是第一次出现 ES6 Set类似于数组,成员值唯一,经过过滤...

网友评论

    本文标题:JavaScript 数组去重

    本文链接:https://www.haomeiwen.com/subject/mtrseltx.html