最近很着迷于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去重的更多相关文章

  1. 使用es6新增Set函数快速数组去重

    使用new Set()快速数组去重: let arr = [1, 2, 2, 3, 4, 5, 5, 5, 6] let set = new Set([...arr]) console.log([.. ...

  2. MapReduce的reduce函数里的key用的是同一个引用

    最近写MapReduce程序,出现了这么一个问题,程序代码如下: package demo; import java.io.IOException; import java.util.HashMap; ...

  3. 浅谈 es6 箭头函数, reduce函数介绍

    今天来谈一下箭头函数, es6的新特性 首先我们来看下箭头函数长什么样子, let result = (param1, param2) => param1+param2; 上述代码 按照以前书写 ...

  4. ES6 入门系列 - 函数的扩展

    1函数参数的默认值 基本用法 在ES6之前,不能直接为函数的参数指定默认值,只能采用变通的方法. function log(x, y) { y = y || 'World'; console.log( ...

  5. es6中reduce()方法和reduceRight()方法

    es6中reduce()方法从左往右开始 参数:prev:它是上一次调用回调时返回的结果,每次调用的结果都会给prev cur:当前的元素 index:当前的索引 arr:循环的数组 返回值:函数累计 ...

  6. 弄明白python reduce 函数

    作者:Panda Fang 出处:http://www.cnblogs.com/lonkiss/p/understanding-python-reduce-function.html 原创文章,转载请 ...

  7. 数组中的reduce 函数理解

    第一次见到reduce 是在js 的高级程序设计中,它的意思是把一个数组减少为一个数,举的例子是数组中元素的求和.它接受一个函数作为参数,函数又有两个参数,一个是prev, 前一个值,一个是next, ...

  8. filter、map、sorted和reduce函数

    内置函数——filter.map和reduce filter filter()函数接收一个函数 f 和一个list,这个函数 f 的作用是对每个元素进行判断,返回 True或 False,filter ...

  9. es6中的函数

    ES6 允许为函数的参数设置默认值,即直接写在参数定义的后面. function log(x, y = 'World') { console.log(x, y); } log('Hello') // ...

随机推荐

  1. 借助JCharDet获取文件字符集

    前段时间,在学习lucene的时候,遇到了读取txt文档遇到编码错误的问题.学了几个解决方案,大部分是将文件转十六进制(可以使用UE的Ctrl+H来查看),读取开头的四个标志位来判断.可是总有些文本文 ...

  2. 约瑟夫环(Joseph)的高级版(面向事件及“伪链表””)

    约瑟夫环问题: 在一间房间总共有n个人(下标0-n-1),只能有最后一个人活命. 按照如下规则去杀人: 所有人围成一圈 顺时针报数,每次报到q的人将被杀掉 被杀掉的人将从房间内被移走 然后从被杀掉的下 ...

  3. 在Windows下解决git ERROR: Permission to XXX.git denied to user

    这种情况一般都是由于登陆了不同的git仓库在本地记录了凭证导致的,比如登陆了两个不同的github账号. 1.控制面板 2.删除凭证再重新提交将会重新输入用户名和密码 以上.

  4. Codeforces 797A - k-Factorization

    A. k-Factorization 题目链接:http://codeforces.com/problemset/problem/797/A time limit per test 2 seconds ...

  5. Oracle:新增用户登录提示“ORA-04098:触发器‘GD.ON_LOGON_TRIGGER’无效且未通过重新验证”

    接着上一篇创建一个只有查看权限的用户,在测试环境,新建账号后尝试登录,提示如下: 1.看提示是base库的触发器有问题了,所以先定位到这个触发器 SELECT * FROM DBA_OBJECTS W ...

  6. legend2---开发日志5(如何解决插件的延迟问题,比如vue)

    legend2---开发日志5(如何解决插件的延迟问题,比如vue) 一.总结 一句话总结:元素可以先设置为隐藏,这样就不会让用户看到延迟的问题,然后等加载完再显示, 元素先设置为隐藏 加载完再显示 ...

  7. java---->lombok.jar的使用

    lombok.jar是在看一个项目的代码时遇见的一个“新包”,记录下用法: 1.新建maven工程myfirst,新建一个javabean User,写一个LombokTest类,在pom.xml引入 ...

  8. OSPF - 1,基础

    1,OSPF知识点a)在OSPF中,如果是环回口宣告进OSPF,不管宣告时配置的是多少位掩码,路由器收到的都是32位.(EIGRP配了多少位就收到多少位).好处:EIGRP中,在PING包发起时如果在 ...

  9. jQuery -- touch事件之滑动判断(左右上下方向)

    $("body").on("touchstart", function(e) { // 判断默认行为是否可以被禁用 if (e.cancelable) { // ...

  10. hdu-2421 Deciphering Password 数学姿势

    给定A,B,对于A^B的每一个因子,M为其因子的因子数的三次方求和. 容易推导得出A^B的每一个因子都是A的质因子的组合(质因子可重复利用),其因子数自然等于所使用的每个质因子的数量乘积. 假设A由质 ...