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 cookie插件代码类
May 26 Javascript
JS获取dom 对象 ajax操作 读写cookie函数
Nov 18 Javascript
jquery 学习之二 属性相关
Nov 23 Javascript
JavaScript下通过的XMLHttpRequest发送请求的代码
Jun 28 Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
Feb 05 Javascript
js 遍历json返回的map内容示例代码
Oct 29 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
Nov 29 Javascript
解析JavaScript模仿块级作用域
Dec 29 Javascript
vue 页面加载进度条组件实例
Feb 05 Javascript
javaScript强制保留两位小数的输入数校验和小数保留问题
May 09 Javascript
谈谈JavaScript令人迷惑的==与+
Aug 31 Javascript
基于angular实现树形二级表格
Oct 16 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和mysql中uft-8中文编码乱码的几种解决办法
2012/04/19 PHP
thinkPHP多域名情况下使用memcache方式共享session数据的实现方法
2016/07/21 PHP
详解PHP中websocket的使用方法
2016/09/15 PHP
PHP连接SQL Server的方法分析【基于thinkPHP5.1框架】
2019/05/06 PHP
PHP设计模式之建造者模式(Builder)原理与用法案例详解
2019/12/12 PHP
javascript Onunload与Onbeforeunload使用小结
2009/12/31 Javascript
jQuery UI AutoComplete 使用说明
2011/06/20 Javascript
Jquery submit()无法提交问题
2013/04/21 Javascript
js截取字符串的两种方法及区别详解
2013/11/05 Javascript
javascript中数组的冒泡排序使用示例
2013/12/18 Javascript
node app 打包工具pkg的具体使用
2019/01/17 Javascript
解决vue单页面应用中动态修改title问题
2019/06/09 Javascript
VUE组件中的 Drawer 抽屉实现代码
2019/08/06 Javascript
微信小程序如何实现radio单选框单击打勾和取消
2020/01/21 Javascript
angula中使用iframe点击后不执行变更检测的问题
2020/05/10 Javascript
详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
2020/05/28 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
2020/11/03 Javascript
[02:16]卖萌的僵尸 DOTA2神话信使飞僵小宝来袭
2014/03/24 DOTA
python批量添加zabbix Screens的两个脚本分享
2017/01/16 Python
Python迭代器和生成器定义与用法示例
2018/02/10 Python
Python爬虫信息输入及页面的切换方法
2018/05/11 Python
对Python3中bytes和HexStr之间的转换详解
2018/12/04 Python
python并发编程 Process对象的其他属性方法join方法详解
2019/08/20 Python
Python循环实现n的全排列功能
2019/09/16 Python
python中有关时间日期格式转换问题
2019/12/25 Python
使用TensorFlow搭建一个全连接神经网络教程
2020/02/06 Python
Python图像处理库PIL中图像格式转换的实现
2020/02/26 Python
如何用tempfile库创建python进程中的临时文件
2021/01/28 Python
一波HTML5 Canvas基础绘图实例代码集合
2016/02/28 HTML / CSS
HTML5仿微信聊天界面、微信朋友圈实例代码
2018/01/29 HTML / CSS
斯巴达比赛商店:Spartan Race
2019/01/08 全球购物
捷科时代的软件测试笔试题
2015/11/09 面试题
迎国庆演讲稿
2014/09/15 职场文书
介绍信怎么写
2015/01/30 职场文书
护林员个人总结
2015/03/04 职场文书
浅谈MySql整型索引和字符串索引失效或隐式转换问题
2021/11/20 MySQL