js 배열 탐색의 8가지 방법 및 성능 분석(코드 포함)

이전 글에서는 js에서 두 변수 간 값을 교환하는 11가지 방법에 대한 요약 및 성능 분석을 소개했습니다. 오늘은 js 배열 순회에 대한 8가지 방법과 성능 분석을 공유하겠습니다. ., 내용을 직접 살펴보겠습니다.

JS 배열 순회 방법

JS 배열 순회는 기본적으로 forin, foreach, forof, map 및 기타 방법에 대한 소개입니다. 이 기사의 분석 및 성능 분석에 사용된 여러 가지 배열 순회 방법을 소개합니다.

첫 번째 유형: 일반 for 루프 배열 탐색

코드는 다음과 같습니다.

for(j = 0; j < arr.length; j++) {
   
}

간단한 설명:
가장 간단하고 가장 자주 사용되는 유형이지만 성능이 약하지는 않습니다. 아직 최적화의 여지가 있습니다

두 번째: for 루프 배열 탐색의 최적화된 버전

코드는 다음과 같습니다.

for(j = 0,len=arr.length; j < len; j++) {
   
}

간략한 설명:
임시 변수를 사용하여 배열 길이를 반복적으로 얻지 않도록 길이를 캐시합니다. 최적화 효과. 배열이 더 클 때 비교됩니다.

이 방법은 기본적으로 모든 루프 순회 방법 중에서 성능이 가장 높습니다

세 번째: for 루프 배열 순회의 약화 버전

코드는 다음과 같습니다.

for(j = 0; arr[j]!=null; j++) {
   
}

간단한 설명:
이 방법은 실제로 엄격하게 또한 for 루프에 속하지만 길이 판단을 사용하지 않고 변수 자체를 사용하여 판단합니다. 실제로 이 방법의 성능은 일반적인 for 루프의 성능보다 훨씬 낮습니다. foreach 루프 배열. traversal

코드는 다음과 같습니다.

arr.forEach(function(e){  
   
});

간단한 설명:배열과 함께 제공되는 foreach 루프는 더 자주 사용되며 성능은 실제로 일반 for 루프보다 약합니다

다섯 번째 유형: foreach 변형 배열 탐색

코드는 다음과 같습니다.

Array.prototype.forEach.call(arr,function(el){  
   
});

간략한 참고: foreach는 Array 유형과 함께 제공되므로 이 유형이 아닌 일부 유형은 직접 사용할 수 없으므로(예: NodeList) 이 변형을 사용하면 이 변형이 생성될 수 있습니다. 유사한 배열에 foreach 기능이 있습니다.

실제 성능은 일반 foreach보다 약합니다

여섯 번째 유형: forin 루프 배열 탐색

코드는 다음과 같습니다.

for(j in arr) {
   
}

간단한 설명:많은 사람들이 이 루프를 좋아하지만 실제로 분석해 보면 그리고 테스트하는 경우가 많은데, 루프 순회 방법 중에서

효율성이 가장 낮습니다.

일곱 번째 유형: 지도 순회

코드는 다음과 같습니다.

arr.map(function(n){  
   
});

간략한 설명: 이 방법도 널리 사용됩니다. , 사용하기는 더 우아하지만 실제 효율성은 foreach만큼 좋지 않습니다

8번째 유형: forof 순회(ES6 지원 필요)

코드는 다음과 같습니다.

for(let value of arr) {  
   
});

간단한 설명: 이 방법은 es6에서 사용되는데 forin보다 성능은 좋지만 여전히 일반 for 루프만큼 좋지는 않습니다

다양한 순회 방법의 성능 비교

위에 나열된 여러 가지 방법을 하나씩 비교 분석했습니다. 기본적으로 내릴 수 있는 결론은 다음과 같습니다.

일반적인 for 루프가 가장 우아합니다

(PS: 위 코드는 모두 빈 루프일 뿐이며 루프에 내부 실행 코드가 없습니다. 각 루프의 시간)

성능 비교 스크린샷

분석 결과 1

아래 스크린샷의 데이터는 크롬(es6 지원)에서 100번 실행 후 도출한 결론입니다(1회당 10번 실행, 총 10사이클 분석 결과)

forin 루프가 가장 느린 것을 알 수 있습니다. 최적화된 일반 for 루프가 가장 빠릅니다분석 결과 2

다음 스크린샷 데이터는 크롬에서 1000번 실행한 후 도출한 결론입니다(es6 지원)

(매번 100번 실행하여 총 10번의 루프를 실행하여 분석 결과를 얻음) )

관련 추천: JS 배열 탐색 및 배열 인스턴스 인쇄 분석_javascript 기술

위 내용은 js 배열 탐색의 8가지 방법 및 성능 분석(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!