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 相关文章推荐
HTML中Select不用Disabled实现ReadOnly的效果
Apr 07 Javascript
JavaScript中使用Substring删除字符串最后一个字符
Nov 03 Javascript
jquery Tab效果和动态加载的简单实例
Dec 11 Javascript
JavaScript中的方法重载实例
Mar 16 Javascript
js变形金刚文字特效代码分享
Aug 20 Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
Aug 10 Javascript
vue的props实现子组件随父组件一起变化
Oct 27 Javascript
weex slider实现滑动底部导航功能
Aug 28 Javascript
Vue官方文档梳理之全局配置
Nov 22 Javascript
详解JavaScript中的强制类型转换
Apr 15 Javascript
vue中的计算属性和侦听属性
Nov 06 Javascript
vue添加自定义右键菜单的完整实例
Dec 08 Vue.js
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
Dedecms常用函数解析
2008/02/01 PHP
php中使用parse_url()对网址进行解析的实现代码(parse_url详解)
2012/01/03 PHP
php实现文件下载功能的几个代码分享
2014/05/10 PHP
php随机抽奖实例分析
2015/03/04 PHP
PHP实现的微信APP支付功能示例【基于TP5框架】
2019/09/16 PHP
同域jQuery(跨)iframe操作DOM(示例代码)
2013/12/13 Javascript
JS实现的多张图片轮流播放幻灯片效果
2016/07/22 Javascript
js实现常用排序算法
2016/08/09 Javascript
JS返回只包含数字类型的数组实例分析
2016/12/16 Javascript
jQuery实现链接的title快速出现的方法
2017/02/20 Javascript
node.js入门教程之querystring模块的使用方法
2017/02/27 Javascript
node跨域请求方法小结
2017/08/25 Javascript
node下使用UglifyJS压缩合并JS文件的方法
2018/03/07 Javascript
Vue验证码60秒倒计时功能简单实例代码
2018/06/22 Javascript
实现高性能javascript的注意事项
2019/05/27 Javascript
过滤器vue.filters的使用方法实现
2019/09/18 Javascript
ligerUI的ligerDialog关闭刷新的方法
2019/09/27 Javascript
Vue程序化的事件监听器(实例方案详解)
2020/01/07 Javascript
[01:04:05]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Django在Win7下的安装及创建项目hello word简明教程
2014/07/14 Python
Windows下PyMongo下载及安装教程
2015/04/27 Python
Python2.x利用commands模块执行Linux shell命令
2016/03/11 Python
简单谈谈Python中的闭包
2016/11/30 Python
Python中文分词工具之结巴分词用法实例总结【经典案例】
2017/04/15 Python
python: line=f.readlines()消除line中\n的方法
2018/03/19 Python
Python学习笔记之pandas索引列、过滤、分组、求和功能示例
2019/06/03 Python
Python操作Excel把数据分给sheet
2020/05/20 Python
香港网上花店:FlowerAdvisor香港
2019/05/30 全球购物
C++的几个面试题附答案
2016/08/03 面试题
北京泡泡网网络有限公司.net面试题
2012/07/17 面试题
大学生军训自我评价分享
2013/11/09 职场文书
作风建设年活动总结
2014/08/27 职场文书
党的群众路线教育实践活动个人整改措施
2014/10/27 职场文书
开平碉楼导游词
2015/02/06 职场文书
医院员工辞职信范文
2015/05/12 职场文书
公司年会主持词范文!
2019/05/07 职场文书