摘要:实际上他进行了以下的操作首先,我们创建了新的并且把数组当作入参传递了进去,由于仅仅允许唯一值,所以所有重复值将会被移除。现在重复值已经消失了,我们将会利用把它重新转为数组。
以下是三种方法从数组里去重,并且返回唯一的值。我最喜欢的方式是使用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只允许你存储唯一值,所以当传递进去一个数组的时候,它将会移除任何重复的值。
好啦,然我们回到我们的代码中来看下到底都发生了什么。实际上他进行了以下的操作:
首先,我们创建了新的Set并且把数组当作入参传递了进去,由于Set仅仅允许唯一值,所以所有重复值将会被移除。
现在重复值已经消失了,我们将会利用...把它重新转为数组。
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)) // 0 console.log(array.indexOf(2)) // 1 console.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]
转载自:http://www.lht.ren/article/12/
欢迎关注本人微信公众号:干货技术
翻译自:
https://medium.com/dailyjs/ho...
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/101060.html
摘要:工作过程中经常会用到数组去重,用到的时候往往一时想不到好方法,所以这里来总结一下去重方法。和方法分别为添加成员方法和得到键值方法。因此,利用方法也可以实现数组的去重。 工作过程中经常会用到数组去重,用到的时候往往一时想不到好方法,所以这里来总结一下去重方法。使用es6去重代码很简单,而且ES6已经相当普及了。所以先来介绍一下es6中的方法。 1.ES6中Map结构方法 function...
摘要:数组去重看了网上很多数组去重方法,用的比较常见的大概就几种,今天想自己来做一个总结。还有就是方法返回的数组也是排序后的数组,某些情况下可能不符合要求。 JS数组去重 看了网上很多数组去重方法,用的比较常见的大概就几种,今天想自己来做一个总结。部分内容参考该博客 1 . 在原数组上操作(基本方法) 思路:利用循环嵌套,判断数组中每个元素与其后面的元素是否相等,如果相等,就使用spli...
摘要:数组去重是校招面试的必考知识点。以下就是笔者所实现的数组去重的几种简单的方式。结合实现这种方法的关键点就是判断是否相同的时候不要忽略对元素类型的判断。以上就是笔者所想到的几个数组去重的方式大家如果有更好的方法欢迎留言。 数组去重,是校招面试的必考知识点。简单的说,数组去重就是将一个数组中的相同的元素删除,只保留其中的一个。这里的相同其实是一个陷阱,有好多同学只认为值相等即为相同,而忽略...
阅读 2889·2023-04-26 02:22
阅读 2219·2021-11-17 09:33
阅读 3097·2021-09-22 16:06
阅读 1002·2021-09-22 15:54
阅读 3464·2019-08-29 13:44
阅读 1838·2019-08-29 12:37
阅读 1253·2019-08-26 14:04
阅读 1854·2019-08-26 11:57