使用ES6的reduce函数,根据key去重
最近很着迷于ES6的函数,让代码变得更优雅。ES6里的reduce函数,平时用的不是特别多,真正用起来发现还是挺好用的。
想要实现的效果为:
原数组:
let rawArr = [{id:'123'},{id:'456'},{id:'789'},{id:'123'}];
根据id去重后的结果为
let rawArr = [{id:'123'},{id:'456'},{id:'789'}];
reduce函数介绍
在说如何去重之前,先来介绍一下reduce函数:
array.reduce(callback[, initialValue]);
写的具体一点,是这样子
array.reduce(function(total, currentValue, currentIndex, array), initialValue);
reduce方法会遍历数组,并且为数组中的每个元素,执行定义的callback方法,并把结果汇总为单个值返回。
参数定义
callback:为每个元素执行的方法,它有以下四个参数
total:累计器,也是最终返回的结果
currentValue:当前遍历的元素
currentIndex:当前遍历的元素的下标,可选
array:原始数组,可选
initialValue:初始值
需要注意的是,如果定义了initialValue,那么total的初始值就是initialValue,遍历则从第0项开始。
如果没有定义,则total的初始值,会是第0项元素,遍历则从第1项开始。
利用reduce函数封装去重方法
由于最终希望返回的是一个去重后的数组,所以reduce函数的初始值要设置为空数组[],这样,在遍历到符合条件的元素的时候,才能push进数组里。
我封装了一个util工具方法:入参为原始数组,以及需要根据哪个key值去重,返回结果为最终去重后的数组
function uniqueByKey(arr,key) {
let hash = {};
let result = arr.reduce((total, currentValue) => {
if (!hash[currentValue[key]]) { //如果当前元素的key值没有在hash对象里,则可放入最终结果数组
hash[currentValue[key]]= true; //把当前元素key值添加到hash对象
total.push(currentValue); //把当前元素放入结果数组
}
return total; //返回结果数组
},[]);
return result;
}
最后,奉上MDN的reduce介绍地址,写的非常详细
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce
使用ES6的reduce函数,根据key去重的更多相关文章
- 使用es6新增Set函数快速数组去重
使用new Set()快速数组去重: let arr = [1, 2, 2, 3, 4, 5, 5, 5, 6] let set = new Set([...arr]) console.log([.. ...
- MapReduce的reduce函数里的key用的是同一个引用
最近写MapReduce程序,出现了这么一个问题,程序代码如下: package demo; import java.io.IOException; import java.util.HashMap; ...
- 浅谈 es6 箭头函数, reduce函数介绍
今天来谈一下箭头函数, es6的新特性 首先我们来看下箭头函数长什么样子, let result = (param1, param2) => param1+param2; 上述代码 按照以前书写 ...
- ES6 入门系列 - 函数的扩展
1函数参数的默认值 基本用法 在ES6之前,不能直接为函数的参数指定默认值,只能采用变通的方法. function log(x, y) { y = y || 'World'; console.log( ...
- es6中reduce()方法和reduceRight()方法
es6中reduce()方法从左往右开始 参数:prev:它是上一次调用回调时返回的结果,每次调用的结果都会给prev cur:当前的元素 index:当前的索引 arr:循环的数组 返回值:函数累计 ...
- 弄明白python reduce 函数
作者:Panda Fang 出处:http://www.cnblogs.com/lonkiss/p/understanding-python-reduce-function.html 原创文章,转载请 ...
- 数组中的reduce 函数理解
第一次见到reduce 是在js 的高级程序设计中,它的意思是把一个数组减少为一个数,举的例子是数组中元素的求和.它接受一个函数作为参数,函数又有两个参数,一个是prev, 前一个值,一个是next, ...
- filter、map、sorted和reduce函数
内置函数——filter.map和reduce filter filter()函数接收一个函数 f 和一个list,这个函数 f 的作用是对每个元素进行判断,返回 True或 False,filter ...
- es6中的函数
ES6 允许为函数的参数设置默认值,即直接写在参数定义的后面. function log(x, y = 'World') { console.log(x, y); } log('Hello') // ...
随机推荐
- MySQL LIMIT的使用
SELECT语句返回所有匹配的行,它们可能是指定表中的每个行.为 了返回第一行或前几行,可使用LIMIT子句. 比如我原始的student表如下: 我现在想输出前4行,就使用 SELECT * FRO ...
- Java 层序创建和遍历二叉树
直接上代码 package te.com; import java.util.LinkedList; import java.util.Queue; import java.util.logging. ...
- Windows上结合使用Flume和Kafka
Win7+Flume1.8.0 + Kafka1.0.0 1.目标 ①使用Flume作为Kafka的Producer: ②使用Kafka作为Flume的Sink: 其实以上两点是同一个事情在Flume ...
- MySQL Server and Server-Startup Programs
1. mysqld-The MySQL Server mysqld,also known as mysql server, is the main program that does most of ...
- Servlet 小知识
1.In servlet 3.0 we have new feature annotations to replace XML.也就是说应该尽量使用annotations Servlet is an ...
- Java 发送SOAP请求调用WebService,解析SOAP报文
https://blog.csdn.net/Peng_Hong_fu/article/details/80113196 记录测试代码 SoapUI调用路径 http://localhost:8082/ ...
- p1468 Party Lamps
就是模拟.同一个开关按2下相当于没按,那么,如果一共按0下,就是没按,按1下就是4个开关的1个,按2下可能相当于实际按了0下或按2下,按3下实际按了1下或3下,之后如果是奇数,相当于按1或3下,偶数相 ...
- PHP设计模式注意点
PHP命名空间 可以更好地组织代码,与Java中的包类似. Test1.php <?php namespace Test1;//命名空间Test1 function test(){ echo _ ...
- 2017-2018 ACM-ICPC, NEERC, Northern Subregional ContestG - Grand Test
题意:找三条同起点同终点的不相交的路径 题解:用tarjan的思想,记录两个low表示最小和次小的dfs序,以及最小和次小的位置,如果次小的dfs序比dfn小,那么说明有两条返祖边,那么就是满足条件的 ...
- ie8不支持currentTarget的解决办法
一般绑定事件时,我们都会在事件回调方法里用event.currentTarget获取当前对象,但到ie8里就获取不到了. 解决方法如下: var eve = event || window.event ...