배열 순회 방법 및 성능 비교에 대한 JS 요약

이번에는 JS를 사용한 배열 순회 방법의 요약 및 성능 비교를 가져오겠습니다. JS를 사용한 배열 순회 방법의 요약 및 성능 비교 시 주의 사항은 무엇입니까?

머리말

이 기사는 여러 JS 변수 교환 방법 및 성능 분석 비교에 대한 이전 기사와 동일한 시리즈에 속합니다. 이 기사는 JS에서 일반적으로 사용되는 여러 배열 순회 방법과 각각의 성능 비교를 계속해서 분석합니다. ㅋㅋㅋ 이 기사는 JS 배열 탐색 방법의 분석 및 비교 시리즈의 두 번째 기사입니다. map 등의 방법, 이 글의 분석과 성능 분석 및 비교에 사용된 여러 배열 순회 방법은 다음과 같습니다

첫 번째: 일반 for 루프코드는 다음과 같습니다.

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

간략한 설명: The 가장 간단한 것은 사용 빈도도 가장 높고 성능은 약하지 않지만 아직 최적화의 여지가 있습니다

두 번째 유형: for 루프의 최적화 버전코드는 다음과 같습니다.

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

Brief 설명: 임시 변수를 사용하여 길이를 캐시하여 반복 획득을 방지합니다. 배열 길이, 최적화 효과는 배열이 클수록 더욱 분명해집니다.

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

세 번째 유형: for 루프의 약화 버전

코드는 다음과 같습니다.

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

간단한 설명: 이 방법은 실제로는 엄격하게 for 루프는 길이 판단을 사용하지 않고 변수 자체를 사용하여 판단합니다. 실제로 이 방법의 성능은 일반적인 for 루프보다 훨씬 작습니다. 코드는 다음과 같습니다.

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

간략한 설명: 배열과 함께 제공되는 foreach 루프는 실제로 일반 for 루프보다 성능이 약합니다.

다섯 번째 유형: foreach 변형

코드는 다음과 같습니다.

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

간단한 설명: foreach는 배열 유형이기 때문에 이 유형이 아닌 일부 유형의 경우 직접 사용할 수 없으므로(예: 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: 위 코드는 모두 빈 루프일 뿐이며 내부 실행 코드를 재활용하지 않으며 각 루프의 시간을 분석할 뿐입니다. loop)

성능 비교 스크린샷

분석 결과 1

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

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

분석 결과 2

다음 스크린샷 데이터는 Chrome에서 1000번 실행한 후 도출한 결론입니다(es6 지원)(1회 100번, 총 10사이클, 얻은 분석 결과)

In 또한 다음 데모의 분석 도구를 사용하여 JS 배열 순회 방법을 분석하고 비교할 수 있습니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 다음 페이지의 다른 관련 기사에 주목하세요. PHP 중국어 웹사이트!

추천 자료:

vue-simplemde 이미지를 드래그하여 붙여넣기

react props 및 state 속성 실제 사례 설명

위 내용은 배열 순회 방법 및 성능 비교에 대한 JS 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!