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 相关文章推荐
JQuery 浮动导航栏实现代码
Aug 27 Javascript
读jQuery之十一 添加事件核心方法
Jul 31 Javascript
基于JQuery实现的Select级联
Jan 27 Javascript
搞定immutable.js详细说明
May 02 Javascript
js实现无缝滚动图
Feb 22 Javascript
js实现三级联动效果(简单易懂)
Mar 27 Javascript
Angular中$state.go页面跳转并传递参数的方法
May 09 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
Apr 16 Javascript
在element-ui的select下拉框加上滚动加载
Apr 18 Javascript
判断“命令按钮”是否被鼠标单击详解
Jul 31 Javascript
javascript实现扫雷简易版
Aug 18 Javascript
JavaScript代码实现微博批量取消关注功能
Feb 05 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
第十四节 命名空间 [14]
2006/10/09 PHP
PHP常用开发函数解析之数组篇[未完结]
2012/07/30 PHP
php用header函数实现301跳转代码实例
2013/11/25 PHP
php实现的中文分词类完整实例
2017/02/06 PHP
javascript 折半查找字符在数组中的位置(有序列表)
2010/12/09 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件。
2011/12/26 Javascript
ASP.NET jQuery 实例14 在ASP.NET form中校验时间范围
2012/02/03 Javascript
JS操作Cookies包括(读取添加与删除)
2012/12/26 Javascript
js触发select onchange事件的小技巧
2014/08/05 Javascript
推荐一款jQuery插件模板
2015/01/09 Javascript
script标签属性用type还是language
2015/01/21 Javascript
详解Bootstrap插件
2016/04/25 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
2016/08/05 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
2016/11/03 Javascript
Html5 js实现手风琴效果
2020/04/17 Javascript
ES5 ES6中Array对象去除重复项的方法总结
2017/04/27 Javascript
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
2017/06/20 Javascript
jquery图片放大镜效果
2017/06/23 jQuery
vue如何获取点击事件源的方法
2017/08/10 Javascript
JavaScript函数中的this四种绑定形式
2017/08/15 Javascript
原生js封装添加class,删除class的实例
2017/11/06 Javascript
python实现去除下载电影和电视剧文件名中的多余字符的方法
2014/09/23 Python
Android应用开发中Action bar编写的入门教程
2016/02/26 Python
Python数据结构之翻转链表
2017/02/25 Python
python利用标准库如何获取本地IP示例详解
2017/11/01 Python
windows 10 设定计划任务自动执行 python 脚本的方法
2019/09/11 Python
Django DRF认证组件流程实现原理详解
2020/08/17 Python
详解java调用python的几种用法(看这篇就够了)
2020/12/10 Python
方法名是否可以与构造器的名字相同
2012/06/04 面试题
市场营销工作计划书
2014/05/06 职场文书
助残日活动总结
2014/08/27 职场文书
大学生作弊检讨书
2014/09/11 职场文书
职工擅自离岗检讨书
2014/09/23 职场文书
2014年优秀党员材料
2014/12/18 职场文书
教你用Java Swing实现自助取款机系统
2021/06/11 Java/Android
python自动化测试通过日志3分钟定位bug
2021/11/20 Python