Aray.filterの中でAyncを正しく使うにはどうすればいいですか?


1.非同期条件を満たす要素だけをどのように保持するか
最初の文章では、async/awaitがどのように非同期の事件を処理するのを助けるかを紹介しましたが、非同期で集合を処理しても無駄です。本論文では,非同期関数をサポートする最も直感的な方法であるかもしれないfilter関数を研究する。
2.アラy.filter
このfilter関数は条件を通る要素だけを保持します。これは断言関数を得て、この関数は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
または1行での実装:
const async Filter=async=>Promise.all(arr.map(predicate)
・then((results)=>arr.filter((u)v,index=>result[index])

併発する
上の実装はすべての断言関数を同時に実行します。通常、これはとても良いですが、他のすべての機能と同じように、いくつかのリソースが過剰に緊張する可能性があります。幸い、上記の実装はこのmapに依存しているので、同じ同時コントロールを使用することができます。
4.filter結合reduce使用
非同期mapと同期を使う以外にも、非同期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は可能ですが、最初の働き方はおかしいと思います。同時制御はまだ可能ですが、他の非同期機能と比べて、より多くの計画が必要です。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。