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窗口功能指南之在窗口中书写内容
Jul 21 Javascript
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
Dec 04 Javascript
JS 去除Array中的null值示例代码
Nov 20 Javascript
表单序列化与jq中的serialize使用示例
Feb 21 Javascript
JavaScript利用正则表达式去除日期中的-
Jun 09 Javascript
jQuery实现分隔条左右拖动功能
Nov 21 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
Jan 21 Javascript
javascript 常用验证函数总结
Jun 28 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
Sep 15 Javascript
prototype与__proto__区别详细介绍
Jan 09 Javascript
微信小程序实现瀑布流布局与无限加载的方法详解
May 12 Javascript
node结合swig渲染摸板的方法
Apr 11 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执行zip与rar解压缩方法实现代码
2010/12/05 PHP
php的hash算法介绍
2014/02/13 PHP
PHP图片自动裁切应付不同尺寸的显示
2014/10/16 PHP
在Linux系统下一键重新安装WordPress的脚本示例
2015/06/30 PHP
PHP实现的构造sql语句类实例
2016/02/03 PHP
php使用自带dom扩展进行元素匹配的原理解析
2020/05/29 PHP
用javascript判断IE版本号简单实用且向后兼容
2013/09/11 Javascript
jQuery实现等比例缩放大图片让大图片自适应页面布局
2013/10/16 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
2014/04/03 Javascript
jquery实现的缩略图预览滑块实例
2015/06/25 Javascript
jQuery使用contains过滤器实现精确匹配方法详解
2016/02/25 Javascript
无缝滚动的简单实现代码(推荐)
2016/06/07 Javascript
深入浅析JavaScript的API设计原则
2016/06/14 Javascript
JavaScript实现in-place思想的快速排序方法
2016/08/07 Javascript
jQuery实现frame之间互通的方法
2017/06/26 jQuery
JavaScript阻止表单提交方法(附代码)
2017/08/15 Javascript
在 vue-cli v3.0 中使用 SCSS/SASS的方法
2018/06/14 Javascript
在vue2.0中引用element-ui组件库的方法
2018/06/21 Javascript
详解Howler.js Web音频播放终极解决方案
2020/08/23 Javascript
[02:03]风行者至宝清风环佩外观展示
2020/09/05 DOTA
Django自定义分页效果
2017/06/27 Python
Python爬虫实战:分析《战狼2》豆瓣影评
2018/03/26 Python
详解Pytorch 使用Pytorch拟合多项式(多项式回归)
2018/05/24 Python
Sanic框架异常处理与中间件操作实例分析
2018/07/16 Python
详解在python操作数据库中游标的使用方法
2019/11/12 Python
pytorch梯度剪裁方式
2020/02/04 Python
详解python安装matplotlib库三种失败情况
2020/07/28 Python
python如何导出微信公众号文章方法详解
2020/08/31 Python
Django2.1.7 查询数据返回json格式的实现
2020/12/29 Python
html5+css3之CSS中的布局与Header的实现
2014/11/21 HTML / CSS
TripAdvisor土耳其网站:全球知名旅行社区,真实旅客评论
2017/04/17 全球购物
文明寝室标语
2014/06/13 职场文书
优秀党员自我评价范文
2014/09/15 职场文书
2015年公路养护工作总结
2015/05/13 职场文书
离婚案件被告代理词
2015/05/23 职场文书
HDFS免重启挂载新磁盘
2022/04/06 Servers