es6中reduce的基本使用方法


Posted in Javascript onSeptember 10, 2019

前言

为啥要把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 ]

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

方法一

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 }

方法二

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]

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JAVASCRIPT HashTable
Jan 22 Javascript
jQuery1.9.1针对checkbox的调整方法(prop)
May 01 Javascript
js实现汉字排序的方法
Jul 23 Javascript
移动端利用H5实现压缩图片上传功能
Mar 29 Javascript
详解Angular2组件之间如何通信
Jun 22 Javascript
使用vue实现grid-layout功能实例代码
Jan 05 Javascript
vue页面离开后执行函数的实例
Mar 13 Javascript
Vue项目中如何引入icon图标
Mar 28 Javascript
nuxt.js中间件实现拦截权限判断的方法
Nov 21 Javascript
vue 自定义右键样式的实例代码
Nov 06 Javascript
javascript实现放大镜功能
Dec 09 Javascript
Canvas三种动态画圆实现方法说明(小结)
Apr 16 Javascript
layui导出所有数据的例子
Sep 10 #Javascript
解决layui-open关闭自身窗口的问题
Sep 10 #Javascript
layui下拉框获取下拉值(select)的例子
Sep 10 #Javascript
layer弹出层自定义提交取消按钮的例子
Sep 10 #Javascript
在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法
Sep 10 #Javascript
Node.js使用MongoDB的ObjectId作为查询条件的方法
Sep 10 #Javascript
layui表格 返回的数据状态异常的解决方法
Sep 10 #Javascript
You might like
PHP获取一段文本显示点阵宽度和高度的方法
2015/03/12 PHP
ThinkPHP进程计数类Process用法实例详解
2015/09/25 PHP
PHP面向对象程序设计子类扩展父类(子类重新载入父类)操作详解
2019/06/14 PHP
使用jquery prev()方法找到同级的前一个元素
2014/07/11 Javascript
用JavaScript实现用一个DIV来包装文本元素节点
2014/09/09 Javascript
jQuery验证插件 Validate详解
2014/11/20 Javascript
javascript正则表达式基础知识入门
2015/04/20 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
2016/08/29 Javascript
文件上传,iframe跨域数据提交的实现
2016/11/18 Javascript
JS ES6中setTimeout函数的执行上下文示例
2017/04/27 Javascript
JavaScript 巧学巧用
2017/05/23 Javascript
jQuery实现table表格信息的展开和缩小功能示例
2018/07/21 jQuery
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
2019/10/23 Javascript
vue axios封装httpjs,接口公用配置拦截操作
2020/08/11 Javascript
Python实现简单多线程任务队列
2016/02/27 Python
Python程序运行原理图文解析
2018/02/10 Python
Python对象中__del__方法起作用的条件详解
2018/11/01 Python
Python编程深度学习计算库之numpy
2018/12/28 Python
python实现的爬取电影下载链接功能示例
2019/08/26 Python
python3使用GUI统计代码量
2019/09/18 Python
Python3.7将普通图片(png)转换为SVG图片格式(网站logo图标)动起来
2020/04/21 Python
python实现在内存中读写str和二进制数据代码
2020/04/24 Python
python用tkinter实现一个gui的翻译工具
2020/10/26 Python
css3弹性盒模型实例介绍
2013/05/27 HTML / CSS
美体小铺美国官网:The Body Shop美国
2017/11/10 全球购物
如何手工释放资源
2013/12/15 面试题
计算机应用专业学生的自我评价分享
2013/11/03 职场文书
施工资料员的岗位职责
2013/12/22 职场文书
大学生涯自我鉴定
2014/01/16 职场文书
旅游网创业计划书
2014/01/31 职场文书
寄语学生的话
2014/04/10 职场文书
我为党旗添光彩演讲稿
2014/09/13 职场文书
四风问题专项整治工作情况报告
2014/10/28 职场文书
班级联欢会主持词
2015/07/03 职场文书
2016教师六五普法学习心得体会
2016/01/21 职场文书
基于Golang 高并发问题的解决方案
2021/05/08 Golang