数组的遍历你都会用了,那Promise版本的呢
这里指的遍历方法包括:
map
、reduce
、reduceRight
、forEach
、filter
、some
、every
因为最近要进行了一些数据汇总,node
版本已经是8.11.1了,所以直接写了个async/await
的脚本。
但是在对数组进行一些遍历操作时,发现有些遍历方法对Promise
的反馈并不是我们想要的结果。
当然,有些严格来讲并不能算是遍历,比如说some
,every
这些的。
但确实,这些都会根据我们数组的元素来进行多次的调用传入的回调。
这些方法都是比较常见的,但是当你的回调函数是一个Promise
时,一切都变了。
前言
async/await
为Promise
的语法糖 文中会直接使用async/await
替换Promise
let result = await func()
// => 等价于
func().then(result => {// code here
})// ======async function func () {return 1
}
// => 等价与
function func () {return new Promise(resolve => resolve(1))
}
复制代码
map
map
可以说是对Promise
最友好的一个函数了。
我们都知道,map
接收两个参数:
- 对每项元素执行的回调,回调结果的返回值将作为该数组中相应下标的元素
- 一个可选的回调函数
this
指向的参数
[1, 2, 3].map(item => item ** 2) // 对数组元素进行求平方
// > [1, 4, 9]
复制代码
上边是一个普通的map
执行,但是当我们的一些计算操作变为异步的:
[1, 2, 3].map(async item => item ** 2) // 对数组元素进行求平方
// > [Promise, Promise, Promise]
复制代码
这时候,我们获取到的返回值其实就是一个由Promise
函数组成的数组了。
所以为什么上边说map
函数为最友好的,因为我们知道,Promise
有一个函数为Promise.all
会将一个由Promise
组成的数组依次执行,并返回一个Promise
对象,该对象的结果为数组产生的结果集。
await Promise.all([1, 2, 3].map(async item => item ** 2))
// > [1, 4, 9]
复制代码
首先使用Promise.all
对数组进行包装,然后用await
获取结果。
reduce/reduceRight
reduce
的函数签名想必大家也很熟悉了,接收两个参数:
- 对每一项元素执行的回调函数,返回值将被累加到下次函数调用中,回调函数的签名:
accumulator
累加的值currentValue
当前正在处理的元素currentIndex
当前正在处理的元素下标 (感谢@NeurotoxinVX小伙伴的补充)array
调用reduce
的数组
- 可选的初始化的值,将作为
accumulator
的初始值
[1, 2, 3].reduce((accumulator, item) => accumulator + item, 0) // 进行加和
// > 6
复制代码
这个代码也是没毛病的,同样如果我们加和的操作也是个异步的:
[1, 2, 3].reduce(async (accumulator, item) => accumulator + item, 0) // 进行加和
// > Promise {<resolved>: "[object Promise]3"}
复制代码
这个结果返回的就会很诡异了,我们在回看上边的reduce
的函数签名
对每一项元素执行的回调函数,返回值将被累加到下次函数调用中
然后我们再来看代码,async (accumulator, item) => accumulator += item
这个在最开始也提到了,是Pormise
的语法糖,为了看得更清晰,我们可以这样写:
(accumulator, item) => new Promise(resolve =>resolve(accumulator += item)
)
复制代码
也就是说,我们reduce
的回调函数返回值其实就是一个Promise
对象
然后我们对Promise
对象进行+=
操作,得到那样怪异的返回值也就很合情合理了。
当然,reduce
的调整也是很轻松的:
await [1, 2, 3].reduce(async (accumulator, item) => await accumulator + item, 0)
// > 6
复制代码
我们对accumulator
调用await
,然后再与当前item
进行加和,在最后我们的reduce
返回值也一定是一个Promise
,所以我们在最外边也添加await
的字样
也就是说我们每次reduce
都会返回一个新的Promise
对象,在对象内部都会获取上次Promise
的结果。
我们调用reduce
实际上得到的是类似这样的一个Promise
对象:
new Promise(resolve => {let item = 3new Promise(resolve => {let item = 2new Promise(resolve => {let item = 1Promise.resolve(0).then(result => resolve(item + result))}).then(result => resolve(item + result))}).then(result => resolve(item + result))
})
复制代码
reduceRight
这个就没什么好说的了。。跟reduce
只是执行顺序相反而已
forEach
forEach
,这个应该是用得最多的遍历方法了,对应的函数签名:
callback
,对每一个元素进行调用的函数currentValue
,当前元素index
,当前元素下标array
,调用forEach
的数组引用
thisArg
,一个可选的回调函数this
指向
我们有如下的操作:
// 获取数组元素求平方后的值
[1, 2, 3].forEach(item => {console.log(item ** 2)
})
// > 1
// > 4
// > 9
复制代码
普通版本我们是可以直接这么输出的,但是如果遇到了Promise
// 获取数组元素求平方后的值
[1, 2, 3].forEach(async item => {console.log(item ** 2)
})
// > nothing
复制代码
forEach
并不关心回调函数的返回值,所以forEach
只是执行了三个会返回Promise
的函数
所以如果我们想要得到想要的效果,只能够自己进行增强对象属性了:
Array.prototype.forEachSync = async function (callback, thisArg) {for (let [index, item] of Object.entries(this)) {await callback(item, index, this)}
}await [1, 2, 3].forEachSync(async item => {console.log(item ** 2)
})// > 1
// > 4
// > 9
复制代码
await
会忽略非Promise
值,await 0
、await undefined
与普通代码无异
filter
filter
作为一个筛选数组用的函数,同样具有遍历的功能:
函数签名同forEach
,但是callback
返回值为true
的元素将被放到filter
函数返回值中去。
我们要进行一个奇数的筛选,所以我们这么写:
[1, 2, 3].filter(item => item % 2 !== 0)
// > [1, 3]
复制代码
然后我们改为Promise
版本:
[1, 2, 3].filter(async item => item % 2 !== 0)
// > [1, 2, 3]
复制代码
这会导致我们的筛选功能失效,因为filter
的返回值匹配不是完全相等的匹配,只要是返回值能转换为true
,就会被认定为通过筛选。
Promise
对象必然是true
的,所以筛选失效。
所以我们的处理方式与上边的forEach
类似,同样需要自己进行对象增强 但我们这里直接选择一个取巧的方式:
Array.prototype.filterSync = async function (callback, thisArg) {let filterResult = await Promise.all(this.map(callback))// > [true, false, true]return this.filter((_, index) => filterResult[index])
}await [1, 2, 3].filterSync(item => item % 2 !== 0)
复制代码
我们可以直接在内部调用map
方法,因为我们知道map
会将所有的返回值返回为一个新的数组。
这也就意味着,我们map
可以拿到我们对所有item
进行筛选的结果,true
或者false
。
接下来对原数组每一项进行返回对应下标的结果即可。
some
some
作为一个用来检测数组是否满足一些条件的函数存在,同样是可以用作遍历的
函数签名同forEach
,有区别的是当任一callback
返回值匹配为true
则会直接返回true
,如果所有的callback
匹配均为false
,则返回false
我们要判断数组中是否有元素等于2
:
[1, 2, 3].some(item => item === 2)
// > true
复制代码
然后我们将它改为Promise
[1, 2, 3].some(async item => item === 2)
// > true
复制代码
这个函数依然会返回true
,但是却不是我们想要的,因为这个是async
返回的Promise
对象被认定为true
。
所以,我们要进行如下处理:
Array.prototype.someSync = async function (callback, thisArg) {for (let [index, item] of Object.entries(this)) {if (await callback(item, index, this)) return true}return false
}
await [1, 2, 3].someSync(async item => item === 2)
// > true
复制代码
因为some
在匹配到第一个true
之后就会终止遍历,所以我们在这里边使用forEach
的话是在性能上的一种浪费。
同样是利用了await
会忽略普通表达式的优势,在内部使用for-of
来实现我们的需求
every
以及我们最后的一个every
函数签名同样与forEach
一样,
但是callback
的处理还是有一些区别的:
其实换一种角度考虑,every
就是一个反向的some
some
会在获取到第一个true
时终止
而every
会在获取到第一个false
时终止,如果所有元素均为true
,则返回true
我们要判定数组中元素是否全部大于3
[1, 2, 3].every(item => item > 3)
// > false
复制代码
很显然,一个都没有匹配到的,而且回调函数在执行到第一次时就已经终止了,不会继续执行下去。
我们改为Promise
版本:
[1, 2, 3].every(async => item > 3)
// > true
复制代码
这个必然是true
,因为我们判断的是Promise
对象
所以我们拿上边的someSync
实现稍微修改一下:
Array.prototype.everySync = async function (callback, thisArg) {for (let [index, item] of Object.entries(this)) {if (!await callback(item, index, this)) return false}return true
}
await [1, 2, 3].everySync(async item => item === 2)
// > false
复制代码
当匹配到任意一个false
时,直接返回false
,终止遍历。
后记
关于数组的这几个遍历方法。
因为map
和reduce
的特性,所以是在使用async
时改动最小的函数。
reduce
的结果很像一个洋葱模型
但对于其他的遍历函数来说,目前来看就需要自己来实现了。
四个*Sync
函数的实现:github.com/Jiasm/noteb…
参考资料
Array - JavaScript | MDN
数组的遍历你都会用了,那Promise版本的呢相关推荐
- 浅谈数组常见遍历方法
本文主要介绍数组常见遍历方法:forEach.map.filter.find.every.some.reduce,它们有个共同点:不会改变原始数组. 接下来都是使用底下的基础数组来实现一些方法: 累加 ...
- 遍历数组的方法和数组的遍历方法(3+10种)(下)
文章目录 简介 数组的遍历方法 1. forEach() 说明: 使用: 输出: 2. map()映射遍历 说明: 使用: 输出: 3. filter()过滤器遍历 说明: 使用: 输出: 4. so ...
- jquery数组的遍历
jquery数组的遍历 原始遍历(普通for) jquery对象函数遍历(对象.each) $("div").each(function(index,element){ }); j ...
- PHP数组循环遍历的四种方式
[(重点)数组循环遍历的四种方式] 1.使用for循环遍历数组 conut($arr);用于统计数组元素的个数. for循环只能用于遍历,纯索引数组!!!! 如果存在关 ...
- vue 循环遍历list_vue使用map代替Aarry数组循环遍历的方法
需求:根据主键id来找到对应的数组下标 原本的方法是使用for循环遍历该数组,变量 i 就是下标,问题在于,如果有多重for循环,就会导致性能大大下降,数据也容易出错 因此使用map,让数组(原本是l ...
- 元素均匀排列自动换行二维数组前端遍历
1.元素均匀排列并自动换行 display:flex; flex-wrap:wrap; 2.getFiled();取一行,取多行的话用getFiled('id',true); 3.二维数组前端遍历: ...
- java script 遍历数组_JavaScript中数组中遍历的方法
前言 最近看了好几篇总结数组中遍历方法的文章,然而"纸上得来终觉浅",决定此事自己干.于是小小总结,算是自己练手了. 各种数组遍历方法 数组中常用的遍历方法有四种,分别是: for ...
- Java的知识点16——数组概述和特点、数组声明、初始化、数组的遍历、for-each循环、数组的拷贝
数组的定义 数组是相同数据类型的有序集合.数组描述的是相同类型的若干个数据,按照一定的先后次序排列组合而成.其中,每一个数据称作一个元素,每个元素可以通过一个索引(下标)来访问它们.数组的三个基本特点 ...
- js 数组遍历符合条件跳出循环体_Javascript数组循环遍历之forEach详解
1.js 数组循环遍历. 数组循环变量,最先想到的就是 for(var i=0;i除此之外,也可以使用较简便的forEach 方式 2.forEach函数. Firefox 和Chrome 的Arra ...
最新文章
- 存clob为空的值_将网页文本(HTML)保存到ORACLE数据库CLOB字详解
- linux 无线网络配置工具wpa_supplicant与wireless-tools
- 如何使用阿里云容器服务保障容器的内存资源质量
- 商城项目使用到的主要技术分析
- ajax burp 乱码,burp suite中国乱码的解决方案
- 前端开发-4-HTML-tableform表单控制 标签
- mysql 编码和汉字存储占用字节问题的探索
- Android之Android Studio常用插件
- jzoj3463-军训【双重嵌套二分,随机数据水法】
- android实现截图功能吗,Android实现拍照截图功能
- 【LeetCode 剑指offer刷题】树题4:104 Maximum Depth of Binary Tree
- vue-cli开发Vue项目时定义环境变量需加VUE_APP前缀
- 针对全局的接口出入参加解密-AES/ECB/PKCS5Padding
- matlab 摄氏度符号怎么打
- EI收录中国期刊目录 各个版本的含义及收录例子-12年初版
- Python:whl安装包简介与制作
- Unity3D优化总结
- buuctf - crypto - Rabbit
- StateFlow-自动变速逻辑搭建
- Kingdian慧荣SM2256K AB主控固态硬盘卡住慢修复教程
热门文章
- Hibernate(2)——Hibernate的实现原理总结和对其模仿的demo
- [Android ] linux命令英文缩写的含义(方便记忆)
- [C#基础知识系列]专题十二:迭代器
- ModelBasedCompressiveSensing
- 回头验卦,占IT公司例中淘宝案例之总结
- django ---- models继承
- 一家大型公司的nginx配置
- python插件做nagios发报警邮件二
- 【前端】react and redux教程学习实践,浅显易懂的实践学习方法。
- Java 和 .NET 获得毫秒级长整型数值的差异和解决