Array.filter中如何正确使用Async


Posted in Javascript onNovember 04, 2020

1. 如何仅保留满足异步条件的元素

在第一篇文章中,我们介绍了 async / await 如何帮助处理异步事件,但在异步处理集合时却无济于事。在本文中,我们将研究该filter函数,它可能是支持异步函数的最直观的方法。

2. Array.filter

该filter函数仅保留通过条件的元素。它得到一个断言( predicate )函数,并且此函数返回 true / false 值。结果集合仅包含断言( predicate )返回 true 的元素。

const arr = [1, 2, 3, 4, 5];

const syncRes = arr.filter((i) => {
	return i % 2 === 0;
});
console.log(syncRes);
// 2,4

3. filter 结合 map 使用

这次的异步版本要复杂一些,它分为两个阶段。第一个通过断言函数异步地映射数组,从而生成true / false 值。然后第二步是利用第一步的结果同步 filter

Array.filter中如何正确使用Async

const arr = [1, 2, 3, 4, 5];

const asyncFilter = async (arr, predicate) => {
	const results = await Promise.all(arr.map(predicate));

	return arr.filter((_v, index) => results[index]);
}

const asyncRes = await asyncFilter(arr, async (i) => {
	await sleep(10);
	return i % 2 === 0;
});

console.log(asyncRes);
// 2,4

或单行实现:

const asyncFilter = async (arr, predicate) => Promise.all(arr.map(predicate))
.then((results) => arr.filter((_v, index) => results[index]));

Array.filter中如何正确使用Async

并发

上面的实现同时运行所有断言函数。通常,这很好,但是与所有其他功能一样,它可能会使某些资源变得过分紧张。幸运的是,由于上述实现依赖于此map,因此可以使用相同的并发控件。

4. filter 结合 reduce 使用

除了使用异步map与同步之外filter,异步reduce 也可以完成这项工作。由于它只是一个功能,因此即使没有提供相同级别的控制,结构也更加容易。

首先,从一个空数组([])开始。然后通过断言函数运行下一个元素,如果通过则将其追加到数组。如果没有,请跳过它。

Array.filter中如何正确使用Async

// concurrently
const asyncFilter = async (arr, predicate) => 
	arr.reduce(async (memo, e) =>
		await predicate(e) ? [...await memo, e] : memo
	, []);

Array.filter中如何正确使用Async

请注意,await predicate(e) 在 await memo 之前,这意味着这些将并行调用。

顺序处理

要在调用下一个谓词函数之前等待其结束,请更改await 的顺序:

// sequentially
const asyncFilter = async (arr, predicate) => 
	arr.reduce(async (memo, e) => 
		[...await memo, ...await predicate(e) ? [e] : []]
	, []);

此实现等待上一个元素,然后根据断言(...[e]或...[])的结果有条件地附加一个元素。

Array.filter中如何正确使用Async

5. 结论

虽然异步filter是可能的,但它最初的工作方式看起来很奇怪。尽管并发控制仍然可用,但与其他异步功能相比,它们需要更多的计划去控制它。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
论坛特效代码收集(落伍转发-不错)
Dec 02 Javascript
JavaScript中的Document文档对象
Jan 16 Javascript
走出JavaScript初学困境—js初学
Dec 29 Javascript
jQuery 使用手册(二)
Sep 23 Javascript
JavaScript自动设置IFrame高度的小例子
Jun 08 Javascript
基于jQuery实现文本框缩放以及上下移动功能
Nov 24 Javascript
JS阻止事件冒泡行为和闭包的方法
Jun 16 Javascript
微信JSSDK调用微信扫一扫功能的方法
Jul 25 Javascript
深入探究angular2 UI组件之primeNG用法
Jul 26 Javascript
bootstrap modal+gridview实现弹出框效果
Aug 15 Javascript
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
Sep 14 Javascript
详解KOA2如何手写中间件(装饰器模式)
Oct 11 Javascript
JavaScript setTimeout()基本用法有哪些
Nov 04 #Javascript
vant-ui组件调用Dialog弹窗异步关闭操作
Nov 04 #Javascript
通过实例了解Render Props回调地狱解决方案
Nov 04 #Javascript
vant中的toast层级改变操作
Nov 04 #Javascript
vant中的toast轻提示实现代码
Nov 04 #Javascript
JavaScript快速调试的两个技巧
Nov 04 #Javascript
如何实现小程序与小程序之间的跳转
Nov 04 #Javascript
You might like
php mail to 配置详解
2014/01/16 PHP
ThinkPHP调试模式与日志记录概述
2014/08/22 PHP
PDO::beginTransaction讲解
2019/01/27 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
完美解决JS中汉字显示乱码问题(已解决)
2006/12/27 Javascript
Jquery post传递数组方法实现思路及代码
2013/04/28 Javascript
JavaScript创建一个object对象并操作对象属性的用法
2015/03/23 Javascript
jQuery解决$符号命名冲突
2016/06/18 Javascript
JS实现点击拉拽轮播图pc端移动端适配
2018/09/05 Javascript
详解vue引入子组件方法
2019/02/12 Javascript
Angular中innerHTML标签的样式不起作用的原因解析
2019/06/18 Javascript
Vue2.0实现简单分页及跳转效果
2019/07/29 Javascript
vue获取data数据改变前后的值方法
2019/11/07 Javascript
ES6中Promise的使用方法实例总结
2020/02/18 Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
2020/05/06 Javascript
[01:08:43]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第一场 1月9日
2021/03/11 DOTA
python的类变量和成员变量用法实例教程
2014/08/25 Python
在Python中使用列表生成式的教程
2015/04/27 Python
Python编写生成验证码的脚本的教程
2015/05/04 Python
python修改操作系统时间的方法
2015/05/18 Python
Python文件及目录操作实例详解
2015/06/04 Python
Pyspider中给爬虫伪造随机请求头的实例
2018/05/07 Python
使用Python将Mysql的查询数据导出到文件的方法
2019/02/25 Python
python实现合并两个排序的链表
2019/03/03 Python
使用OpCode绕过Python沙箱的方法详解
2019/09/03 Python
Python 实现文件读写、坐标寻址、查找替换功能
2019/09/11 Python
tensorboard实现同时显示训练曲线和测试曲线
2020/01/21 Python
Python实现初始化不同的变量类型为空值
2020/06/02 Python
Python DES加密实现原理及实例解析
2020/07/17 Python
Python安装并操作redis实现流程详解
2020/10/13 Python
市场部专员岗位职责
2013/11/30 职场文书
故意杀人罪辩护词
2015/05/21 职场文书
2015民办小学年度工作总结
2015/05/26 职场文书
pytorch训练神经网络爆内存的解决方案
2021/05/22 Python
详解运行Python的神器Jupyter Notebook
2021/06/03 Python
MySQL 用 limit 为什么会影响性能
2021/09/15 MySQL