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 相关文章推荐
javascript入门·对象属性方法大总结
Oct 01 Javascript
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
Jun 14 Javascript
借助JavaScript脚本判断浏览器Flash Player信息的方法
Jul 09 Javascript
为何JS操作的href都是javascript:void(0);呢
Nov 12 Javascript
JS+CSS3模拟溢出滚动效果
Aug 12 Javascript
jQuery 全选 全不选 事件绑定的实现代码
Jan 23 Javascript
VUE实现一个分页组件的示例
Sep 13 Javascript
实现一个完整的Node.js RESTful API的示例
Sep 29 Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
Oct 31 Javascript
jquery 实现拖动文件上传加载进度条功能
Mar 18 jQuery
深入理解令牌认证机制(token)
Aug 22 Javascript
JQuery事件冒泡和默认行为代码实例
May 13 jQuery
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中使用crypt()实现用户身份验证的代码
2012/09/05 PHP
Google AJAX 搜索 API实现代码
2010/11/17 Javascript
基于jQuery实现左右div自适应高度完全相同的代码
2012/08/09 Javascript
Javascript级联下拉菜单以及AJAX数据验证核心代码
2013/05/10 Javascript
删除javascript所创建子节点的方法
2015/05/21 Javascript
JavaScript暂停和继续定时器的实现方法
2016/07/18 Javascript
js中获取jsp表单中radio类型的值简单实例
2016/08/15 Javascript
ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
2016/09/22 Javascript
JS比较两个数值的大小实例
2016/11/25 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
2016/12/02 Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
2017/02/19 Javascript
ES6新特性之字符串的扩展实例分析
2017/04/01 Javascript
jQuery实现的简单对话框拖动功能示例
2018/06/05 jQuery
详解Vue.js在页面加载时执行某个方法
2018/11/20 Javascript
彻底搞懂并解决vue-cli4中图片显示的问题实现
2020/08/31 Javascript
Nodejs 数组的队列以及forEach的应用详解
2021/02/25 NodeJs
Python中Collection的使用小技巧
2014/08/18 Python
python多线程操作实例
2014/11/21 Python
python通过openpyxl生成Excel文件的方法
2015/05/12 Python
python儿童学游戏编程知识点总结
2019/06/03 Python
Python中最好用的命令行参数解析工具(argparse)
2019/08/23 Python
在 Linux/Mac 下为Python函数添加超时时间的方法
2020/02/20 Python
基于PyQT实现区分左键双击和单击
2020/05/19 Python
网页切图的CSS和布局经验与要点
2015/04/09 HTML / CSS
css3实现画半圆弧线的示例代码
2017/11/06 HTML / CSS
Vertbaudet西班牙网上商店:婴儿服装、童装、母婴用品和儿童家具
2019/10/16 全球购物
Crocs欧洲官网:Crocs Europe
2020/01/14 全球购物
英国知名小木屋定制网站:Tiger Sheds
2020/03/06 全球购物
为什么要优先使用同步代码块而不是同步方法?
2013/01/30 面试题
常用UNIX 命令(Linux的常用命令)
2013/07/10 面试题
党员教师工作决心书
2014/03/13 职场文书
企业年检委托书范本
2014/10/14 职场文书
党的群众路线教育实践活动专题组织生活会发言材料
2014/10/17 职场文书
学生会辞职信
2015/03/02 职场文书
员工自我评价范文
2015/03/11 职场文书
Python3.8官网文档之类的基础语法阅读
2021/09/04 Python