이번에는 JS에서 일반적으로 사용되는 배열 순회 방법의 예를 비교해 보겠습니다. JS에서 일반적으로 사용되는 배열 순회 방법의 주의 사항은 무엇입니까? 다음은 실제 사례입니다.
머리말이 기사는 여러 JS 변수 교환 방법 및 성능 분석 비교에 대한 이전 기사와 동일한 시리즈에 속합니다. 이 기사는 JS에서 일반적으로 사용되는 여러 배열 순회 방법과 각각의 성능 비교를 계속해서 분석합니다. ㅋㅋㅋ 이 기사는 JS 배열 탐색 방법의 분석 및 비교 시리즈의 두 번째 기사입니다. map 등의 방법, 이 글의 분석과 성능 분석 및 비교에 사용된 여러 배열 순회 방법은 다음과 같습니다
첫 번째: 일반 for 루프코드는 다음과 같습니다.for(j = 0; j < arr.length; j++) {
}
코드는 다음과 같습니다.for(j = 0,len=arr.length; j < len; j++) {
}
이 방법은 기본적으로 모든 루프 순회 방법 중에서 가장 성능이 좋은 방법입니다.
세 번째 유형: for 루프의 약화 버전
코드는 다음과 같습니다.
for(j = 0; arr[j]!=null; j++) { }
간단한 설명: 이 방법은 실제로는 엄격하게 for 루프는 길이 판단을 사용하지 않고 변수 자체를 사용하여 판단합니다. 실제로 이 방법의 성능은 일반적인 for 루프보다 훨씬 작습니다. 코드는 다음과 같습니다.
arr.forEach(function(e){ });
다섯 번째 유형: 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번 실행 후 도출한 결론입니다. (1회 10번 실행, 총 1번 실행) 10사이클 분석결과)
forin 루프가 가장 느린 것을 볼 수 있습니다. 최적화된 일반 for 루프가 가장 빠릅니다
분석 결과 2
다음 스크린샷 데이터는 크롬(es6 지원)에서 1000번 실행 후 도출한 결론입니다.(매회 100번, 총 10번 루프, 얻은 분석 결과) )
이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 도서
재계산을 위해 JS를 사용하여 여러 배열을 병합하는 방법
antd 드롭다운 상자 연결을 사용하는 단계에 대한 자세한 설명
위 내용은 JS에서 일반적으로 사용되는 배열 순회 방법의 예 비교의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!