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 相关文章推荐
网站被黑的假象--ARP欺骗之页面中加入一段js
May 16 Javascript
对JavaScript的eval()中使用函数的进一步讨论
Jul 26 Javascript
JQuery Study Notes 学习笔记(一)
Aug 04 Javascript
可自定义速度的js图片无缝滚动示例分享
Jan 20 Javascript
使用console进行性能测试
Apr 27 Javascript
JS实现的自定义网页拖动类
Nov 06 Javascript
深入分析javascript中console命令
Aug 14 Javascript
基于对象合并功能的实现示例
Oct 10 Javascript
对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解
Aug 27 Javascript
搭建Vue从Vue-cli到router路由护卫的实现
Nov 14 Javascript
javascrpt密码强度校验函数详解
Mar 18 Javascript
Ant Design的可编辑Tree的实现操作
Oct 31 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/20 PHP
10条PHP高级技巧[修正版]
2011/08/02 PHP
php中url函数介绍及使用示例
2014/02/13 PHP
Windows平台PHP+IECapt实现网页批量截图并创建缩略图功能详解
2019/08/02 PHP
Javascript遍历Html Table示例(包括内容和属性值)
2014/07/08 Javascript
javascript实现table表格隔行变色的方法
2015/05/13 Javascript
web前端开发JQuery常用实例代码片段(50个)
2015/08/28 Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
2015/11/13 Javascript
基于canvas实现的钟摆效果完整实例
2016/01/26 Javascript
JavaScript实现简洁的俄罗斯方块完整实例
2016/03/01 Javascript
js仿腾讯QQ的web登陆界面
2016/08/19 Javascript
jquery Form轻松实现文件上传
2017/05/24 jQuery
深入研究React中setState源码
2017/11/17 Javascript
Javacript中自定义的map.js  的方法
2017/11/26 Javascript
node.js基础知识小结
2018/02/26 Javascript
axios简单实现小程序延时loading指示
2018/07/30 Javascript
vue实现购物车抛物线小球动画效果的方法详解
2019/02/13 Javascript
vue中img src 动态加载本地json的图片路径写法
2019/04/25 Javascript
在 Vue 中编写 SVG 图标组件的方法
2020/02/24 Javascript
JavaScript代码实现微博批量取消关注功能
2021/02/05 Javascript
python进阶教程之词典、字典、dict
2014/08/29 Python
python实现的jpg格式图片修复代码
2015/04/21 Python
python利用MethodType绑定方法到类示例代码
2017/08/27 Python
python抓取网页中链接的静态图片
2018/01/29 Python
深入浅析python 中的匿名函数
2018/05/21 Python
Python+selenium 获取一组元素属性值的实例
2018/06/22 Python
python set内置函数的具体使用
2019/07/02 Python
基于python二叉树的构造和打印例子
2019/08/09 Python
python orm 框架中sqlalchemy用法实例详解
2020/02/02 Python
Python 实现3种回归模型(Linear Regression,Lasso,Ridge)的示例
2020/10/15 Python
Python爬虫之App爬虫视频下载的实现
2020/12/08 Python
CSS3提交意见输入框样式代码
2014/10/30 HTML / CSS
车队安全员岗位职责
2015/02/15 职场文书
地道战观后感
2015/06/04 职场文书
小学生禁毒教育心得体会
2016/01/15 职场文书
在容器中使用nginx搭建上传下载服务器
2022/05/11 Servers