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 맵 과 결합 하여 사용
이번 비동기 버 전 은 좀 복잡 해 야 한다.그것 은 두 단계 로 나 뉜 다.첫 번 째 는 단언 함 수 를 통 해 배열 을 비동기 적 으로 매 핑 하여 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]));

병발 하 다
위의 실현 은 모든 단언 함 수 를 동시에 실행 합 니 다.보통 이것 은 좋 지만 모든 다른 기능 과 마찬가지 로 일부 자원 을 지나치게 긴장 시 킬 수 있다.다행스럽게도 이 맵 에 의존 하기 때문에 같은 병행 컨트롤 을 사용 할 수 있 습 니 다.
4.filter 결합 reduce 사용
비동기 맵 과 동기 화 를 사용 하 는 것 외 에 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 는 가능 하지만 최초의 작업 방식 은 이상 하 게 보 였 다.병발 통 제 는 여전히 사용 할 수 있 지만 다른 비동기 기능 에 비해 더 많은 계획 이 필요 하 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.