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数据包含加号+通过ajax传到后台时出现连接错误
Aug 01 Javascript
javascript搜索框效果实现方法
May 14 Javascript
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
Oct 01 Javascript
JavaScript实现格式化字符串函数String.format
Dec 16 Javascript
基于JS实现仿百度百家主页的轮播图效果
Mar 06 Javascript
Angular2.js实现表单验证详解
Jun 23 Javascript
javascript实现Java中的Map对象功能的实例详解
Aug 21 Javascript
react实现菜单权限控制的方法
Dec 11 Javascript
vue mint-ui tabbar变组件使用
May 04 Javascript
js实现登录时记住密码的方法分析
Apr 05 Javascript
vue 在单页面应用里使用二级套嵌路由
Dec 19 Vue.js
JavaScript实现点击切换验证码及校验
Jan 10 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学习 运算符与运算符优先级
2008/06/15 PHP
PHP编实现程动态图像的创建代码
2008/09/28 PHP
PHP实现提取一个图像文件并在浏览器上显示的代码
2012/10/06 PHP
在Laravel中使用MongoDB的方法示例
2019/11/11 PHP
Jquery显示、隐藏元素以及添加删除样式
2013/08/09 Javascript
Javascript表格翻页效果实现思路及代码
2013/08/23 Javascript
编写简单的jQuery提示插件
2014/12/21 Javascript
Javascript基础教程之for循环
2015/01/18 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
2016/01/12 Javascript
jQuery实现两个select控件的互移操作
2016/12/22 Javascript
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
2017/02/15 Javascript
BootStrap中Table隐藏后显示问题的实现代码
2017/08/31 Javascript
jQuery实现切换隐藏与显示同时切换图标功能
2017/10/29 jQuery
Angular实现较为复杂的表格过滤,删除功能示例
2017/12/23 Javascript
angular基于ng-alain定义自己的select组件示例
2018/02/23 Javascript
使用pkg打包Node.js应用的方法步骤
2018/10/19 Javascript
jQuery实现当拉动滚动条到底部加载数据的方法分析
2019/01/24 jQuery
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
2019/11/13 Javascript
深入理解 TypeScript Reflect Metadata
2019/12/12 Javascript
[01:20:05]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第二场 2月5日
2021/03/11 DOTA
Python类的动态修改的实例方法
2017/03/24 Python
100行python代码实现跳一跳辅助程序
2018/01/15 Python
对python 通过ssh访问数据库的实例详解
2019/02/19 Python
python的debug实用工具 pdb详解
2019/07/12 Python
使用pyqt 实现重复打开多个相同界面
2019/12/13 Python
Python3.6 + TensorFlow 安装配置图文教程(Windows 64 bit)
2020/02/24 Python
python上传时包含boundary时的解决方法
2020/04/08 Python
python如何进入交互模式
2020/07/06 Python
HTML5 canvas基本绘图之图形变换
2016/06/27 HTML / CSS
深入理解HTML5定时器requestAnimationFrame的使用
2018/12/12 HTML / CSS
Bergfreunde丹麦:登山装备网上零售商
2017/02/26 全球购物
美国隐形眼镜销售网站:ContactsDirect
2017/10/28 全球购物
软件测试题目
2013/02/27 面试题
大学自主招生自荐信
2013/12/16 职场文书
银行党员批评与自我批评
2014/10/15 职场文书
资料员岗位职责
2015/02/10 职场文书