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实现鼠标悬停图片上时滚动文字说明的方法
Feb 17 Javascript
JS实用的动画弹出层效果实例
May 05 Javascript
用JavaScript实现页面重定向功能的教程
Jun 04 Javascript
在JavaScript中使用对数Math.log()方法的教程
Jun 15 Javascript
jQuery中prepend()方法使用详解
Aug 11 Javascript
JavaScript中的Function函数
Aug 27 Javascript
javascript每日必学之运算符
Feb 16 Javascript
实例详解JavaScript中setTimeout函数的执行顺序
Jul 12 Javascript
JavaScript实现简单的文本逐字打印效果示例
Apr 12 Javascript
JS实现根据指定值删除数组中的元素操作示例
Aug 02 Javascript
Vue如何使用混合Mixins和插件开发详解
Feb 05 Javascript
vue打包时去掉所有的console.log
Apr 10 Vue.js
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 上一篇,下一篇文章实现代码与原理说明
2010/05/09 PHP
Zend studio文件注释模板设置方法
2013/09/29 PHP
Codeigniter中禁止A Database Error Occurred错误提示的方法
2014/06/12 PHP
Zend Framework页面缓存实例
2014/06/25 PHP
Yii 2.0实现联表查询加搜索分页的方法示例
2017/08/02 PHP
php中加密解密DES类的简单使用方法示例
2020/03/26 PHP
关于Javascript 的 prototype问题。
2007/01/03 Javascript
javascript Excel操作知识点
2009/04/24 Javascript
JavaScript iframe的相互操作浅析
2009/10/14 Javascript
jQuery操作input值的各种方法总结
2013/11/21 Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
2014/09/25 Javascript
AngularJs 弹出模态框(model)
2016/04/07 Javascript
jQuery实现点击查看大图并以弹框的形式居中
2016/08/08 Javascript
bootstrap输入框组件使用方法详解
2017/01/19 Javascript
浅谈vue 单文件探索
2018/09/05 Javascript
使用pkg打包Node.js应用的方法步骤
2018/10/19 Javascript
vue实现动态按钮功能
2019/05/13 Javascript
ES6 Class中实现私有属性的一些方法总结
2019/07/08 Javascript
微信小程序转发事件实现解析
2019/10/22 Javascript
详细分析vue表单数据的绑定
2020/07/20 Javascript
在MAC上搭建python数据分析开发环境
2016/01/26 Python
Python装饰器实现几类验证功能做法实例
2017/05/18 Python
python去除拼音声调字母,替换为字母的方法
2018/11/28 Python
Django RBAC权限管理设计过程详解
2019/08/06 Python
python创建与遍历List二维列表的方法
2019/08/16 Python
python求一个字符串的所有排列的实现方法
2020/02/04 Python
详解canvas在圆弧周围绘制文本的两种写法
2018/05/22 HTML / CSS
将相和教学反思
2014/02/04 职场文书
入股协议书
2014/04/14 职场文书
全国爱眼日活动总结
2015/02/27 职场文书
听课评课活动心得体会
2016/01/15 职场文书
大学生社会服务心得体会
2016/01/22 职场文书
golang 实现菜单树的生成方式
2021/04/28 Golang
Nginx内网单机反向代理的实现
2021/11/07 Servers
Windows Server 2016 配置 IIS 的详细步骤
2022/04/28 Servers
MySQL数据库中的锁、解锁以及删除事务
2022/05/06 MySQL