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 相关文章推荐
xml 封装与解析(javascript和C#中)
Jul 26 Javascript
window.js 主要包含了页面的一些操作
Dec 23 Javascript
在jQuery中 常用的选择器介绍
Apr 16 Javascript
JS无限极树形菜单,json格式、数组格式通用示例
Jul 30 Javascript
smartcrop.js智能图片裁剪库
Oct 14 Javascript
js实现点击图片自动提交action的简单方法
Oct 16 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
Oct 12 Javascript
微信小程序跨页面数据传递事件响应实现过程解析
Dec 19 Javascript
jQuery实现的解析本地 XML 文档操作示例
Apr 30 jQuery
深入分析JavaScript 事件循环(Event Loop)
Jun 19 Javascript
vue绑定数字类型 value为数字的实例
Aug 31 Javascript
nuxt.js添加环境变量,区分项目打包环境操作
Nov 06 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+ajax 无刷新删除数据
2010/02/20 PHP
解析php多线程下载远程多个文件
2013/06/25 PHP
php中session过期时间设置及session回收机制介绍
2014/05/05 PHP
php使用mkdir创建多级目录入门例子
2014/05/10 PHP
PHP限制HTML内容中图片必须是本站的方法
2015/06/16 PHP
PHP 网站修改默认访问文件的nginx配置
2017/05/27 PHP
PHP 结合 Boostrap 结合 js 实现学生列表删除编辑及搜索功能
2019/05/21 PHP
JavaScript词法作用域与调用对象深入理解
2012/11/29 Javascript
JQuery在页面中添加和除移DOM示例代码
2013/06/24 Javascript
js改变img标签的src属性在IE下没反应的解决方法
2013/07/23 Javascript
Jquery实现Div上下移动示例
2014/04/23 Javascript
jQuery判断对象是否存在的方法
2015/02/05 Javascript
JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
2015/10/28 Javascript
JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法
2016/08/03 Javascript
seajs和requirejs模块化简单案例分析
2019/08/26 Javascript
通过javascript实现扫雷游戏代码实例
2020/02/09 Javascript
vue cli4下环境变量和模式示例详解
2020/04/09 Javascript
Python3 Random模块代码详解
2017/12/04 Python
django上传图片并生成缩略图方法示例
2017/12/11 Python
Python3获取拉勾网招聘信息的方法实例
2019/04/03 Python
Python3.5以上版本lxml导入etree报错的解决方案
2019/06/26 Python
python 工具 字符串转numpy浮点数组的实现
2020/03/14 Python
Python3-异步进程回调函数(callback())介绍
2020/05/02 Python
HTML最新标准HTML5总结(必看)
2016/06/13 HTML / CSS
美国最大的宠物用品零售商:PetSmart
2016/11/14 全球购物
越南电子产品购物网站:FPT Shop
2017/12/02 全球购物
医学毕业生自我鉴定
2013/10/30 职场文书
采购人员的个人自我评价
2014/01/16 职场文书
高中生国庆节演讲稿范文2014
2014/09/21 职场文书
餐厅服务员岗位职责
2015/02/09 职场文书
2015年银行客户经理工作总结
2015/04/01 职场文书
小学教研工作总结2015
2015/05/13 职场文书
大学毕业论文致谢词
2015/05/14 职场文书
浅谈JS和Nodejs中的事件驱动
2021/05/05 NodeJs
java设计模式--原型模式详解
2021/07/21 Java/Android
Pandas 数据编码的十种方法
2022/04/20 Python