博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
如何利用es6去重
阅读量:6278 次
发布时间:2019-06-22

本文共 2425 字,大约阅读时间需要 8 分钟。

以下是三种方法从数组里去重,并且返回唯一的值。我最喜欢的方式是使用Set,因为它是最短最简单的。

const array = [5, 2, 4, 5, 3];console.log([...new Set(array)])console.log(array.filter((item, index) => array.indexOf(item) === index))console.log(array.reduce((unique, item) => unique.includes(item) ? unique: [...unique, item], []))// result:  [5, 2, 4, 3]

使用Set

让我开始解释Set是什么吧:

Set是由es6引入的一种新的数据对象,由于Set只允许你存储唯一值,所以当传递进去一个数组的时候,它将会移除任何重复的值。

好啦,然我们回到我们的代码中来看下到底都发生了什么。实际上他进行了以下的操作:

  1. 首先,我们创建了新的Set并且把数组当作入参传递了进去,由于Set仅仅允许唯一值,所以所有重复值将会被移除。
  2. 现在重复值已经消失了,我们将会利用...把它重新转为数组。
const array = [5, 2, 4, 5, 3];const set = new Set(array)const newArr = [...set]console.log(newArr)// result:  [5, 2, 4, 3]

使用Array.from()函数来吧Set转为数组

另外呢,你也可以使用Array.from()来吧Set转为数组。

const array = [5, 2, 4, 5, 3];const set = new Set(array)const newArr = Array.from(set)console.log(newArr)// result:  [5, 2, 4, 3]

使用filter

为了理解这个选项,让我们来看看这两个方法都做了什么:indexOf和filter

indexOf()

indexOf()返回我们从数组里找到的第一个元素的索引。

const array = [5, 2, 4, 5, 3];console.log(array.indexOf(5))  // 0console.log(array.indexOf(2))  // 1console.log(array.indexOf(8))  // -1

filter

filter()函数会根据我们提供的条件创建一个新的数组。换一种说法,如果元素通过并且返回true,它将会包含在过滤后的数组中,如果有元素失败并且返回false,那么他就不会包含在过滤后的数组中。

我们逐步看看在每次循环数组的时候都发生了什么。

const array = [5, 2, 4, 5, 3];array.filter((item, index) => {  console.log(item, index, array.indexOf(item), array.indexOf(item) === index)  return array.indexOf(item) === index})//输出// 5 0 0 true// 2 1 1 true// 4 2 2 true// 5 3 0 false// 3 4 4 true

上面输出的代码见注释。重复的元素不再于indexOf相匹配,所以在这些情况下,它的结果将会是false并且将不会被包含进过滤后的值当中。

检索重复的值

我们也可以在数组中利用filter()函数来检索重复的值。我们只需要像这样简单的调整下代码:

const array = [5, 2, 4, 5, 3];array.filter((item, index) => {  console.log(item, index, array.indexOf(item), array.indexOf(item) !== index)  return array.indexOf(item) !== index})//输出// 5 0 0 false// 2 1 1 false// 4 2 2 false// 5 3 0 true// 3 4 4 false

使用reduce()函数

reduce()函数用于减少数组的元素并根据你传递过去的reducer函数,把他们最终合并到一个最终的数组中,

在这种情况下,我们的reducer()函数我们最终的数组是否包含了这个元素,如果不包含,就吧他放进最终的数组中,反之则跳过这个元素,最后再返回我们最终的元素。

reduce()函数理解起来总是有那么一点费劲,所以呢,咱们现在看下他是怎么运行的。

const array = [5, 2, 4, 5, 3];array.reduce((unique, item) => {  console.log(item, unique, unique.includes(item), unique.includes(item) ? unique: [...unique, item])  return unique.includes(item) ? unique: [...unique, item]}, [])//输出// 5 []          false   [5]// 2 [5]         false   [5, 2]// 4 [5, 2]      false   [5, 2, 4]// 5 [5, 2, 4]   true    [5, 2, 4]// 3 [5, 2, 4]   false   [5, 2, 4, 3]

转载自:

欢迎关注本人微信公众号:干货技术

翻译自:

你可能感兴趣的文章
java中包容易出现的错误及权限问题
查看>>
AngularJS之初级Route【一】(六)
查看>>
服务器硬件问题整理的一点总结
查看>>
SAP S/4HANA Cloud: Revolutionizing the Next Generation of Cloud ERP
查看>>
Mellanox公司计划利用系统芯片提升存储产品速度
查看>>
白帽子守护网络安全,高薪酬成大学生就业首选!
查看>>
ARM想将芯片装进人类大脑 降低能耗是一大挑战
查看>>
Oracle数据库的备份方法
查看>>
Selenium 自动登录考勤系统
查看>>
关于如何以编程的方式执行TestNG
查看>>
智能照明造福千家万户 家居智能不再是梦
查看>>
物联网如何跳出“看起来很美”?
查看>>
浅谈MySQL 数据库性能优化
查看>>
《UNIX/Linux 系统管理技术手册(第四版)》——1.10 其他的权威文档
查看>>
灵动空间 创享生活
查看>>
《UNIX网络编程 卷1:套接字联网API(第3版)》——8.6 UDP回射客户程序:dg_cli函数...
查看>>
不要将时间浪费到编写完美代码上
查看>>
《第一桶金怎么赚——淘宝开店创业致富一册通》一一第1章 创业梦想,怎样起步...
查看>>
基于容器服务的持续集成与云端交付(三)- 从零搭建持续交付系统
查看>>
《算法基础:打开算法之门》一3.4 归并排序
查看>>