reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。reduce() 方法接受四个参数:初始值(或者上一次回调函数的返回值),当前元素值,当前索引,调用 reduce() 的数组。

reduce() 的几个强大用法:

数组求和

var total = [ 0, 1, 2, 3 ].reduce(( acc, cur ) => {
return acc + cur
}, 0);
console.log(total) // 6

二维数组转为一维数组

var array = [[1, 2], [3, 4], [5, 6]].reduce(( acc, cur ) => {
return acc.concat(cur)
}, []); console.log(array) // [ 0, 1, 3, 4, 5, 6 ]

计算数组中每个元素出现的次数

1. 方法一

let names = ['tom', 'jim', 'jack', 'tom', 'jack'];

const countNames = names.reduce((allNames, name) => {
if (name in allNames) {
allNames[name] ++;
}
else {
allNames[name] = 1;
}
return allNames;
}, {}); console.log(countNames) // { tom: 2, jim: 1, jack: 2 }

2. 方法二

const arraySum = (arr, val) => arr.reduce((acc, cur) => {
return cur == val ? acc + 1 : acc + 0
}, 0); let arr = [ 0, 1, 3, 0, 2, 0, 2, 3 ]
console.log(arraySum(arr, 0)) // 数组arr中 0 元素出现的次数为3

数组去重

1.方法一

let arr = [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4];
let result = arr.sort().reduce((init, current) => {
if (init.length === 0 || init[init.length - 1] !== current) {
init.push(current);
}
return init;
}, []);
console.log(result); //[1,2,3,4,5]

2.方法二

当然,对于数组去重,也可以直接使用es6的…[拓展运算符] + Set 实现:

// console.log(...new Set([1,2,3,4,5,2,4,1]))

const dedupe = (array) => {
return Array.from(new Set(array));
}
console.log(dedupe([1, 1, 2, 3])) //[1,2,3]

ES6 之reduce的高级技巧的更多相关文章

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

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

  2. 使用ES6的reduce函数,根据key去重

    最近很着迷于ES6的函数,让代码变得更优雅.ES6里的reduce函数,平时用的不是特别多,真正用起来发现还是挺好用的. 想要实现的效果为: 原数组: let rawArr = [{id:'123'} ...

  3. ES6之reduce和reduceRight方法应用实例

    for循环是最基本的遍历循环,但是有些时候并不是很实用,且效率和性能较低,故本文列举出工作学习中碰到的reduce方法应用实例,供自己揣摩熟练应用,以提高自己的研发水平和研发效率. reduce方法( ...

  4. ES6新特新之箭头函数使用细节

    <=这个大家都知道是小于等于,那么=>是什么呢?今天我们就来探究一下ES6的新特新-----胖箭头函数. 其他语言的函数定义都是很简洁的,但是为什么javaScript的就那么复杂呢?还必 ...

  5. js的点滴

    一些好的博客 http://www.cnblogs.com/coding4/p/7809063.html canvas http://www.cnblogs.com/coding4/p/5593954 ...

  6. js自己总结的小东西(打印出来方便学习)

    1.你对angular有哪些认识? 属于mvvm框架,现在非常的火,由谷歌开发出来并维护的框架,为了解决负责业务中ajax的开发痛苦,刚开始结果angular的时候,确实让我有一种耳目一些,原来代码还 ...

  7. Web前端面试题小集

    一.一个页面上两个div左右铺满整个浏览器,要保证左边的div一直为100px,右边的div跟随浏览器大小变化(比如浏览器为500,右边div为400,浏览器为900,右边div为800),请写出大概 ...

  8. 用es6的Array.reduce()方法计算一个字符串中每个字符出现的次数

    有一道经典的字符串处理的问题,统计一个字符串中每个字符出现的次数. 用es6的Array.reduce()函数配合“...”扩展符号可以更方便的处理该问题. s='abananbaacnncn' [. ...

  9. ES6 数组遍历方法的实战用法总结(forEach,every,some,map,filter,reduce,reduceRight,indexOf,lastIndexOf)

    目录 forEach every some map filter reduce && reduceRight indexOf lastIndexOf 前言 ES6原生语法中提供了非常多 ...

随机推荐

  1. 转:ASP.NET MVC 多语言实现技巧 最简、最易维护和最快速开发

    说说传统做法的缺点 1.做过多语言的都知道这玩意儿太花时间 2.多语言架构一般使用资源文件.XML或者存储数据库来实现.这样就在一定程序上降低了性能 3.页面的可读性变差,需要和资源文件进行来回切换 ...

  2. python基础学习10----集合

    集合具有无序性,互异性 一.集合的建立 空集合 s=set() s={}#这样默认为是一个空字典 集合内的元素是可哈希的即不可变的数据类型 s={1,2,3,4} s=set([1,2,3,4]) s ...

  3. [IDEA_3] IDEA 配置 GitHub 并上传项目

    0. 说明 参考 Git & GitHub 的安装配置 IDEA 配置 GitHub 并上传项目 1. 安装配置 Git & GitHub 参照 Git & GitHub 的安 ...

  4. 安装Tidb数据库出现SSD硬盘IOPS不到40000的错误

    今天安装tidb数据库出现IOPS过低的问题,这里如果仅仅是测试的话我们可以降低这个值,大概遇到的问题是: 解决方法: 1.我们在中控机的目录下修改某个配置文件: [tidb@:vg_adn_tidb ...

  5. SDN2017 第二次实验作业

    安装floodlight 参考链接:http://www.sdnlab.com/19189.html 从github下载源码,并编译安装 $ sudo apt-get install build-es ...

  6. 13.5.SolrCloud集群使用手册之数据导入

    转载请出自出处:http://www.cnblogs.com/hd3013779515/ 1.使用curl命令方式 SolrCloud时会根据路由规则路由到各个shard. 删除所有数据 curl h ...

  7. 并发编程概述--C#并发编程经典实例

    优秀软件的一个关键特征就是具有并发性.过去的几十年,我们可以进行并发编程,但是难度很大.以前,并发性软件的编写.调试和维护都很难,这导致很多开发人员为图省事放弃了并发编程.新版.NET 中的程序库和语 ...

  8. mapreduce设置setMapOutputKeyClass与setMapOutputValueClass原因

    一般的mapreduce的wordcount程序如下: public class WcMapper extends Mapper<LongWritable, Text, Text, LongWr ...

  9. 【转】浅谈一个网页打开的全过程(涉及DNS、CDN、Nginx负载均衡等)

    1.概要 从用户在浏览器输入域名开始,到web页面加载完毕,这是一个说复杂不复杂,说简单不简单的过程,下文暂且把这个过程称作网页加载过程.下面我将依靠自己的经验,总结一下整个过程.如有错漏,欢迎指正. ...

  10. 浏览器中上传Excel文件,服务器获取Excel字段。写入的数据库中。操作Excel的方式jxl和poi。

    从Excel中获取字段,官方给我们提供了方法,地址https://poi.apache.org/components/spreadsheet/quick-guide.html#CellContents ...