찾다
웹 프론트엔드JS 튜토리얼JavaScript에서 for 루프의 여러 작성 방법 및 효율성 요약

서문

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

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 중국어 웹사이트를 주목하세요!

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
JavaScript 엔진 이해 : 구현 세부 사항JavaScript 엔진 이해 : 구현 세부 사항Apr 17, 2025 am 12:05 AM

보다 효율적인 코드를 작성하고 성능 병목 현상 및 최적화 전략을 이해하는 데 도움이되기 때문에 JavaScript 엔진이 내부적으로 작동하는 방식을 이해하는 것은 개발자에게 중요합니다. 1) 엔진의 워크 플로에는 구문 분석, 컴파일 및 실행; 2) 실행 프로세스 중에 엔진은 인라인 캐시 및 숨겨진 클래스와 같은 동적 최적화를 수행합니다. 3) 모범 사례에는 글로벌 변수를 피하고 루프 최적화, Const 및 Lets 사용 및 과도한 폐쇄 사용을 피하는 것이 포함됩니다.

Python vs. JavaScript : 학습 곡선 및 사용 편의성Python vs. JavaScript : 학습 곡선 및 사용 편의성Apr 16, 2025 am 12:12 AM

Python은 부드러운 학습 곡선과 간결한 구문으로 초보자에게 더 적합합니다. JavaScript는 가파른 학습 곡선과 유연한 구문으로 프론트 엔드 개발에 적합합니다. 1. Python Syntax는 직관적이며 데이터 과학 및 백엔드 개발에 적합합니다. 2. JavaScript는 유연하며 프론트 엔드 및 서버 측 프로그래밍에서 널리 사용됩니다.

Python vs. JavaScript : 커뮤니티, 라이브러리 및 리소스Python vs. JavaScript : 커뮤니티, 라이브러리 및 리소스Apr 15, 2025 am 12:16 AM

Python과 JavaScript는 커뮤니티, 라이브러리 및 리소스 측면에서 고유 한 장점과 단점이 있습니다. 1) Python 커뮤니티는 친절하고 초보자에게 적합하지만 프론트 엔드 개발 리소스는 JavaScript만큼 풍부하지 않습니다. 2) Python은 데이터 과학 및 기계 학습 라이브러리에서 강력하며 JavaScript는 프론트 엔드 개발 라이브러리 및 프레임 워크에서 더 좋습니다. 3) 둘 다 풍부한 학습 리소스를 가지고 있지만 Python은 공식 문서로 시작하는 데 적합하지만 JavaScript는 MDNWebDocs에서 더 좋습니다. 선택은 프로젝트 요구와 개인적인 이익을 기반으로해야합니다.

C/C에서 JavaScript까지 : 모든 것이 어떻게 작동하는지C/C에서 JavaScript까지 : 모든 것이 어떻게 작동하는지Apr 14, 2025 am 12:05 AM

C/C에서 JavaScript로 전환하려면 동적 타이핑, 쓰레기 수집 및 비동기 프로그래밍으로 적응해야합니다. 1) C/C는 수동 메모리 관리가 필요한 정적으로 입력 한 언어이며 JavaScript는 동적으로 입력하고 쓰레기 수집이 자동으로 처리됩니다. 2) C/C를 기계 코드로 컴파일 해야하는 반면 JavaScript는 해석 된 언어입니다. 3) JavaScript는 폐쇄, 프로토 타입 체인 및 약속과 같은 개념을 소개하여 유연성과 비동기 프로그래밍 기능을 향상시킵니다.

JavaScript 엔진 : 구현 비교JavaScript 엔진 : 구현 비교Apr 13, 2025 am 12:05 AM

각각의 엔진의 구현 원리 및 최적화 전략이 다르기 때문에 JavaScript 엔진은 JavaScript 코드를 구문 분석하고 실행할 때 다른 영향을 미칩니다. 1. 어휘 분석 : 소스 코드를 어휘 단위로 변환합니다. 2. 문법 분석 : 추상 구문 트리를 생성합니다. 3. 최적화 및 컴파일 : JIT 컴파일러를 통해 기계 코드를 생성합니다. 4. 실행 : 기계 코드를 실행하십시오. V8 엔진은 즉각적인 컴파일 및 숨겨진 클래스를 통해 최적화하여 Spidermonkey는 유형 추론 시스템을 사용하여 동일한 코드에서 성능이 다른 성능을 제공합니다.

브라우저 너머 : 실제 세계의 JavaScript브라우저 너머 : 실제 세계의 JavaScriptApr 12, 2025 am 12:06 AM

실제 세계에서 JavaScript의 응용 프로그램에는 서버 측 프로그래밍, 모바일 애플리케이션 개발 및 사물 인터넷 제어가 포함됩니다. 1. 서버 측 프로그래밍은 Node.js를 통해 실현되며 동시 요청 처리에 적합합니다. 2. 모바일 애플리케이션 개발은 재교육을 통해 수행되며 크로스 플랫폼 배포를 지원합니다. 3. Johnny-Five 라이브러리를 통한 IoT 장치 제어에 사용되며 하드웨어 상호 작용에 적합합니다.

Next.js (백엔드 통합)로 멀티 테넌트 SAAS 애플리케이션 구축Next.js (백엔드 통합)로 멀티 테넌트 SAAS 애플리케이션 구축Apr 11, 2025 am 08:23 AM

일상적인 기술 도구를 사용하여 기능적 다중 테넌트 SaaS 응용 프로그램 (Edtech 앱)을 구축했으며 동일한 작업을 수행 할 수 있습니다. 먼저, 다중 테넌트 SaaS 응용 프로그램은 무엇입니까? 멀티 테넌트 SAAS 응용 프로그램은 노래에서 여러 고객에게 서비스를 제공 할 수 있습니다.

Next.js (Frontend Integration)를 사용하여 멀티 테넌트 SaaS 응용 프로그램을 구축하는 방법Next.js (Frontend Integration)를 사용하여 멀티 테넌트 SaaS 응용 프로그램을 구축하는 방법Apr 11, 2025 am 08:22 AM

이 기사에서는 Contrim에 의해 확보 된 백엔드와의 프론트 엔드 통합을 보여 주며 Next.js를 사용하여 기능적인 Edtech SaaS 응용 프로그램을 구축합니다. Frontend는 UI 가시성을 제어하기 위해 사용자 권한을 가져오고 API가 역할 기반을 준수하도록합니다.

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
1 몇 달 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
1 몇 달 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
1 몇 달 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 채팅 명령 및 사용 방법
1 몇 달 전By尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

Atom Editor Mac 버전 다운로드

Atom Editor Mac 버전 다운로드

가장 인기 있는 오픈 소스 편집기

PhpStorm 맥 버전

PhpStorm 맥 버전

최신(2018.2.1) 전문 PHP 통합 개발 도구

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

WebStorm Mac 버전

WebStorm Mac 버전

유용한 JavaScript 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)