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 06 Javascript
ko knockoutjs动态属性绑定技巧应用
Nov 14 Javascript
jQuery通过Ajax返回JSON数据
Apr 28 Javascript
JavaScript中数据结构与算法(三):链表
Jun 19 Javascript
浅析Node.js中的内存泄漏问题
Jun 23 Javascript
jquery实现表单输入时提示文字滑动向上效果
Aug 10 Javascript
jquery实现隐藏在左侧的弹性弹出菜单效果
Sep 18 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
Oct 19 Javascript
react+ant design实现Table的增、删、改的示例代码
Dec 27 Javascript
javascript面向对象三大特征之多态实例详解
Jul 24 Javascript
使用webpack搭建pixi.js开发环境
Feb 12 Javascript
Antd中单个DatePicker限定时间输入范围操作
Oct 29 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使用token防止表单重复提交的方法
2016/04/07 PHP
PHP 5.6.11中CURL模块问题的解决方法
2016/08/08 PHP
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
php 与 nginx 的处理方式及nginx与php-fpm通信的两种方式
2018/09/28 PHP
JavaScript中setInterval的用法总结
2013/11/20 Javascript
基于jquery异步传输json数据格式实例代码
2013/11/23 Javascript
Javascript 浮点运算精度问题分析与解决
2014/03/26 Javascript
DOM基础教程之使用DOM控制表格
2015/01/20 Javascript
原生js制作简单的数字键盘
2015/04/24 Javascript
Javascript通过overflow控制列表闭合与展开的方法
2015/05/15 Javascript
jQuery判断指定id的对象是否存在的方法
2015/05/22 Javascript
JS实现文档加载完成后执行代码
2015/07/09 Javascript
jQuery左右滚动支持图片放大缩略图图片轮播代码分享
2015/08/26 Javascript
seajs加载jquery时提示$ is not a function该怎么解决
2015/10/23 Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
2016/01/22 Javascript
百度地图给map添加右键菜单(判断是否为marker)
2016/03/04 Javascript
JS实现本地存储信息的方法(基于localStorage与userData)
2017/02/18 Javascript
微信小程序时间轴实现方法示例
2019/01/14 Javascript
js实现图片粘贴到网页
2019/12/06 Javascript
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
2020/05/28 Javascript
vue3.0 自适应不同分辨率电脑的操作
2021/02/06 Vue.js
[09:13]2014DOTA2国际邀请赛 中国区预选赛coser表演
2014/05/23 DOTA
[01:03]DOTA2新的征程 你的脚印值得踏上
2014/08/13 DOTA
使用pandas实现连续数据的离散化处理方式(分箱操作)
2019/11/22 Python
python判断无向图环是否存在的示例
2019/11/22 Python
pytorch中图像的数据格式实例
2020/02/11 Python
tensorflow实现残差网络方式(mnist数据集)
2020/05/26 Python
python实点云分割k-means(sklearn)详解
2020/05/28 Python
python爬虫工具例举说明
2020/11/30 Python
五分钟学会怎么用python做一个简单的贪吃蛇
2021/01/12 Python
澳大利亚玩具剧场:Toy Playhouse
2019/03/03 全球购物
自荐书范文范例
2014/02/13 职场文书
超市优秀员工获奖感言
2014/08/15 职场文书
副校长个人对照检查材料思想汇报
2014/10/04 职场文书
端午节寄语2015
2015/03/23 职场文书
表扬信范文
2019/04/22 职场文书