Array.filter中如何正确使用Async

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

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是可能的，但它最初的工作方式看起来很奇怪。尽管并发控制仍然可用，但与其他异步功能相比，它们需要更多的计划去控制它。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Array数组对象中的forEach、map、filter及reduce详析

    前言 刚才某人问了我一个问题.map怎么遍历,我刷刷刷就是一顿写.遍历么,forEach么,妥妥的. var map = new Map(); map.set('item1', 'value1') map.set('item2', 'value2') map.forEach(function(value, key, map) { console.log("Key: %s, Value: %s", key, value); }); 好吧,我写完了之后,他发给我了一句话. [].forEa

  • JavaScript中利用Array filter() 方法压缩稀疏数组

    什么是稀疏数组 数组元素的索引不一定要连续的,它们之间可以有空缺.每个javaScript数组都有一个length属性.针对非稀疏数组,该属性就是数组元素的个数:针对稀疏数组,length比所有元素的个数要大. Array filter() 方法会跳过稀疏数组中缺少的元素,它的返回数组总是稠密的. (1)压缩稀疏数组的空缺: var dense = sparse.filter( function(currentValue) { return true; } ); (2)压缩稀疏数组的空缺,并且删

  • 5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例

    ECMAScript5标准发布于2009年12月3日,它带来了一些新的,改善现有的Array数组操作的方法.然而,这些新奇的数组方法并没有真正流行起来的,因为当时市场上缺乏支持ES5的浏览器. Array "Extras" 没有人怀疑这些方法的实用性,但写polyfill(PS:兼容旧版浏览器的插件)对他们来说是不值得的.它把"必须实现"变成了"最好实现".有人居然将这些数组方法称之为Array "Extras".哎! 但是,

  • php array_filter除去数组中的空字符元素

    除去数组中的空字符元素 复制代码 代码如下: <?php $str1_array=array('我们','','http://www.jb51.net','','1654',''); $str1_array=array_filter($str1_array); print_r($str1_array); ?> 显示结果: 复制代码 代码如下: Array ( [0] => 我们 [2] => http://www.jb51.net [4] => 1654 )

  • php中使用array_filter()函数过滤空数组的实现代码

    今天在翻看手册查询array_filter()的使用细节时,看到了个小关键点:If no callback is supplied, all entries of input equal to FALSE (see converting to boolean) will be removed. 如果没有给出回调函数,所有的等于 FALSE 的元素将会被移除掉,这不正好可以用来过滤一些有空元素的数组吗?连忙写个例子测试一下想法: 复制代码 代码如下: $entry = array( 0 => '蓝

  • Javascript中关于Array.filter()的妙用详解

    前言 和map类似,Array的filter也接收一个函数.但是和map不同的是, filter把传入的函数依次作用于每个元素,然后根据返回值是 true 还是false决定保留还是丢弃该元素. 实例介绍 例如,在一个Array中,删掉偶数,只保留奇数,可以这么写: var arr = [1, 2, 4, 5, 6, 9, 10, 15]; var r = arr.filter(function (x) { return x % 2 !== 0; }); r; // [1, 5, 9, 15]

  • 巧用php中的array_filter()函数去掉多维空值的代码分享

    其实我们可以利用array_filter函数轻松去掉多维空值,而数组的下标没有改变,下面是举例用法: <?php $array = array( 0 => '滔哥', 1 => false, 2 => 1, 3 => null, 4 => '', 5 => 'http://www.jb51.net', 6 => '0' ); print_r(array_filter($array)); ?> 上面代码输出结果为: Array ( [0] => 滔

  • Array.filter中如何正确使用Async

    1. 如何仅保留满足异步条件的元素 在第一篇文章中,我们介绍了 async / await 如何帮助处理异步事件,但在异步处理集合时却无济于事.在本文中,我们将研究该filter函数,它可能是支持异步函数的最直观的方法. 2. Array.filter 该filter函数仅保留通过条件的元素.它得到一个断言( predicate )函数,并且此函数返回 true / false 值.结果集合仅包含断言( predicate )返回 true 的元素. const arr = [1, 2, 3,

  • JS循环中正确使用async、await的姿势分享

    JS循环中正确使用async、await的姿势分享

    目录 概览(循环方式 - 常用) 声明遍历的数组和异步方法 for 循环中使用 map 中使用 forEach 中使用 filter 中使用 附使用小结 总结 概览(循环方式 - 常用) for map forEach filter 声明遍历的数组和异步方法 声明一个数组:️ const skills = ['js', 'vue', 'node', 'react'] 再声明一个promise的异步代码: ️ function getSkillPromise (value) { return ne

  • JavaScript中错误正确处理方式小结你用对了吗

    JavaScript中错误正确处理方式小结你用对了吗

    JavaScript的事件驱动范式增添了丰富的语言,也是让使用JavaScript编程变得更加多样化.如果将浏览器设想为JavaScript的事件驱动工具,那么当错误发生时,某个事件就会被抛出.理论上可以认为这些发生的错误只是JavaScript中的简单事件. 本文将会讨论客户端JavaScript中的错误处理.主要介绍JavaScript中的易犯错误.错误处理.异步代码编写等内容. 下面就让我们一起看看如何正确处理JavaScript中的错误. Demo演示 本文中使用的demo可以在GitH

  • 如何在Express4.x中愉快地使用async的方法

    前言 为了能够更好地处理异步流程,一般开发者会选择 async 语法.在 express 框架中可以直接利用 async 来声明中间件方法,但是对于该中间件的错误,无法通过错误捕获中间件来劫持到. 错误处理中间件 const express = require('express'); const app = express(); const PORT = process.env.PORT || 3000; app.get('/', (req, res) => { const message =

  • Java filter中的chain.doFilter使用详解

    目录 filter中的chain.doFilter使用 chain.doFilter作用 举例说明 Filter中chain.doFilter(req, res)的理解 用法 filter中的chain.doFilter使用 chain.doFilter作用 1.一般filter都是一个链,web.xml 里面配置了几个就有几个.一个一个的连在一起 request -> filter1 -> filter2 ->filter3 -> -. -> request resourc

  • js删除Array数组中指定元素的两种方法

    本节内容: js删除Array数组中指定元素 方法一, /* * 方法:Array.remove(dx) 通过遍历,重构数组 * 功能:删除数组元素. * 参数:dx删除元素的下标. */ Array.prototype.remove=function(dx) { if(isNaN(dx)||dx>this.length){return false;} for(var i=0,n=0;i<this.length;i++) { if(this[i]!=this[dx]) { this[n++]=

  • vue props default Array或是Object的正确写法说明

    1.错误写法 demo:{ type:Array, default:[] } eslint语法报错: Invalid default value for prop "demo": Props with type Object/Array must use a factory function to return the default value. 2.正确的写法应该是: demo: { type: Array, default: function () { return [] } }

  • IDEA中如何正确快速打jar包的方式

    1.打开idea 如图所示:点击箭头所指的位置: 2.选择你自己要打包的available element 后 如图所示 逐步点击即可 进入如下页面 点击ok 打包完成 来到主页面 对新打的jar包 build 选择刚打的新包build 此时jar包完成 在如下界面查看 ps:idea打jar包方式, 方式一 使用idea自带的打包方式 点击File ->project structure 选择Artifacts 然后点击绿色加号 按图一次选择 点击 完成后会弹出此界面  此时需要注意 信息的填

随机推荐