在 Array.filter 中正确使用 Async
本文译自How to use async functions with Array.filter in Javascript - Tamás Sallai。
0. 如何仅保留满足异步条件的元素
在第一篇文章中,我们介绍了 async / await 如何帮助处理异步事件,但在异步处理集合时却无济于事。在本文中,我们将研究该filter
函数,它可能是支持异步函数的最直观的方法。
1. 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
2. filter 结合 map 使用
这次的异步版本要复杂一些,它分为两个阶段。第一个通过断言函数异步地映射数组,从而生成true / false 值。然后第二步是利用第一步的结果同步 filter
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]));
并发
上面的实现同时运行所有断言函数。通常,这很好,但是与所有其他功能一样,它可能会使某些资源变得过分紧张。幸运的是,由于上述实现依赖于此map
,因此可以使用相同的并发控件。
4. filter 结合 reduce 使用
除了使用异步map
与同步之外filter
,异步reduce
也可以完成这项工作。由于它只是一个功能,因此即使没有提供相同级别的控制,结构也更加容易。
首先,从一个空数组([]
)开始。然后通过断言函数运行下一个元素,如果通过则将其追加到数组。如果没有,请跳过它。
// concurrently
const asyncFilter = async (arr, predicate) =>
arr.reduce(async (memo, e) =>
await predicate(e) ? [...await memo, e] : memo
, []);
请注意,await predicate(e)
在 await memo
之前,这意味着这些将并行调用。
顺序处理
要在调用下一个谓词函数之前等待其结束,请更改await
的顺序:
// sequentially
const asyncFilter = async (arr, predicate) =>
arr.reduce(async (memo, e) =>
[...await memo, ...await predicate(e) ? [e] : []]
, []);
此实现等待上一个元素,然后根据断言(...[e]
或...[]
)的结果有条件地附加一个元素。
5. 结论
虽然异步filter
是可能的,但它最初的工作方式看起来很奇怪。尽管并发控制仍然可用,但与其他异步功能相比,它们需要更多的计划去控制它。
推荐阅读
在 Array.filter 中正确使用 Async的更多相关文章
- 如何在 Array.forEach 中正确使用 Async
本文译自How to use async functions with Array.forEach in Javascript - Tamás Sallai. 0. 如何异步遍历元素 在第一篇文章中, ...
- JavaScript笔记Array.filter(Boolean)
ECMAScirpt5 中 Array 类中的 filter 方法使用目的是移除所有的 ”false“ 类型元素 (false, null, undefined, 0, NaN or an empt ...
- js array filter pop push shift unshift方法
JavaScript Array filter() 方法 JavaScript Array 对象 实例 返回数组 ages 中所有元素都大于 18 的元素: var ages = [32, 33, ...
- array.fliter无法正确过滤出我想要的数组
var checked_list = state.files.filter(function(item, id){ // console.log('click the ' + item.id); re ...
- IoC容器Autofac(5) - Autofac在Asp.net MVC Filter中的应用
Autofac结合EF在MVC中的使用,上一篇IoC容器Autofac(4) - Autofact + Asp.net MVC + EF Code First(附源码)已经介绍了.但是只是MVC中Co ...
- 浅谈JavaScript中的defer,async
引言 开始重读<<JavaScript高级程序设计>>一书,看到关于JavaScript中关于defer.async的部分.网上查询了点资料,觉得蛮好的.现在总结下. defe ...
- 在Java filter中调用service层方法
在项目中遇到一个问题,在 Filter中注入 Serivce失败,注入的service始终为null.如下所示: public class WeiXinFilter implements Filter ...
- 如何在Java Filter 中注入 Service
在项目中遇到一个问题,在 Filter中注入 Serivce失败,注入的service始终为null.如下所示: public class WeiXinFilter implements Filter ...
- android中正确导入第三方jar包
android中正确导入第三方jar包 andriod中如果引入jar包的方式不对就会出现一些奇怪的错误. 工作的时候恰好有一个jar包需要调用,结果用了很长时间才解决出现的bug. 刚开始是这样引用 ...
随机推荐
- C语言程序设计(九) 指针
第九章 指针 C程序中的变量都是存储在计算机内存特定的存储单元中的,内存中的每个单元都有唯一的地址 通过取地址运算符&可以获得变量的地址 //L9-1 #include <stdio.h ...
- Django _web框架本质
Web框架本质 我们可以这样理解:所有的Web应用本质上就是一个socket服务端,而用户的浏览器就是一个socket客户端. 这样我们就可以自己实现Web框架了. socket服务端 import ...
- 为什么vue中的data用return返回呢?
不使用return包裹的数据会在项目的全局可见,会造成变量污染:使用return包裹后数据中变量只在当前组件中生效,不会影响其他组件. 当一个组件被定义, data 必须声明为返回一个初始数据对象的函 ...
- js获得用户网络状况API
js获得用户网络状况API 这是一个实验中的功能,目前还有许多浏览器不兼容此功能某些浏览器尚在开发中 1. 网络类型 effectiveType: 可以得到2g,3g,4g connectionInf ...
- IntelliJ IDEA 常用快捷键(转载)
转自:http://www.open-open.com/lib/view/open1396578860887.html Ctrl+Shift + Enter,语句完成“!”,否定完成,输入表达式时按 ...
- 作为一位Vue工程师,这些开发技巧你都会吗?
路由参数解耦 一般在组件内使用路由参数,大多数人会这样做: export default { methods: { getParamsId() { return this.$route.params. ...
- Natas12 Writeup(文件上传漏洞)
Natas12: 文件上传页面,源码如下: function genRandomString() { $length = 10; $characters = "0123456789abcde ...
- ASP.NET Core 3.x 中间件流程与路由体系
中间件分类 ASP.NET Core 中间件的配置方法可以分为以上三种,对应的Helper方法分别是:Run(), Use(), Map(). Run(),使用Run调用中间件的时候,会直接返回一个响 ...
- IDEA编写 Scala时没有语法检查和错误提示
#问题描述 在IDEA中写scala程序时,一些明显的语法错误不进行检查,没有像写Java时的红线什么的,当编译运行时,编译失败. https://blog.csdn.net/weizheng1000 ...
- mysql系列--sql实现原理
count(*) MyISAM 引擎把⼀个表的总⾏数存在了磁盘上,因此执⾏ count(*) 的时候会直接返回这个数,效率很⾼:但是加了条件则不能快速返回⽽ InnoDB 引擎就麻烦了,它执⾏ cou ...