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 判断脚本加载完毕的代码
Jul 13 Javascript
js调用打印机打印网页字体总是缩小一号的解决方法
Jan 24 Javascript
js事件绑定快捷键以ctrl+k为例
Sep 30 Javascript
Javascript毫秒数用法实例
Feb 05 Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
Aug 10 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
Nov 04 Javascript
JavaScript实现二维坐标点排序效果
Jul 18 Javascript
JavaScript中的E-mail 地址格式验证
Mar 28 Javascript
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
Sep 18 Javascript
layui实现左侧菜单点击右侧内容区显示
Jul 26 Javascript
vue项目引入ts步骤(小结)
Oct 31 Javascript
JavaScript前后端JSON使用方法教程
Nov 23 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使用数组实现队列
2012/02/05 PHP
PHP版单点登陆实现方案的实例
2016/11/17 PHP
详谈php中 strtr 和 str_replace 的效率问题
2017/05/14 PHP
Yii2使用表单上传文件的实例代码
2017/08/03 PHP
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
2007/04/20 Javascript
javascript实现复制与粘贴操作实例
2014/10/16 Javascript
javascript操作表格排序实例分析
2015/05/06 Javascript
使用requestAnimationFrame实现js动画性能好
2015/08/06 Javascript
javascript HTML5文件上传FileReader API
2020/03/27 Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
2016/05/19 Javascript
AngularJS入门教程之Select(选择框)详解
2016/07/27 Javascript
js 弹出虚拟键盘修改密码的简单实例
2016/10/10 Javascript
JavaScript重定向URL参数的两种方法小结
2016/10/19 Javascript
JavaScript对象封装的简单实现方法(3种方法)
2017/01/03 Javascript
微信小程序版翻牌小游戏
2018/01/26 Javascript
JS高级技巧(简洁版)
2018/07/29 Javascript
浅谈VUE单页应用首屏加载速度优化方案
2018/08/28 Javascript
使用Karma做vue组件单元测试的实现
2020/01/16 Javascript
如何利用JavaScript编写更好的条件语句详解
2020/08/10 Javascript
python创建列表并给列表赋初始值的方法
2015/07/28 Python
python 线程的暂停, 恢复, 退出详解及实例
2016/12/06 Python
Python urls.py的三种配置写法实例详解
2017/04/28 Python
在python中使用正则表达式查找可嵌套字符串组
2017/10/24 Python
django上传图片并生成缩略图方法示例
2017/12/11 Python
python采集微信公众号文章
2018/12/20 Python
tensorflow多维张量计算实例
2020/02/11 Python
非常震撼的纯CSS3人物行走动画
2016/02/24 HTML / CSS
HTML5地理定位实例
2014/10/15 HTML / CSS
Champs Sports加拿大:北美最大的以商场为基础的专业运动鞋和服装零售商之一
2018/05/01 全球购物
Android面试题及答案
2015/09/04 面试题
护理专业毕业生自荐信范文
2014/01/05 职场文书
如何写自我鉴定
2014/03/19 职场文书
收款委托书范本
2014/09/11 职场文书
2014年汽车销售工作总结
2014/12/01 职场文书
超市啤酒狂欢夜策划方案范文!
2019/07/03 职场文书
PHP正则表达式之RCEService回溯
2022/04/11 PHP