JS에서 일반적으로 사용되는 배열 순회 방법의 예 비교

php中世界最好的语言
풀어 주다: 2018-05-25 13:57:32
원래의
1009명이 탐색했습니다.

이번에는 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번 실행 후 도출한 결론입니다. (1회 10번 실행, 총 1번 실행) 10사이클 분석결과)

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

분석 결과 2

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

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

추천 도서

재계산을 위해 JS를 사용하여 여러 배열을 병합하는 방법

antd 드롭다운 상자 연결을 사용하는 단계에 대한 자세한 설명

위 내용은 JS에서 일반적으로 사용되는 배열 순회 방법의 예 비교의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿