JavaScript에서 for 루프의 여러 작성 방법 및 효율성 요약

高洛峰
풀어 주다: 2017-02-03 13:27:00
원래의
1801명이 탐색했습니다.

서문

For 루프는 모든 사람이 더 자주 사용할 수는 없다고 생각합니다. 하지만 이번에는 for 루프에 대해 이야기합니다. 왜냐하면 코드를 볼 때 정말 이해해서는 안 되는 for 루프의 의미를 이해하지 못했기 때문입니다.

이 for 루프는 다음과 같이 작성됩니다.

for (var i = 0, rule; rule = rules[i++];) {
 //do something
}
로그인 후 복사

이 작성은 무엇을 의미하나요? 나중에 얘기하겠지만 지금으로서는 이런 글쓰기 방식이 꽤 좋은 것 같아요.

for 루프 작성이 효율성에 미치는 영향

위 코드에 대해 이야기하기 전에 for 루프의 효율성에 대해 이야기해 보겠습니다. js를 접하게 되었을 때, for 루프의 작성 방법과 그것이 효율성에 미치는 영향에 대한 글이 꽤 있었습니다. 그러나 일반적으로 변수를 선언하지 않고 for 루프를 작성하는 방법에는 두 가지가 있습니다.

for(var i = 0;i

작성 방법 변수 선언: for(var i = 0,len = arr.length;i < len;i++){}

for 루프 외에도 forEach()도 있습니다. forEach()가 가장 효율적이라는 기사도 있는데, forEach()를 사용하는 것이 더 효율적이라는 것입니다. 테스트를 해보고 확인해 보겠습니다.

테스트 계획

전체 테스트 계획은 다음과 같습니다.

4천만개를 담는 테스트 배열 변수를 만듭니다.

이 테스트 변수를 탐색하려면 for 루프와 foreach라는 두 가지 작성 방법을 사용하세요.

동일한 안정적인 머신에서 10번의 테스트를 수행하고 최종적으로 평균을 구합니다.

테스트 환경: CPU: Inter(R) Core i5-3210M, RAM: 12GM, 시스템: win10 (x64)

테스트 프로세스

테스트 변수 생성

먼저 while 루프를 사용하여 테스트 변수를 만듭니다. 다음과 같이 매우 간단합니다.

var testArrs = [],
 i = 0;
while(i<40000000){
 testArrs.push(i);
 i++;
}
로그인 후 복사

해당 테스트 함수를 작성합니다

측정 및 실행 시간 코드의 경우 테스트를 위해 console.time() 및 console.timeEnd()를 사용했습니다.

이 세 개의 for 루프에 대해 먼저 세 개의 함수를 만듭니다.

foreach 루프 테스트:

function testForeach(testArrs){
 console.time(&#39;foreach&#39;);
 var newArrs = [];
 testArrs.forEach(function(i){
 newArrs.push(i);
 });
 console.timeEnd(&#39;foreach&#39;);
}
로그인 후 복사

선언된 변수 없음 for 루프:

function testNoDeclare(testArrs){
 console.time(&#39;no declare&#39;);
 var newArrs = [];
 for(var i = 0;i<testArrs.length;i++){
 newArrs.push(i);
 }
 console.timeEnd(&#39;no declare&#39;);
}
로그인 후 복사

변수 선언으로 작성

function testUseDeclare(testArrs){
 console.time(&#39;use declare&#39;);
 var newArrs = [];
 for(var i = 0,len = testArrs.length;i<len;i++){
 newArrs.push(i);
 }
 console.timeEnd(&#39;use declare&#39;);
}
로그인 후 복사

테스트 함수 실행

여기서 테스트 함수 실행은 매우 간단합니다.

testForeach(testArrs);
testNoDeclare(testArrs);
testUseDeclare(testArrs);
로그인 후 복사

테스트 결과

10번의 테스트 결과 다음과 같은 결과가 나왔습니다

JavaScript에서 for 루프의 여러 작성 방법 및 효율성 요약

궁금합니다 결과가 놀랐다면? 가장 일반적인 글쓰기 방식이 가장 효율적이라고는 생각하지 못했습니다. 왜일까요? 제가 파악을 못해서 혹시 아시는 분 계시면 알려주세요. 그런데 진술 방식이 의미가 없는 것 같아요. len = arr.length arr.length가 캐시되었을 수 있으므로 저장을 위해 len 변수를 선언하는 것은 의미가 없습니다.

마지막으로 테스트 코드를 모두 첨부하고 컴퓨터에 복사해 놓으시면 바로 테스트가 가능합니다. 불합리한 점이 있으면

아아아

<🎜 말씀해 주세요. >

for 루프를 작성하는 특별한 방법

글 초반에 제가 이해하지 못했던 코드에 대해 이야기해 보기 전에, 익숙한 for 루프 구문을 복습해야 합니다. for 루프의 기본 구문은 다음과 같습니다.

var testArrs = [],
 i = 0;
while(i<40000000){
 testArrs.push(i);
 i++;
}
function testForeach(testArrs){
 console.time(&#39;foreach&#39;);
 var newArrs = [];
 testArrs.forEach(function(i){
 newArrs.push(i);
 });
 console.timeEnd(&#39;foreach&#39;);
}
function testNoDeclare(testArrs){
 console.time(&#39;no declare&#39;);
 var newArrs = [];
 for(var i = 0;i<testArrs.length;i++){
 newArrs.push(i);
 }
 console.timeEnd(&#39;no declare&#39;);
}
function testUseDeclare(testArrs){
 console.time(&#39;use declare&#39;);
 var newArrs = [];
 for(var i = 0,len = testArrs.length;i<len;i++){
 newArrs.push(i);
 }
 console.timeEnd(&#39;use declare&#39;);
}
testForeach(testArrs);
testNoDeclare(testArrs);
testUseDeclare(testArrs);
로그인 후 복사

문 1: 루프(코드 블록)가 시작되기 전에

를 실행합니다. 문 2: 실행 조건을 정의합니다. 루프(코드 블록)

문 3: 루프(코드 블록)가 실행된 후 실행


for 루프를 사용하여 1~10을 출력하는 경우 다음과 같이 작성할 수 있습니다.

아아아아

그런데! 위의 문법적 지시에 따르면 이렇게도 쓸 수 있어요

for (语句 1; 语句 2; 语句 3)
{
被执行的代码块
}
로그인 후 복사

처음 읽었을 때 헷갈렸는데 어떻게 이렇게 쓸 수 있지? 명령문 2에는 루프 조건이 포함되어 있으며 i-는 판단 조건입니다. 실제로 명령문 2에서 true가 반환되면 루프가 계속 실행됩니다. js에서는 0,null,undefine,false,'',""를 조건부 판단으로 사용하면 결과가 false가 되는데, 이는 i-가 0에 도달하면 false가 되어 루프가 종료된다는 의미입니다.

글 시작 부분의 코드로 돌아갑니다

for(var i=0;i<10;i++){
console.log(i);
}
로그인 후 복사

이 규칙 = Rules[i++]가 정의되지 않을 때 루프가 실행됩니다. 종료됩니다. 그래서 이 코드를 일반적인 방법으로 작성하면 다음과 같을 것입니다.

for(var i=10;i--;){
console.log(i);
}
로그인 후 복사

사실 그냥 판단과 할당을 합쳐서 루프하면서 값을 할당하는 것뿐입니다. 아주 간단하지 않나요?

요약

이 글의 내용이 자바스크립트를 배우거나 사용하는 모든 분들께 도움이 되었으면 좋겠습니다. 소통하라는 메시지.

JavaScript의 여러 작성 방법과 for 루프의 효율성 요약에 대한 더 많은 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!

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