>  기사  >  웹 프론트엔드  >  메소드 체인: filter().map()이 비효율적인가요?

메소드 체인: filter().map()이 비효율적인가요?

Mary-Kate Olsen
Mary-Kate Olsen원래의
2024-11-05 12:17:02936검색

메소드 체이닝

Javascript에서 Array 데이터의 값을 편집하고 제거하기 위해 Array.prototype.filter() 및 Array.prototype.map()을 사용하는 코드를 본 적이 있을 것입니다

예:

[1,2,3]
.map((mapped) => mapped + 1)
.filter((filtered) => filtered > 1)

질문

저는 이러한 메서드 체이닝이 각 반복마다 배열의 값을 반복하는지, 아니면 v8 엔진이 내부적으로 데이터 집계를 수행하여 작업을 최적화하는지 항상 궁금했습니다.

그래서 작은 조사를 해봤습니다.

어떻게?

console.time과 console.timeEnd를 이용하여 Method Chain 유무에 관계없이 10번의 평균 실행 시간을 측정했습니다.
조사에는 크롬 브라우저를 사용했습니다.

console.time('Filter Execution Time')
// YOUR CODE
console.timeEnd('Filter Execution Time')

결과: 메서드 체이닝은 작업을 집계하지 않습니다.

- Method Chain(A) No Method Chain(B) Aggregate Logic(C)
Iterate 10000000 values 4656 ms 4733 ms 169 ms
Iterate 100000 values 27 ms 24 ms 4 ms

보시다시피, 메소드 체인이 있거나 없는 결과는 큰 차이를 나타내지 않은 반면, 로직을 집계하면 결과가 더 빨라졌습니다.

코드-A. map() 및 filter()와 함께 메소드 체이닝 사용

console.time('Filter Execution Time')
const result = new Array()
.fill(1).map((e) => e + 1)
.filter((e) => e !== 1)
console.timeEnd('Filter Execution Time')

코드-B. map() 및 filter() 분리(메소드 체이닝 없음)

console.time('Filter Execution Time')
const mapResult = new Array().fill(1).map((e) => e + 1)
const result = mapResult.filter((e) => e !== 1)
console.timeEnd('Filter Execution Time')

코드-C. 집계 논리

console.time('Filter Execution Time')
const result = []
new Array().fill(1).forEach((e) =>  {
    if (e !== 1) result.push(e)
})
console.timeEnd('Filter Execution Time')

하지만 Method Chain은 편리하지 않나요?

그런 생각을 하시는 분들을 위해 위와 마찬가지로 코드 패턴 A, B, C를 기준으로 100회부터 100,000회까지의 반복 횟수마다 평균 시간을 10초 단위로 밀리초 단위로 계산하여 차트를 만들었습니다.

조사 결과

  1. 어차피 100~1,000회 정도로 반복 횟수가 크지 않으면 별 차이가 없습니다.

  2. 반복 횟수가 1,000,000과 같이 기하급수적으로 늘어나는 것이 중요합니다.

Method Chain: filter().map() is inefficient?

결론

Method Chaining은 연산을 집계하지 않고 반복 횟수가 기하급수적으로 늘어남에 따라 결과의 차이가 커집니다.

따라서 반복 횟수가 적을 때는 메소드 체인을 사용하여 편리함을 얻는 것이 좋지만, 많은 양의 데이터를 처리할 경우에는 다음을 수행해야 한다고 말하는 것이 타당하다고 생각합니다. 메소드 체인 없이 알고리즘을 신중하게 고려하십시오.

읽어주셔서 감사합니다!

위 내용은 메소드 체인: filter().map()이 비효율적인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.