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 相关文章推荐
Add a Picture to a Microsoft Word Document
Jun 15 Javascript
javascript 动态数据下的锚点错位问题解决方法
Dec 24 Javascript
初窥JQuery-Jquery简介 入门了解篇
Nov 25 Javascript
Mac/Windows下如何安装Node.js
Nov 22 Javascript
jQuery异步验证用户名是否存在示例代码
May 21 Javascript
JS代码实现根据时间变换页面背景效果
Jun 16 Javascript
AngularJS出现$http异步后台无法获取请求参数问题的解决方法
Nov 03 Javascript
JS DOMReady事件的六种实现方法总结
Nov 23 Javascript
vue中将网页打印成pdf实例代码
Jun 15 Javascript
基于JavaScript实现无限加载瀑布流
Jul 21 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
Dec 08 Javascript
vue+webpack实现异步组件加载的方法
Feb 03 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函数)
2006/10/09 PHP
BBS(php & mysql)完整版(二)
2006/10/09 PHP
php实现的漂亮分页方法
2014/04/17 PHP
PHP使用redis实现统计缓存mysql压力的方法
2015/11/14 PHP
PHP可变变量学习小结
2015/11/29 PHP
Yii框架使用魔术方法实现跨文件调用功能示例
2017/05/20 PHP
JavaScript 注册事件代码
2011/01/27 Javascript
使用基于jquery的gamequery插件做JS乒乓球游戏
2011/07/31 Javascript
为指定的元素添加遮罩层的示例代码
2014/01/15 Javascript
JavaScript实现动态创建CSS样式规则方案
2014/09/06 Javascript
一个jquery实现的不错的多行文字图片滚动效果
2014/09/28 Javascript
JS 新增Cookie 取cookie值 删除cookie 举例详解
2014/10/10 Javascript
javascript实现页面刷新时自动清空表单并选中的方法
2015/07/18 Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
2016/04/03 Javascript
vue源码学习之Object.defineProperty对象属性监听
2018/05/30 Javascript
node.js文件操作系统实例详解
2019/11/05 Javascript
vue路由分文件拆分管理详解
2020/08/13 Javascript
python3使用QQ邮箱发送邮件
2020/05/20 Python
Python3.4解释器用法简单示例
2019/03/22 Python
python实现根据文件格式分类
2019/10/31 Python
解决Pytorch 加载训练好的模型 遇到的error问题
2020/01/10 Python
TFRecord文件查看包含的所有Features代码
2020/02/17 Python
python使用hdfs3模块对hdfs进行操作详解
2020/06/06 Python
在PyCharm中安装PaddlePaddle的方法
2021/02/05 Python
html标签之Object和EMBED标签详解
2013/07/04 HTML / CSS
Melissa香港官网:MDreams
2016/07/01 全球购物
jurlique茱莉蔻英国官网:澳洲天然护肤品
2018/08/03 全球购物
BudgetAir印度:预订航班、酒店和汽车租赁
2019/07/07 全球购物
进修护士自我鉴定
2013/10/14 职场文书
西安交大自主招生自荐信
2014/01/27 职场文书
水利局群众路线专题民主生活会发言材料
2014/09/21 职场文书
运动会铅球比赛加油稿
2014/09/26 职场文书
2015年宣传部部长竞选演讲稿
2014/11/28 职场文书
2015国庆节66周年标语
2015/07/30 职场文书
详解PHP用mb_string处理windows中文字符
2021/05/26 PHP
Python学习之时间包使用教程详解
2022/03/21 Python