本文译自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的更多相关文章

  1. 如何在 Array.forEach 中正确使用 Async

    本文译自How to use async functions with Array.forEach in Javascript - Tamás Sallai. 0. 如何异步遍历元素 在第一篇文章中, ...

  2. JavaScript笔记Array.filter(Boolean)

    ECMAScirpt5 中 Array 类中的 filter 方法使用目的是移除所有的 ”false“ 类型元素  (false, null, undefined, 0, NaN or an empt ...

  3. js array filter pop push shift unshift方法

    JavaScript Array filter() 方法  JavaScript Array 对象 实例 返回数组 ages 中所有元素都大于 18 的元素: var ages = [32, 33,  ...

  4. array.fliter无法正确过滤出我想要的数组

    var checked_list = state.files.filter(function(item, id){ // console.log('click the ' + item.id); re ...

  5. IoC容器Autofac(5) - Autofac在Asp.net MVC Filter中的应用

    Autofac结合EF在MVC中的使用,上一篇IoC容器Autofac(4) - Autofact + Asp.net MVC + EF Code First(附源码)已经介绍了.但是只是MVC中Co ...

  6. 浅谈JavaScript中的defer,async

    引言 开始重读<<JavaScript高级程序设计>>一书,看到关于JavaScript中关于defer.async的部分.网上查询了点资料,觉得蛮好的.现在总结下. defe ...

  7. 在Java filter中调用service层方法

    在项目中遇到一个问题,在 Filter中注入 Serivce失败,注入的service始终为null.如下所示: public class WeiXinFilter implements Filter ...

  8. 如何在Java Filter 中注入 Service

    在项目中遇到一个问题,在 Filter中注入 Serivce失败,注入的service始终为null.如下所示: public class WeiXinFilter implements Filter ...

  9. android中正确导入第三方jar包

    android中正确导入第三方jar包 andriod中如果引入jar包的方式不对就会出现一些奇怪的错误. 工作的时候恰好有一个jar包需要调用,结果用了很长时间才解决出现的bug. 刚开始是这样引用 ...

随机推荐

  1. C语言程序设计(九) 指针

    第九章 指针 C程序中的变量都是存储在计算机内存特定的存储单元中的,内存中的每个单元都有唯一的地址 通过取地址运算符&可以获得变量的地址 //L9-1 #include <stdio.h ...

  2. Django _web框架本质

    Web框架本质 我们可以这样理解:所有的Web应用本质上就是一个socket服务端,而用户的浏览器就是一个socket客户端. 这样我们就可以自己实现Web框架了. socket服务端 import  ...

  3. 为什么vue中的data用return返回呢?

    不使用return包裹的数据会在项目的全局可见,会造成变量污染:使用return包裹后数据中变量只在当前组件中生效,不会影响其他组件. 当一个组件被定义, data 必须声明为返回一个初始数据对象的函 ...

  4. js获得用户网络状况API

    js获得用户网络状况API 这是一个实验中的功能,目前还有许多浏览器不兼容此功能某些浏览器尚在开发中 1. 网络类型 effectiveType: 可以得到2g,3g,4g connectionInf ...

  5. IntelliJ IDEA 常用快捷键(转载)

    转自:http://www.open-open.com/lib/view/open1396578860887.html Ctrl+Shift + Enter,语句完成“!”,否定完成,输入表达式时按 ...

  6. 作为一位Vue工程师,这些开发技巧你都会吗?

    路由参数解耦 一般在组件内使用路由参数,大多数人会这样做: export default { methods: { getParamsId() { return this.$route.params. ...

  7. Natas12 Writeup(文件上传漏洞)

    Natas12: 文件上传页面,源码如下: function genRandomString() { $length = 10; $characters = "0123456789abcde ...

  8. ASP.NET Core 3.x 中间件流程与路由体系

    中间件分类 ASP.NET Core 中间件的配置方法可以分为以上三种,对应的Helper方法分别是:Run(), Use(), Map(). Run(),使用Run调用中间件的时候,会直接返回一个响 ...

  9. IDEA编写 Scala时没有语法检查和错误提示

    #问题描述 在IDEA中写scala程序时,一些明显的语法错误不进行检查,没有像写Java时的红线什么的,当编译运行时,编译失败. https://blog.csdn.net/weizheng1000 ...

  10. mysql系列--sql实现原理

    count(*) MyISAM 引擎把⼀个表的总⾏数存在了磁盘上,因此执⾏ count(*) 的时候会直接返回这个数,效率很⾼:但是加了条件则不能快速返回⽽ InnoDB 引擎就麻烦了,它执⾏ cou ...