草庐IT

JavaScript 数组去重

lio_zero 2023-09-21 原文

这几天整理的一下过往的文章和笔记，备份到了 Github 上，地址? blog。

如果我的内容帮助到了您，欢迎点个 Star ??? 鼓励鼓励 :) ~~ ?

我希望我的内容可以帮助你。现在我专注于前端领域，但我也将分享我在有限的时间内看到和感受到的东西。

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)

更多资料

JavaScript数组codeuniquearr

有关JavaScript 数组去重的更多相关文章

  1. ruby-on-rails - 在 Ruby 中循环遍历多个数组 - 2

    我有多个ActiveRecord子类Item的实例数组，我需要根据最早的事件循环打印。在这种情况下，我需要打印付款和维护日期，如下所示:ItemAmaintenancerequiredin5daysItemBpaymentrequiredin6daysItemApaymentrequiredin7daysItemBmaintenancerequiredin8days我目前有两个查询，用于查找maintenance和payment项目(非排他性查询)，并输出如下内容:paymentrequiredin...maintenancerequiredin...有什么方法可以改善上述(丑陋的)代

  2. ruby - 多次弹出/移动 ruby​​ 数组 - 2

    我的代码目前看起来像这样numbers=[1,2,3,4,5]defpop_threepop=[]3.times{pop有没有办法在一行中完成pop_three方法中的内容？我基本上想做类似numbers.slice(0,3)的事情，但要删除切片中的数组项。嗯...嗯，我想我刚刚意识到我可以试试slice! 最佳答案 是numbers.pop(3)或者numbers.shift(3)如果你想要另一边。 关于ruby-多次弹出/移动ruby​​数组，我们在StackOverflow上找到一

  3. ruby - 将数组的内容转换为 int - 2

    我需要读入一个包含数字列表的文件。此代码读取文件并将其放入二维数组中。现在我需要获取数组中所有数字的平均值，但我需要将数组的内容更改为int。有什么想法可以将to_i方法放在哪里吗？ClassTerraindefinitializefile_name@input=IO.readlines(file_name)#readinfile@size=@input[0].to_i@land=[@size]x=1whilex 最佳答案 只需将数组映射为整数:@land边注如果你想得到一条线的平均值，你可以这样做:values=@input[x]

  4. ruby - 通过 erb 模板输出 ruby​​ 数组 - 2

    我正在使用puppet为ruby​​程序提供一组常量。我需要提供一组主机名，我的程序将对其进行迭代。在我之前使用的bash脚本中，我只是将它作为一个puppet变量hosts=>"host1,host2"我将其提供给bash脚本作为HOSTS=显然这对ruby​​不太适用——我需要它的格式hosts=["host1","host2"]自从phosts和putsmy_array.inspect提供输出["host1","host2"]我希望使用其中之一。不幸的是，我终其一生都无法弄清楚如何让它发挥作用。我尝试了以下各项:我发现某处他们指出我需要在函数调用前放置“function_”……这

  5. ruby - 检查数组是否在增加 - 2

    这个问题在这里已经有了答案:Checktoseeifanarrayisalreadysorted?(8个答案)关闭9年前。我只是想知道是否有办法检查数组是否在增加？这是我的解决方案，但我正在寻找更漂亮的方法:n=-1@arr.flatten.each{|e|returnfalseife

  6. ruby - 如果指定键的值在数组中相同，如何合并哈希 - 2

    我有一个这样的哈希数组:[{:foo=>2,:date=>Sat,01Sep2014},{:foo2=>2,:date=>Sat,02Sep2014},{:foo3=>3,:date=>Sat,01Sep2014},{:foo4=>4,:date=>Sat,03Sep2014},{:foo5=>5,:date=>Sat,02Sep2014}]如果:date相同，我想合并哈希值。我对上面数组的期望是:[{:foo=>2,:foo3=>3,:date=>Sat,01Sep2014},{:foo2=>2,:foo5=>5:date=>Sat,02Sep2014},{:foo4=>4,:dat

  7. ruby - 在 Ruby 中用键盘诅咒数组浏览 - 2

    我正在尝试在Ruby中制作一个cli应用程序，它接受一个给定的数组，然后将其显示为一个列表，我可以使用箭头键浏览它。我觉得我已经在Ruby中看到一个库已经这样做了，但我记不起它的名字了。我正在尝试对soundcloud2000中的代码进行逆向工程做类似的事情，但他的代码与SoundcloudAPI的使用紧密耦合。我知道cursesgem，我正在考虑更抽象的东西。广告有没有人见过可以做到这一点的库或一些概念证明的Ruby代码可以做到这一点？ 最佳答案 我不知道这是否是您正在寻找的，但也许您可以使用我的想法。由于我没有关于您要完成的工作

  8. ruby - 如何在 Grape 中定义哈希数组？ - 2

    我使用Ember作为我的前端和GrapeAPI来为我的API提供服务。前端发送类似:{"service"=>{"name"=>"Name","duration"=>"30","user"=>nil,"organization"=>"org","category"=>nil,"description"=>"description","disabled"=>true,"color"=>nil,"availabilities"=>[{"day"=>"Saturday","enabled"=>false,"timeSlots"=>[{"startAt"=>"09:00AM","endAt"=>

  9. ruby - 使用多个数组创建计数 - 2

    我正在尝试按0-9和a-z的顺序创建数字和字母列表。我有一组值value_array=['0','1','2','3','4','5','6','7','8','9','a','b'，'光盘'，'e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','','u','v','w','x','y','z']和一个组合列表的数组，按顺序，这些数字可以产生x个字符，比方说三个list_array=[]和一个当前字母和数字组合的数组(在将它插入列表数组之前我会把它变成一个字符串，]current_combo['0','0','0']

  10. ruby - 在哈希的键数组中追加元素 - 2

    查看我的Ruby代码:h=Hash.new([])h[0]=:word1h[1]=h[1]输出是:Hash={0=>:word1,1=>[:word2,:word3],2=>[:word2,:word3]}我希望有Hash={0=>:word1,1=>[:word2],2=>[:word3]}为什么要附加第二个哈希元素(数组)？如何将新数组元素附加到第三个哈希元素？ 最佳答案 如果您提供单个值作为Hash.new的参数(例如Hash.new([])，完全相同的对象将用作每个缺失键的默认值。这就是您所拥有的，那是你不想要的。您可以改用

随机推荐