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 相关文章推荐
鼠标滑过出现预览的大图提示效果
Feb 26 Javascript
jQuery中data()方法用法实例
Dec 27 Javascript
javascript简单实现滑动菜单效果的方法
Jul 27 Javascript
JavaScript淡入淡出渐变简单实例
Aug 06 Javascript
js生成随机数(指定范围)的实例代码
Jul 10 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
Nov 23 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
Jun 13 Javascript
基于webpack 实用配置方法总结
Sep 28 Javascript
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 jQuery
浅谈微信小程序之官方UI框架we-ui使用教程
Aug 20 Javascript
Angular 实现输入框中显示文章标签的实例代码
Nov 07 Javascript
vue实现简单的登录弹出框
Oct 26 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
无线电广播的开始
2002/01/30 无线电
绿山咖啡和蓝山咖啡
2021/03/04 新手入门
php中mysql模块部分功能的简单封装
2011/09/30 PHP
php语言中使用json的技巧及json的实现代码详解
2015/10/27 PHP
ThinkPHP使用Ueditor的方法详解
2016/05/20 PHP
zen cart实现订单中增加paypal中预留电话的方法
2016/07/12 PHP
jquery tools 系列 scrollable学习
2009/09/06 Javascript
JavaScript常用对象的方法和属性小结
2012/01/24 Javascript
jQuery实现隔行背景色变色
2014/11/24 Javascript
JS实现数组去重复值的方法示例
2017/02/18 Javascript
Node.js 使用递归实现遍历文件夹中所有文件
2017/09/18 Javascript
解决angular双向绑定无效果,ng-model不能正常显示的问题
2018/10/02 Javascript
JS实现放烟花效果
2020/03/10 Javascript
js实现无缝轮播图插件封装
2020/07/31 Javascript
使用Python编写一个简单的tic-tac-toe游戏的教程
2015/04/16 Python
Python语法快速入门指南
2015/10/12 Python
Python3中关于cookie的创建与保存
2018/10/21 Python
python 切换root 执行命令的方法
2019/01/19 Python
python绘制无向图度分布曲线示例
2019/11/22 Python
django数据模型on_delete, db_constraint的使用详解
2019/12/24 Python
python解释器安装教程的方法步骤
2020/07/02 Python
Keras实现DenseNet结构操作
2020/07/06 Python
Python:__eq__和__str__函数的使用示例
2020/09/26 Python
解决python3.x安装numpy成功但import出错的问题
2020/11/17 Python
使用tkinter实现三子棋游戏
2021/02/25 Python
用HTML5实现鼠标滚轮事件放大缩小图片的功能
2015/06/25 HTML / CSS
T3官网:头发造型工具
2019/12/26 全球购物
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2012/04/17 面试题
物流专业大学的自我评价
2014/01/11 职场文书
超市促销活动总结
2014/07/01 职场文书
承诺书范本
2015/01/21 职场文书
公司优秀员工推荐信
2015/03/24 职场文书
车间主任岗位职责范本
2015/04/08 职场文书
2015年行政人事部工作总结
2015/05/13 职场文书
java代码实现空间切割
2022/01/18 Java/Android
AudioContext 实现音频可视化(web技术分享)
2022/02/24 Javascript