ES6 之reduce的高级技巧
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的高级技巧的更多相关文章
- es6中reduce()方法和reduceRight()方法
es6中reduce()方法从左往右开始 参数:prev:它是上一次调用回调时返回的结果,每次调用的结果都会给prev cur:当前的元素 index:当前的索引 arr:循环的数组 返回值:函数累计 ...
- 使用ES6的reduce函数,根据key去重
最近很着迷于ES6的函数,让代码变得更优雅.ES6里的reduce函数,平时用的不是特别多,真正用起来发现还是挺好用的. 想要实现的效果为: 原数组: let rawArr = [{id:'123'} ...
- ES6之reduce和reduceRight方法应用实例
for循环是最基本的遍历循环,但是有些时候并不是很实用,且效率和性能较低,故本文列举出工作学习中碰到的reduce方法应用实例,供自己揣摩熟练应用,以提高自己的研发水平和研发效率. reduce方法( ...
- ES6新特新之箭头函数使用细节
<=这个大家都知道是小于等于,那么=>是什么呢?今天我们就来探究一下ES6的新特新-----胖箭头函数. 其他语言的函数定义都是很简洁的,但是为什么javaScript的就那么复杂呢?还必 ...
- js的点滴
一些好的博客 http://www.cnblogs.com/coding4/p/7809063.html canvas http://www.cnblogs.com/coding4/p/5593954 ...
- js自己总结的小东西(打印出来方便学习)
1.你对angular有哪些认识? 属于mvvm框架,现在非常的火,由谷歌开发出来并维护的框架,为了解决负责业务中ajax的开发痛苦,刚开始结果angular的时候,确实让我有一种耳目一些,原来代码还 ...
- Web前端面试题小集
一.一个页面上两个div左右铺满整个浏览器,要保证左边的div一直为100px,右边的div跟随浏览器大小变化(比如浏览器为500,右边div为400,浏览器为900,右边div为800),请写出大概 ...
- 用es6的Array.reduce()方法计算一个字符串中每个字符出现的次数
有一道经典的字符串处理的问题,统计一个字符串中每个字符出现的次数. 用es6的Array.reduce()函数配合“...”扩展符号可以更方便的处理该问题. s='abananbaacnncn' [. ...
- ES6 数组遍历方法的实战用法总结(forEach,every,some,map,filter,reduce,reduceRight,indexOf,lastIndexOf)
目录 forEach every some map filter reduce && reduceRight indexOf lastIndexOf 前言 ES6原生语法中提供了非常多 ...
随机推荐
- 虚拟机克隆linux centos 6.5 系统网卡配置
作为一个刚刚接触linux系统的小白来说,VMware虚拟机安装好CentOS6.5系统后,纯净的系统多克隆几份出来方便后期做试验.克隆步骤很简单,克隆后出现的问题是克隆后的网卡MAC地址和原系统MA ...
- python基础学习10----集合
集合具有无序性,互异性 一.集合的建立 空集合 s=set() s={}#这样默认为是一个空字典 集合内的元素是可哈希的即不可变的数据类型 s={1,2,3,4} s=set([1,2,3,4]) s ...
- python基础学习3----列表
一.字符格式化输出 占位符 %s s = string 字符串 %d d = digit 整数 %f f = float 浮点数 name = input(&q ...
- Java MySQL数据类型对照
Java MySQL数据类型对照 类型名称 显示长度 数据库类型 JAVA类型 JDBC类型索引(int) 描述 varchar L+N VARCHAR java.lang.S ...
- python 计时器
今天做自动化界面工具的时候需要用到计时器,查阅了一下,发现以下的这位博友写的很简洁方便且实用 https://blog.csdn.net/qfxx_CSDN/article/details/81412 ...
- 高斯求积公式 matlab
1. 分别用三点和四点Gauss-Chebyshev公式计算积分 并与准确积分值2arctan4比较误差.若用同样的三点和四点Gauss-Legendre公式计算,也给出误差比较结果. 2*atan( ...
- DFS服务待书写
https://www.cnblogs.com/xfan1982/p/4120583.html 安装AD域控制 https://www.cnblogs.com/wanggege/p/4605678.h ...
- SASS对css的管理
一.SASS简介 SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. 本文总结了SASS的主要用法.我的目标是,有了这篇文章,日常的一般 ...
- Grafana3.0.1+Zabbix3.0.4监控系统平台搭建
前言 本文的Zabbix部分知识只介绍它的基础安装,Zabbix的使用以及配置优化并不在本文的介绍范围之内. 本文只介绍在CentOS6系列下的安装和部署,其他发行版与其他版本号暂不涉及 本文默认使用 ...
- kubernetes lable 操作
我们要给已创建的Pod“redis-master”添加一个标签role=master: $ kubectl label pod redis-master role=master 查看该Pod的Labe ...