在Array.filter中使用Async的正確方法

本篇文章給大家分享的是有關(guān)在Array.filter中使用Async的正確方法，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

1. 如何僅保留滿足異步條件的元素

在第一篇文章中，我們介紹了 async / await 如何幫助處理異步事件，但在異步處理集合時(shí)卻無濟(jì)于事。在本文中，我們將研究該filter函數(shù)，它可能是支持異步函數(shù)的最直觀的方法。

2. Array.filter

該filter函數(shù)僅保留通過條件的元素。它得到一個(gè)斷言( predicate )函數(shù)，并且此函數(shù)返回 true / false 值。結(jié)果集合僅包含斷言( 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 結(jié)合 map 使用

這次的異步版本要復(fù)雜一些，它分為兩個(gè)階段。第一個(gè)通過斷言函數(shù)異步地映射數(shù)組，從而生成true / false 值。然后第二步是利用第一步的結(jié)果同步 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

或單行實(shí)現(xiàn)：

const asyncFilter = async (arr, predicate) => Promise.all(arr.map(predicate))
.then((results) => arr.filter((_v, index) => results[index]));

并發(fā)

上面的實(shí)現(xiàn)同時(shí)運(yùn)行所有斷言函數(shù)。通常，這很好，但是與所有其他功能一樣，它可能會(huì)使某些資源變得過分緊張。幸運(yùn)的是，由于上述實(shí)現(xiàn)依賴于此map，因此可以使用相同的并發(fā)控件。

4. filter 結(jié)合 reduce 使用

除了使用異步map與同步之外filter，異步reduce 也可以完成這項(xiàng)工作。由于它只是一個(gè)功能，因此即使沒有提供相同級(jí)別的控制，結(jié)構(gòu)也更加容易。

首先，從一個(gè)空數(shù)組（[]）開始。然后通過斷言函數(shù)運(yùn)行下一個(gè)元素，如果通過則將其追加到數(shù)組。如果沒有，請(qǐng)?zhí)^它。

// concurrently
const asyncFilter = async (arr, predicate) => 
	arr.reduce(async (memo, e) =>
		await predicate(e) ? [...await memo, e] : memo
	, []);

請(qǐng)注意，await predicate(e) 在 await memo 之前，這意味著這些將并行調(diào)用。

順序處理

要在調(diào)用下一個(gè)謂詞函數(shù)之前等待其結(jié)束，請(qǐng)更改await 的順序：

// sequentially
const asyncFilter = async (arr, predicate) => 
	arr.reduce(async (memo, e) => 
		[...await memo, ...await predicate(e) ? [e] : []]
	, []);

此實(shí)現(xiàn)等待上一個(gè)元素，然后根據(jù)斷言（...[e]或...[]）的結(jié)果有條件地附加一個(gè)元素。

5. 結(jié)論

雖然異步filter是可能的，但它最初的工作方式看起來很奇怪。盡管并發(fā)控制仍然可用，但與其他異步功能相比，它們需要更多的計(jì)劃去控制它。

以上就是在Array.filter中使用Async的正確方法，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見到或用到的。希望你能通過這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注億速云行業(yè)資訊頻道。