Javascript数组方法reduce的妙用之处分享


Posted in Javascript onJune 10, 2019

前言

Javascript数组方法中,相比map、filter、forEach等常用的迭代方法,reduce常常被我们所忽略,今天一起来探究一下reduce在我们实战开发当中,能有哪些妙用之处,下面从reduce语法开始介绍。

语法

array.reduce(function(accumulator, arrayElement, currentIndex, arr), initialValue)

若传入初始值,accumulator首次迭代就是初始值,否则就是数组的第一个元素;后续迭代中将是上一次迭代函数返回的结果。所以,假如数组的长度为n,如果传入初始值,迭代次数为n;否则为n-1。

比如实现数组 arr = [1,2,3,4] 求数组的和

let arr = [1,2,3,4];
arr.reduce(function(pre,cur){return pre + cur}); // return 10

实际上reduce还有很多重要的用法,这是因为累加器的值可以不必为简单类型(如数字或字符串),它也可以是结构化类型(如数组或对象),这使得我们可以用它做一些其他有用的事情,比如:

  • 将数组转换为对象
  • 展开更大的数组
  • 在一次遍历中进行两次计算
  • 将映射和过滤函数组合
  • 按顺序运行异步函数

将数组转化为对象

在实际业务开发中,你可能遇到过这样的情况,后台接口返回的数组类型,你需要将它转化为一个根据id值作为key,将数组每项作为value的对象进行查找。

例如:

const userList = [
 {
 id: 1,
 username: 'john',
 sex: 1,
 email: 'john@163.com'
 },
 {
 id: 2,
 username: 'jerry',
 sex: 1,
 email: 'jerry@163.com'
 },
 {
 id: 3,
 username: 'nancy',
 sex: 0,
 email: ''
 }
];

如果你用过lodash这个库,使用_.keyBy这个方法就能进行转换,但用reduce也能实现这样的需求。

function keyByUsernameReducer(acc, person) {
 return {...acc, [person.id]: person};
}
const userObj = peopleArr.reduce(keyByUsernameReducer, {});
console.log(userObj);

将小数组展开成大数组

试想这样一个场景,我们将一堆纯文本行读入数组中,我们想用逗号分隔每一行,生成一个更大的数组名单。

const fileLines = [
 'Inspector Algar,Inspector Bardle,Mr. Barker,Inspector Barton',
 'Inspector Baynes,Inspector Bradstreet,Inspector Sam Brown',
 'Monsieur Dubugue,Birdy Edwards,Inspector Forbes,Inspector Forrester',
 'Inspector Gregory,Inspector Tobias Gregson,Inspector Hill',
 'Inspector Stanley Hopkins,Inspector Athelney Jones'
];

function splitLineReducer(acc, line) {
 return acc.concat(line.split(/,/g));
}
const investigators = fileLines.reduce(splitLineReducer, []);
console.log(investigators);
// [
// "Inspector Algar",
// "Inspector Bardle",
// "Mr. Barker",
// "Inspector Barton",
// "Inspector Baynes",
// "Inspector Bradstreet",
// "Inspector Sam Brown",
// "Monsieur Dubugue",
// "Birdy Edwards",
// "Inspector Forbes",
// "Inspector Forrester",
// "Inspector Gregory",
// "Inspector Tobias Gregson",
// "Inspector Hill",
// "Inspector Stanley Hopkins",
// "Inspector Athelney Jones"
// ]

我们从长度为5的数组开始,最后得到一个长度为16的数组。

另一种常见增加数组的情况是flatMap,有时候我们用map方法需要将二级数组展开,这时可以用reduce实现扁平化

例如:

Array.prototype.flatMap = function(f) {
 const reducer = (acc, item) => acc.concat(f(item));
 return this.reduce(reducer, []);
}

const arr = ["今天天气不错", "", "早上好"]

const arr1 = arr.map(s => s.split(""))
// [["今", "天", "天", "气", "不", "错"],[""],["早", "上", "好"]]

const arr2 = arr.flatMap(s => s.split(''));
// ["今", "天", "天", "气", "不", "错", "", "早", "上", "好"]

在一次遍历中进行两次计算

有时我们需要对数组进行两次计算。例如,我们可能想要计算数字列表的最大值和最小值。我们可以通过两次通过这样做:

const readings = [0.3, 1.2, 3.4, 0.2, 3.2, 5.5, 0.4];
const maxReading = readings.reduce((x, y) => Math.max(x, y), Number.MIN_VALUE);
const minReading = readings.reduce((x, y) => Math.min(x, y), Number.MAX_VALUE);
console.log({minReading, maxReading});
// {minReading: 0.2, maxReading: 5.5}

这需要遍历我们的数组两次。但是,有时我们可能不想这样做。因为.reduce()让我们返回我们想要的任何类型,我们不必返回数字。我们可以将两个值编码到一个对象中。然后我们可以在每次迭代时进行两次计算,并且只遍历数组一次:

const readings = [0.3, 1.2, 3.4, 0.2, 3.2, 5.5, 0.4];
function minMaxReducer(acc, reading) {
 return {
  minReading: Math.min(acc.minReading, reading),
  maxReading: Math.max(acc.maxReading, reading),
 };
}
const initMinMax = {
 minReading: Number.MAX_VALUE,
 maxReading: Number.MIN_VALUE,
};
const minMax = readings.reduce(minMaxReducer, initMinMax);
console.log(minMax);
// {minReading: 0.2, maxReading: 5.5}

将映射和过滤合并为一个过程

还是先前那个用户列表,我们希望找到没有电子邮件地址的人的用户名,返回它们用户名用逗号拼接的字符串。一种方法是使用两个单独的操作:

  • 获取过滤无电子邮件后的条目
  • 获取用户名并拼接

将它们放在一起可能看起来像这样:

function notEmptyEmail(x) {
 return !!x.email
}

function notEmptyEmailUsername(a, b) {
 return a ? `${a},${b.username}` : b.username
}

const userWithEmail = userList.filter(notEmptyEmail);
const userWithEmailFormatStr = userWithEmail.reduce(notEmptyEmailUsername, '');

console.log(userWithEmailFormatStr);
// 'john,jerry'

现在,这段代码是完全可读的,对于小的样本数据不会有性能问题,但是如果我们有一个庞大的数组呢?如果我们修改我们的reducer回调,那么我们可以一次完成所有事情:

function notEmptyEmail(x) {
 return !!x.email
}

function notEmptyEmailUsername(usernameAcc, person){
 return (notEmptyEmail(person))
  ? (usernameAcc ? `${usernameAcc},${person.username}` : `${person.username}`) : usernameAcc;
}

const userWithEmailFormatStr = userList.reduce(notEmptyEmailUsername, '');

console.log(userWithEmailFormatStr);
// 'john,jerry'

在这个版本中,我们只遍历一次数组,一般建议使用filter和map的组合,除非发现性能问题,才推荐使用reduce去做优化。

按顺序运行异步函数

我们可以做的另一件事.reduce()是按顺序运行promises(而不是并行)。如果您对API请求有速率限制,或者您需要将每个prmise的结果传递到下一个promise,reduce可以帮助到你。

举一个例子,假设我们想要为userList数组中的每个人获取消息。

function fetchMessages(username) {
 return fetch(`https://example.com/api/messages/${username}`)
  .then(response => response.json());
}

function getUsername(person) {
 return person.username;
}

async function chainedFetchMessages(p, username) {
 // In this function, p is a promise. We wait for it to finish,
 // then run fetchMessages().
 const obj = await p;
 const data = await fetchMessages(username);
 return { ...obj, [username]: data};
}

const msgObj = userList
 .map(getUsername)
 .reduce(chainedFetchMessages, Promise.resolve({}))
 .then(console.log);
// {glestrade: [ … ], mholmes: [ … ], iadler: [ … ]}

async函数返回一个 Promise 对象,可以使用then方法添加回调函数。当函数执行的时候,一旦遇到await就会先返回,等到异步操作完成,再接着执行函数体内后面的语句。

请注意,在此我们传递Promise作为初始值Promise.resolve(),我们的第一个API调用将立即运行。

下面是不使用async语法糖的版本

function fetchMessages(username) {
 return fetch(`https://example.com/api/messages/${username}`)
  .then(response => response.json());
}

function getUsername(person) {
 return person.username;
}

function chainedFetchMessages(p, username) {
 // In this function, p is a promise. We wait for it to finish,
 // then run fetchMessages().
 return p.then((obj)=>{
  return fetchMessages(username).then(data=>{
   return {
    ...obj,
    [username]: data
   }
  })
 })
}

const msgObj = peopleArr
 .map(getUsername)
 .reduce(chainedFetchMessages, Promise.resolve({}))
 .then(console.log);
// {glestrade: [ … ], mholmes: [ … ], iadler: [ … ]}

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
Javascript笔记一 js以及json基础使用说明
May 22 Javascript
Jquery.addClass始终无效原因分析
Sep 08 Javascript
js判断浏览器是否支持html5
Aug 17 Javascript
JS制作手机端自适应缩放显示
Jun 11 Javascript
学习vue.js中class与style绑定
Dec 03 Javascript
jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】
Mar 08 Javascript
JS检测window.open打开的窗口是否关闭
Jun 25 Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
Dec 14 Javascript
详解vuex数据传输的两种方式及this.$store undefined的解决办法
Aug 26 Javascript
详解element-ui中表单验证的三种方式
Sep 18 Javascript
初学vue出现空格警告的原因及其解决方案
Oct 31 Javascript
VUE和Antv G6实现在线拓扑图编辑操作
Oct 28 Javascript
利用node 判断打开的是文件 还是 文件夹的实例
Jun 10 #Javascript
javascript function(函数类型)使用与注意事项小结
Jun 10 #Javascript
浅谈ECMAScript 中的Array类型
Jun 10 #Javascript
微信小游戏之使用three.js 绘制一个旋转的三角形
Jun 10 #Javascript
JavaScript变量作用域及内存问题实例分析
Jun 10 #Javascript
JavaScript内置对象math,global功能与用法实例分析
Jun 10 #Javascript
vue通信方式EventBus的实现代码详解
Jun 10 #Javascript
You might like
php禁用函数设置及查看方法详解
2016/07/25 PHP
thinkPHP中验证码的简单实现方法
2016/12/05 PHP
Yii全局函数用法示例
2017/01/22 PHP
php 可变函数使用小结
2018/06/12 PHP
php实现的rc4加密解密类定义与用法示例
2018/08/16 PHP
Yii 框架使用Forms操作详解
2020/05/18 PHP
Extjs4 GridPanel 的几种样式使用介绍
2013/04/18 Javascript
javascript将相对路径转绝对路径示例
2014/03/14 Javascript
Javascript学习笔记之函数篇(五) : 构造函数
2014/11/23 Javascript
JavaScript电子时钟倒计时
2016/01/09 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
2016/02/17 Javascript
HTML页面,测试JS对C函数的调用简单实例
2016/08/09 Javascript
AngularJS过滤器filter用法总结
2016/12/13 Javascript
node.js中debug模块的简单介绍与使用
2017/04/25 Javascript
vue.js移动端app实战1:初始配置详解
2017/07/24 Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
2017/09/20 Javascript
D3.js实现简洁实用的动态仪表盘的示例
2018/04/04 Javascript
jQuery实现监听下拉框选中内容发生改变操作示例
2018/07/13 jQuery
vue+element的表格实现批量删除功能示例代码
2018/08/17 Javascript
Vue中的循环及修改差值表达式的方法
2019/08/29 Javascript
js+css实现扇形导航效果
2020/08/18 Javascript
Python3 适合初学者学习的银行账户登录系统实例
2017/08/08 Python
Python深拷贝与浅拷贝用法实例分析
2019/05/05 Python
解决Django 在ForeignKey中出现 non-nullable field错误的问题
2019/08/06 Python
通过实例解析Python调用json模块
2019/12/11 Python
Python实现栈的方法详解【基于数组和单链表两种方法】
2020/02/22 Python
Python判断变量是否是None写法代码实例
2020/10/09 Python
Python爬取梨视频的示例
2021/01/29 Python
详解CSS3中常用的样式【基本文本和字体样式】
2020/10/20 HTML / CSS
老海军美国官网:Old Navy
2016/09/05 全球购物
世界上最好的精品店:Shoptiques
2018/02/05 全球购物
Viking Direct荷兰:购买办公用品
2019/06/20 全球购物
党建目标管理责任书
2014/07/25 职场文书
结婚通知短信大全
2015/04/17 职场文书
idea编译器vue缩进报错问题场景分析
2021/07/04 Vue.js
动画《新网球王子 U-17 WORLD CUP》希腊队PV公开
2022/04/02 日漫