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 相关文章推荐
js 加载时自动调整图片大小
May 28 Javascript
Jquery选择器中使用变量实现动态选择例子
Jul 25 Javascript
JavaScript中Null与Undefined的区别解析
Jun 30 Javascript
jquery实现华丽的可折角广告代码
Sep 02 Javascript
jQuery插件DataTable使用方法详解(.Net平台)
Dec 22 Javascript
理解javascript中的闭包
Jan 11 Javascript
vue-resourse将json数据输出实例
Mar 08 Javascript
jQuery extend()详解及简单实例
May 06 jQuery
canvas简单快速的实现知乎登录页背景效果
May 08 Javascript
vue实现一个移动端屏蔽滑动的遮罩层实例
Jun 08 Javascript
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
Aug 18 Javascript
vue-cropper组件实现图片切割上传
May 27 Vue.js
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
CI框架中集成CKEditor编辑器的教程
2014/06/09 PHP
php可扩展的验证类实例(可对邮件、手机号、URL等验证)
2015/07/09 PHP
PHP 将dataurl转成图片image方法总结
2016/10/14 PHP
php+redis实现注册、删除、编辑、分页、登录、关注等功能示例
2017/02/15 PHP
详解php命令注入攻击
2019/04/06 PHP
php的扩展写法总结
2019/05/14 PHP
php下的原生ajax请求用法实例分析
2020/02/28 PHP
获取Javscript执行函数名称的方法
2006/12/22 Javascript
Javascript & DHTML 实例编程(教程)基础知识
2007/06/02 Javascript
jquery1.4后 jqDrag 拖动 不可用
2010/02/06 Javascript
Javascript 数组排序详解
2014/10/22 Javascript
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
2016/04/14 Javascript
jquery实现全选、不选、反选的两种方法
2016/09/06 Javascript
js实现本地图片文件拖拽效果
2017/07/18 Javascript
浅谈angular2路由预加载策略
2017/10/04 Javascript
node app 打包工具pkg的具体使用
2019/01/17 Javascript
vue3.0 搭建项目总结(详细步骤)
2019/05/20 Javascript
Layui数据表格 前后端json数据接收的方法
2019/09/19 Javascript
Vue 打包的静态文件不能直接运行的原因及解决办法
2020/11/19 Vue.js
numpy中矩阵合并的实例
2018/06/15 Python
python tkinter界面居中显示的方法
2018/10/11 Python
python绘制热力图heatmap
2020/03/23 Python
Python中那些 Pythonic的写法详解
2019/07/02 Python
matplotlib命令与格式之tick坐标轴日期格式(设置日期主副刻度)
2019/08/06 Python
如何在Cloud Studio上执行Python代码?
2019/08/09 Python
美国正版电视节目和电影在线观看:Hulu
2018/05/24 全球购物
瑞典多品牌连锁店:Johnells
2021/01/13 全球购物
在C语言中"指针和数组等价"到底是什么意思?
2014/03/24 面试题
abstract 可以和 virtual 一起使用吗?可以和 override 一起使用吗?
2012/10/15 面试题
汉语言文学毕业生求职信
2013/10/01 职场文书
大学生毕业自我鉴定
2013/11/06 职场文书
保安队长职务说明书
2014/02/23 职场文书
股东合作协议书范本
2014/04/14 职场文书
创先争优公开承诺书
2014/08/30 职场文书
学党史心得体会
2014/09/05 职场文书
迟到检讨书
2015/01/26 职场文书