집 > 뛰어나다 > javascript 루프에서 반복 계산. 주기. for 루프 작동 방식


javascript 루프에서 반복 계산. 주기. for 루프 작동 방식




프로그래밍 언어의 현대 구문 형성의 역사는 우주 형성 과정에 대한 지식과 유사합니다. 처음에는 무엇이고 어땠는지 ... 하지만 이제는 모든 것이 간단하고 접근 가능합니다.

알고리즘은 궁극적으로 항상 순차적인 명령 체인입니다. 프로그래밍의 병렬성은 어떻게든 결합된 시퀀스의 집합입니다. 직렬 또는 병렬 명령 연결보다 더 실용적인 적은 없었습니다. 레이블, 전환 및 조건 - 모든 결정에 충분했습니다. 기능적 언어는 이러한 아이디어를 덜 강조했지만 코드 섹션을 반복해야 할 필요성은 남아 있습니다.

브라우저: DOM, 언어 + 서버

기능적 아이디어가 특별한 의미를 갖기는 하지만 루프는 JavaScript에 남아 있습니다. "Lisp"와 "Prolog"가 남을 수도 있지만 JavaScript가 사는 영역이 무엇인지에 이르렀을 가능성이 높지만 이것이 마지막 솔루션인지 의심 스럽습니다.

JavaScript는 페이지를 수신하고 DOM으로 구문 분석하고 첫 번째 스크립트를 실행하는 브라우저 내에서 실행됩니다. 이 페이지에 로드된 페이지를 포함하여 다른 모든 페이지는 개발자가 언어를 조작하여 서버의 코드를 호출하고 AJAX 메커니즘을 사용하여 결과를 얻을 수 있는 작업입니다.

브라우저는 브라우저 개체를 사용할 수 있는 JavaScript 코드를 실행합니다. 여기에는 서버로 정보 전송을 제공하고 HTML 마크업, 스타일 및 코드 자체가 될 수 있는 응답 수신을 포함합니다. 답은 배열과 객체로 나타낼 수 있습니다. JavaScript에서 루프를 사용하는 것은 이치에 맞지 않으며 루프 없이도 할 수 있는 많은 기회가 있으며 끝없는 명령 시퀀스로 브라우저를 중단시키는 위험을 감수하는 것은 최상의 솔루션이 아닙니다.

루프 자체는 대부분의 JavaScript 구문 구성에 존재하며 개발자는 자체 기능으로 표준 구성을 보완할 수 있습니다.

코드 공간에서 JavaScript의 위치

현대 프로그래머는 그가 사용하는 while, do while, ...)이 궁극적으로 프로세서의 일련의 주기(주기), 즉 카운터 검사에 의해 중단되는 간단한 이진 연산 시퀀스, 즉 조건이라고 생각하지 않습니다.

따라서 기계어 수준에는 주기가 없습니다. 일반 명령, 조건부 연산 및 점프의 조합이 있습니다. 레벨 업, 브라우저 및 JavaScript 인터프리터를 개발하는 데 사용되는 도구가 무엇이든 루프는 분명하게 발생합니다. 또한 "코드 조각"은 다른 시간에 다른 세대의 프로그래머에 의해 제공될 것입니다. 한 층 위로 JavaScript "건물"이 있습니다. 최신 JavaScript 루프를 제안하는 구문입니다.

JS는 실용적이고 현대적이며 완전한 기능을 갖춘 아름다운 언어입니다. 이 도구의 구문에는 시간의 시험을 견디고 모든 알고리즘의 흔들리지 않는 기반이 된 모든 구조가 포함됩니다. 하지만 주기가 꼭 필요한가요? 프로그래밍의 진보는 종종 근본적인 성격에 대한 질문을 스스로에게 제기했지만 일부 경우에만 해결책을 찾았습니다.

객관적 근거

주기는 조건 또는 카운터의 두 가지 옵션일 수 있지만 실제로 (가장 낮은 수준에서) 모든 주기는 조건에 의해서만 가능합니다. 일부 언어에는 "for each" 루프가 있습니다. JavaScript에서 foreach 루프는 개체 구성의 소품으로 표시되지만 array.forEach(...) 변형을 사용할 수 있습니다.

어쨌든 두 가지 옵션이 있습니다. 궁극적으로 프로그래머의 모든 알고리즘을 실행하고 심지어 해석 언어로 작성하는 것에도 일련의 명령을 반복할 수 있는 다른 옵션이 없습니다. 다음과 같은 한 다시 무언가를 할 수 있습니다.

  • 카운터가 중요합니다.
  • 조건이 충족되는 동안.

JavaScript는 일반적인 인터프리터입니다. 특징: 브라우저 내부에서 작동하고 개체를 사용하며 페이지가 브라우저에 로드될 때와 작동 중에 클라이언트 측에서 알고리즘을 실행할 수 있습니다.

각각에 대한 간단한 루프

JavaScript에서 foreach 루프는 배열에 함수를 적용하는 것처럼 보입니다.

이러한 주기를 사용해도 문제가 발생하지 않습니다. 공식적으로는 그런 주기가 없습니다. 배열 요소에 대한 함수의 순차적 호출이 있습니다.

카운터별 순환

For 루프는 JavaScript에서 더 친숙해 보입니다.

여기서 카운터는 수식에 따라 값이 변하는 변수이고, 조건은 사이클 종료의 신호입니다. 수식과 조건에 루프 변수가 포함될 필요는 없습니다. 그러나 주기의 끝을 제어하는 ​​것은 내용에 따라 완전히 결정됩니다.

조건부 루프

JavaScript는 조건을 확인해야 하는 시기에 따라 변형을 제공합니다. 루프의 본문이 한 번도 실행되지 않을 수 있는 경우 - 본문이 한 번 이상 실행되어야 하는 경우 다음과 같습니다.

첫 번째 경우 while 구문을 해석할 때 JavaScript는 먼저 조건을 확인하고 참이면 루프를 실행합니다. 두 번째 경우에는 루프가 먼저 실행됩니다. 시공조건에 명시된 변수를 변경한 결과인 경우 do while은 false로 평가되고 루프가 중지됩니다.

간단한 알고리즘의 대규모 조합

모든 알고리즘의 주요 작업(구성 요소 부분)은 찾은 다음 다음에 수행할 작업에 대한 결정을 내리는 것입니다. 검색의 가장 원시적인 버전은 변수에 액세스하는 것이며 결과는 직접 얻습니다. 변수가 많거나 값(배열)이 많은 경우 값을 선택하려면 스크립트의 추가 동작을 결정하는 항목을 찾아야 합니다.

이렇게 간단한 교리가 만들어졌다 JavaScript에서 카운터가 있는 루프는 모든 작업에 대한 일종의 만병통치약입니다. 최신 컴퓨터는 빠릅니다. 브라우저에서 스크립트를 실행할 시간이 충분하고 서두를 곳이 없습니다. 무언가를 위해 무언가를 분류하는 것보다 쉽습니다. 결과적으로 J에서 avaScript for 루프는 많은 인기를 얻었습니다.

이것에 아무 문제가 없는 것 같습니다. 그러나 이러한 접근 방식 뒤에는 특정 알고리즘이 작성된 본질이 쉽게 손실됩니다. 데이터는 의미가 없습니다. 프로그램이 작성된 모든 것이 의미가 있습니다. J에서 너무 많이 마셔 avaScript for 루프를 사용하면 개발자가 원하는 엔터티를 보지 못하고 적절한 알고리즘을 만들지 못할 수 있습니다.

기능성, 현실의 또 다른 반영

지원 JavaScript 루프 예제동일한 유형의 코드를 함수로 표현할 수 있습니다. 알고리즘이 즉시 변경되고 스크립트의 본문 크기가 줄어들며 모든 것이 읽고 이해할 수 있게 됩니다.

이것은 근본적으로 새로운 솔루션은 아니지만 본질적으로 다른 언어 구조의 범위를 벗어나지 않습니다. 특히, J avaScript 루프는 클래식 split() 함수에서 찾을 수 있습니다.

var cResult = "9,8,7,6,5,4" ;
var aResult = cResult .split("," );

여기에는 루프가 없지만 문자 ","를 찾지 않고 숫자를 다른 숫자와 구분하는 데 사용하지 않고 다른 방법으로 수행할 수 있습니다.

이것이 split() 함수 내에서 구현되는 방식을 추상화하면 사용의 관점에서 루프를 사용하여 자체 기능으로 JavaScript를 보완할 수 있습니다. 더 편리합니다. 이 접근 방식은 각각의 작업에 대한 기능 개발로 이어지는 것이 필수적이지만 일반적으로는 여전히 이 접근 방식을 사용합니다.

이러한 allt() , padc() , padl() 및 padr() 함수는 JavaScript에 없는 기능이지만 문자열에서 공백을 제거하거나 문자열 길이를 왼쪽, 오른쪽 또는 둘 다로 정렬해야 하는 경우가 있습니다. 측면. 이러한 함수의 본문에는 JavaScript 루프가 있습니다. 간단하고 저렴하며 이를 사용하는 알고리즘은 중단되지 않습니다.

숫자를 16진수에서 10번째 미적분으로 또는 그 반대로 변환하는 함수의 변형, 즉 한 데이터 형식에서 다른 데이터 형식으로 여기에서 do while 루프를 통해 수행됩니다. 매우 간결하고 효율적인 언어 구문.

올바른 주기 - 현실 반영

JavaScript는 다른 프로그래밍 언어와 다르지 않으며 버전의 다양성이 다르지 않으며 가장 중요한 것은 구문을 변경하는 것이 아니라 개발하고 확장하는 것입니다.

JS를 사용하는 프로그래머의 마음가짐은 다르다 PHP 프로그래머의 생각에서 (특히 "프롤로그"와 그 추종자가 일반적인 주류에 포함되지 않는다는 점을 제외하고는 전체적으로 다른 언어), 알고리즘이 변수, 배열, 할당 연산자, 순환 구조로 제한되지 않는 경우.

사이클이 없다고 상상하지만 문제를 해결해야 하는 경우 가장 간단한 옵션(눈가리개)은 프로그램이 정보 공간의 포인트 또는 포인트 시스템인 데이터를 처리한다고 가정하는 것입니다. 포인트 란 무엇이며 포인트 시스템은 특정 주제 영역의 문제입니다. 프로그래머에게 이 논문은 단순 데이터가 있고 단순 데이터 세트가 있음을 의미합니다. 당연히 아래 수준에 대한 한 수준의 단순 데이텀은 시스템이 될 것이고 그 위 수준에 대해서는 포인트가 될 것입니다.

이 접근법에서 포인트의 관심사는 그 방법을 통해 그 본질을 드러내는 것입니다. 포인트가 상위 시스템에 있을 때 시스템의 기능은 시스템에 포함된 포인트의 엔터티 집합으로 본질을 나타내는 것입니다.

이 접근 방식은 프로그래밍 언어의 아이디어만큼 오래되었지만 아직 프로그래밍에서 적절한 반영을 찾지 못했습니다. 많은 프로그래머가 올바르게 생각하지만 창의성의 결과는 많이 남아 있습니다.

가끔 눈가리개를 하고 세상을 보는 것도 좋아요!

루프는 동일한 명령을 반복적으로 실행하도록 설계되었습니다.

JavaScript에는 4가지 유형의 루프가 있습니다.

  • for 루프. 이 루프는 동일한 명령어의 정확한 반복 횟수를 알고 있을 때 사용됩니다.
  • 동안 루프. 주어진 조건이 참인 한 동일한 명령을 실행하도록 설계되었습니다.
  • do...while 루프. 이 루프는 while 루프와 유사하지만 조건을 반복문 실행 전이 아니라 실행 후에 확인합니다. 따라서 while 루프와 달리 조건이 처음에 거짓이더라도 명령문은 적어도 한 번은 실행됩니다.
  • for...in 루프. 객체의 모든 속성이나 배열의 각 요소를 반복해야 할 때 사용합니다.

for 루프

For 루프 구문:

For (초기화; 조건; 최종 표현식) ( /* 루프 본문 */ )

  • 초기화는 루프를 실행하기 전에 한 번 실행되는 표현식입니다. 일반적으로 카운터를 초기화하는 데 사용됩니다.
  • 조건은 각 반복 전에 진실이 확인되는 표현식입니다. 표현식이 true로 평가되면 반복이 수행되고 그렇지 않으면 for 루프가 종료됩니다.
  • 최종 표현각 반복이 끝날 때 실행되는 표현식입니다. 일반적으로 카운터를 변경하는 데 사용됩니다.
  • 루프 본문 - 반복할 명령입니다.

1에서 9까지의 숫자를 콘솔에 출력하는 루프의 예를 살펴보겠습니다.

변이; // 1부터 9까지 for 루프, 1단계 for (i = 1; i<= 9; i++) { console.log(i); }

이 예에서:

  • 초기화: i = 1(변수 i에 값 1 할당);
  • 루프 종료 조건:나<= 9 (значение переменной i не меньше 9);
  • 각 반복이 끝날 때 실행할 표현식: i++(변수 i의 값을 1씩 증가);
  • 따라야 할 지침: console.log(i) (카운터 값을 콘솔에 인쇄).

for 루프의 선택적 부분

for 에서 초기화 블록은 선택 사항입니다.

변수 = 1; // 루프 for (; i<= 9; i++) { console.log(i); }

for 루프의 조건 블록도 선택 사항입니다. 조건이 없으면 루프가 무한대로 실행됩니다. 이 경우 중단(루프 종료)하려면 break 문을 사용해야 합니다.

변이; // 루프 for (i = 1; ; i++) ( if (i > 9) ( // 중단 조건 break; ) console.log(i); )

for의 마지막 표현식도 선택 사항입니다. 이 경우 루프 카운터는 예를 들어 본문에서 변경할 수 있습니다.

변이; // for 루프 for(i = 1; i<= 9 ;) { console.log(i); i++; }

일반적으로 다음 3가지 표현식을 생략할 수 있습니다.

변수 = 1; // 루프 for (; ;) ( if (i > 9) ( break; ) console.log(i); i++; )

for 루프의 본문으로 빈 식(;)을 사용할 수 있습니다.

예를 들어:

변수 arrA = , arrB = ; (i = 0; 나는< arrA.length; arrB[i] = arrA / 2) ; console.log(arrB); //

에 대한 사용 예

for 루프를 사용하여 배열의 요소를 반복합니다.

Var arr = , // 배열 i = 0, // 카운터 lenArr = arr.length; // (i; i에 대한 배열 길이< lenArr; i++) { console.log(arr[i]); }

중단 및 계속 문

또한 루프 본문 내에서 특별한 break 및 continue 문을 사용할 수 있습니다.

break 문은 루프 실행을 종료하기 위한 것입니다. 저것들. 현재 루프를 종료하고 다음 명령으로 제어를 전송합니다.

continue 문은 루프의 현재 반복 실행을 중단하고 다음 반복으로 이동합니다.

콘솔에 1에서 11까지의 홀수를 표시하는 예:

변이; for (i = 1; i <= 11; i++) ( // 변수 i의 숫자가 짝수이면 다음 반복으로 이동 if (i %2 === 0) ( continue; ) // 값 출력 콘솔에 변수 i의 console.log(i); ) // 1, 3, 5, 7, 9, 11

while 조건이 있는 루프

while 루프는 일부 조건이 참인 한 동일한 명령(루프 본문)을 실행합니다. 루프 본문을 실행할 때마다 조건의 진실성을 확인합니다. 첫 번째 반복 전에 조건이 거짓이면 루프가 실행되지 않습니다.

// 변수 a를 선언하고 값 0을 할당합니다. var a=0; // 조건 a가 있는 while 루프

do...while 사후 조건이 있는 루프

do...while 루프는 while 루프와 마찬가지로 일부 조건이 참인 한 동일한 명령(루프 본문)을 실행합니다. 그러나 while 루프와 달리 do...while 루프에서는 루프 본문을 실행할 때마다 조건을 확인합니다. 조건이 초기에 거짓이더라도 루프 본문은 여전히 ​​한 번 실행됩니다(루프 본문이 실행된 후 조건이 확인되기 때문).

// 변수 a를 선언하고 값 0을 할당합니다. var a=0; //do...while 조건이 있는 루프 a

위에서 언급했듯이 for...in 루프는 배열의 요소와 객체의 속성을 반복하는 데 사용됩니다. 이 레슨에서는 for...in 루프의 일반적인 구문만 다룰 것이며 다음 레슨에서 더 자세히 알게 될 것입니다.

for...in 루프의 원리는 변수 x가 객체 y의 모든 속성 이름 또는 배열 y의 인덱스를 사용한다는 것입니다. 따라서 각 반복에서 개체 속성 또는 배열 요소를 사용할 수 있습니다.

프로그램의 특정 부분을 여러 번 실행해야 하는 경우가 매우 많습니다. 물론 복사-붙여넣기 등 필요한 횟수만큼 간단하게 수행할 수 있습니다. 그러나 이는 터무니없는 일이며, 특히 작업을 수행해야 하는 경우(예: 1000번)입니다. 따라서 소위 주기, 대부분의 프로그래밍 언어에 있습니다. 그리고 나는 그들에 대해 말할 것입니다.

여러 번 스크롤하는 특정 코드를 포함합니다. 몇 가지 유형의 주기가 있습니다. ~을 위한, ~하는 동안그리고 하는 동안.

첫 번째 주기(그리고 가장 인기 있는 주기)부터 시작하겠습니다. for 루프. 이 주기의 일반적인 형태는 다음과 같습니다.

For (iteration_variable = start_value; condition; action_after_each_iteration) (
//프로그램 코드
}

여기에 쓰여진 내용에 대해 의견을 말합시다. 선착순 - 반복 변수. 반복에 대한 일반적인 변수 이름입니다. 다음은 온다 초기 값. 사실, 그 이름은 그 자체로 말합니다. 다음은 (즉, 진실) 루프가 한 번 더 실행되고 마지막으로 각 반복 후에 실행되는 작업입니다. 일반적으로 이것은 반복에 대한 변수 변경입니다.

루프 반복 횟수를 표시하는 간단한 스크립트를 작성해 보겠습니다.

(i = 0; 나는< 100; i++)
document.write(i + " ");

여기에서 반복을 위한 변수를 설정했습니다( 나), 값이 할당되었습니다. 0 . 다음 조건이 확인됩니다. 나< 100 . 그렇다면 루프의 한 반복이 실행됩니다. 각 반복 후, 나++(즉, 변수의 증가 나~에 1 ). 조건을 다시 확인하고 참이면 또 다른 반복을 수행합니다. 등등 조건까지 나< 100 거짓되지 않습니다. 분명히 100회 반복 후에만 false가 됩니다. 따라서 이 루프는 100번 실행되며 이 스크립트를 실행하면 확인할 수 있습니다. 그리고 하나 더. 여기에는 하나의 진술만 있기 때문에( 문서.쓰기()), 중괄호는 선택 사항입니다. 한 사이클에 2명 이상의 오퍼레이터가 회전하는 경우 이들을 배치해야 합니다.

이제 두 번째 유형에 대해 이야기하겠습니다. 자바스크립트의 루프 - ~하는 동안. 원칙적으로 주기는 다음과 매우 유사합니다. ~을 위한(모든 주기가 비슷하지만). 그러나 여기서 일반적인 견해는 다릅니다.

동안(조건)(
//프로그램 코드
}

보시다시피 반복을 위한 변수도 없고 반복 이후의 조치도 없습니다. 따라서 결론은 다음과 같습니다. 사이클을 종료하려면 사이클 자체에서 " 상태" false가 되었습니다. 이것이 완료되지 않으면 루프가 발생하므로 스크립트가 중단됩니다.

이전과 같은 작업을 구현해 봅시다. while 루프.

변수 = 0;
동안 (나는< 100) {
i++;
document.write(i + " ");
}

루프가 시작되기 전에 변수를 만들었습니다. 나, 초기 값이 할당되었습니다. 그런 다음 루프를 시작하기 전에 조건을 확인하고 참이면 루프의 반복이 시작되어 반복에 대한 변수를 증가시킵니다(그렇지 않으면 루프가 발생합니다). 그리고 이 변수를 출력합니다.

그리고 드디어 마지막 뷰 자바스크립트의 루프 - do-while 루프. 구문은 다음과 같습니다.

하다(
//프로그램 코드
) 동안 (조건)

싸이클과 매우 유사 ~하는 동안, 그러나 단 하나이지만 매우 근본적인 차이점이 있습니다. 만약에 while 루프먼저 조건을 확인한 다음 반복합니다. 저것 do-while 루프먼저 반복한 다음 조건을 확인합니다. 거짓이면 루프를 종료합니다. 즉, 조건과 관계없이 이 루프는 적어도 한 번은 실행되도록 보장됩니다. 이 코드가 중복될 것이라고 생각하지만 여전히 그렇습니다.

변수 = 0;
하다(
i++;
document.write(i + " ");
) 동안 (나는< 100)

나는 코드를 설명하지 않을 것입니다. 나 없이도 알아낼 것이라고 확신합니다. 따라서 두 가지 흥미로운 연산자로 이동하겠습니다. 부서지다그리고 계속하다.

시작하자 부서지다. 이 명령문을 사용하면 미리 루프에서 벗어날 수 있습니다. 다음 코드를 작성해 보겠습니다.

(i = 0; 나는< 100; i++) {
if (i == 50) 중단;
document.write(i + " ");
}

이 스크립트를 실행하고 최대 숫자만 찾을 수 있습니다. 49 , 때문에 나는 = 50루프는 연산자에 의해 중단됩니다. 부서지다.

이제 연산자에 대해 이야기하고 있습니다. 계속하다. 이 명령문을 사용하면 루프의 다음 반복으로 이동할 수 있습니다. 여기에 많이 칠하지 않으려면 바로 예를 보여주는 것이 좋습니다.

(i = 0; 나는< 100; i++) {
if (i == 50) 계속;
document.write(i + " ");
}

이 스크립트를 실행하면 숫자가 충분하지 않음을 알 수 있습니다. 50 . 이것은 에 때문에 발생했습니다. 나는 = 50, 루프의 다음 반복으로 이동합니다. 나증가 1 평등해진다 51일.

그게 내가 쓰고 싶었던 전부인 것 같습니다. 자바스크립트 루프. 모든 것이 명확해졌으면 좋겠습니다. 스스로 문제를 제기하고 해결할 수도 있습니다. 이것은 훌륭한 운동이 될 것입니다.

루프는 무언가를 여러 번 수행하는 쉬운 방법입니다. JavaScript 안내서의 이 장에서는 JavaScript에서 사용할 수 있는 다양한 연산자를 소개합니다.

루프는 누군가에게 한 방향으로 X걸음을 내디딘 다음 다른 방향으로 Y걸음을 내딛도록 지시하는 컴퓨터화된 게임 버전으로 생각할 수 있습니다. 예를 들어 "동쪽으로 5보 이동" 게임의 아이디어는 다음과 같이 루프로 표현할 수 있습니다.

바스텝; for (단계 = 0; 단계< 5; step++) { // Запускается 5 раз, с шагом от 0 до 4. console.log("Идём 1 шаг на восток"); }

여러 종류의 루프가 있지만 본질적으로 모두 동일한 작업을 수행합니다. 일부 작업을 여러 번 반복합니다(제로 반복 시간을 잊지 마세요. 배열의 카운트다운은 0부터 시작합니다). 다른 구조의 루프는 루프의 시작과 끝을 결정하는 다양한 방법을 제공합니다. 다양한 프로그래밍 작업에는 훨씬 쉽게 해결되는 자체 루프 연산자가 있습니다.

JavaScript의 루프 문:

for 루프

주기 ~을 위한일부 특수 루프 종료 이벤트가 발생할 때까지 작업을 반복합니다. JavaScript의 for 문은 Java 및 C의 for 문과 비슷합니다. for 문 선언은 다음과 같습니다.

For ([시작]; [조건]; [단계]) 식

실행되면 다음과 같은 일이 발생합니다.

  1. 지정된 경우 시작 표현식이 실행됩니다. 이 식은 일반적으로 하나 이상의 카운터를 초기화하지만 구문을 사용하면 식을 복잡하게 만들 수 있습니다. 변수 선언에도 사용됩니다.
  2. 조건이 충족되었습니다. 조건이 참이면 표현식이 실행됩니다. false이면 for 루프가 종료됩니다. 조건이 완전히 생략되면 true로 간주됩니다.
  3. 표현식이 실행됩니다. 여러 식을 실행하려면 블록 식( ... )을 사용하여 식을 그룹화합니다.
  4. 있는 경우 단계를 업데이트한 다음 2단계로 돌아갑니다.

예

다음 함수에는 스크롤 목록에서 선택한 장르의 수를 세는 for 루프가 있습니다(요소는 옵션 메뉴를 포함하는 컨트롤입니다."> , if 문을 실행하고 루프가 반복될 때마다 i를 1씩 증가시킵니다.

do...while 루프

do...while 루프는 주어진 조건이 참인 동안 반복됩니다. do...while 문은 다음과 같습니다.

표현식을 수행하십시오 while(조건);

조건이 참인 동안 표현식이 실행됩니다. 여러 표현식을 사용하려면 블록 표현식( ... )을 사용하여 그룹화하십시오. 조건이 참이면 표현식이 다시 실행됩니다. 각 패스가 끝날 때마다 조건이 확인됩니다. 조건이 거짓이면 실행이 일시 중단되고 제어가 do...while 이후의 표현식으로 이전됩니다.

예

다음 예제에서 do 루프는 적어도 1번 실행되고 i가 5보다 작은 동안 다시 실행됩니다.

Do ( i += 1; console.log(i); ) 동안 (i< 5);

while 루프

while 루프는 조건이 참인 동안 표현식을 실행합니다. 다음과 같습니다.

while(조건) 표현식

조건이 false가 되면 루프의 식 실행이 중지되고 제어가 루프 뒤의 식으로 전달됩니다.

루프의 표현식이 실행되기 전에 조건이 참인지 확인합니다. 조건이 참이면 표현식이 실행된 다음 조건이 다시 테스트됩니다. 조건이 거짓이면 실행이 일시 중단되고 제어는 while 이후의 식으로 전달됩니다.

여러 표현식을 사용하려면 표현식( ... ) 블록을 사용하여 그룹화하십시오.

예 1

다음 while 루프는 n이 3보다 작은 동안 실행됩니다.

바른 = 0; 변수 x = 0; (n< 3) { n++; x += n; }

반복할 때마다 루프는 n을 증가시키고 해당 값을 x에 추가합니다. 따라서 x와 n은 다음 값을 얻습니다.

  • 첫 번째 통과 후: n = 1 및 x = 1
  • 두 번째 이후: n = 2 및 x = 3
  • 세 번째 통과 후: n = 3 및 x = 6

세 번째 통과 후 조건 n< 3 становится ложным, поэтому цикл прерывается.

예 2

무한 루프를 피하십시오. 루프 조건이 결국 거짓이 되는지 확인하십시오. 그렇지 않으면 주기가 중단되지 않습니다. 다음 while 루프의 표현식은 영원히 실행됩니다. 조건은 결코 거짓이 되지 않습니다:

동안 (참) (console.log("Hello, world"); )

상표

레이블은 프로그램에서 위치를 참조할 수 있도록 하는 식별자가 있는 문입니다. 예를 들어 레이블을 사용하여 루프를 표시한 다음 break 또는 continue 문을 사용하여 프로그램이 루프를 중단해야 하는지 계속 실행해야 하는지를 나타낼 수 있습니다.

레이블 구문은 다음과 같습니다.

레이블: 연산자

의미 레이블예약어가 아닌 모든 유효한 JavaScript 식별자가 될 수 있습니다. 운영자 , 레이블 뒤에 지정하는 것은 모든 표현식이 될 수 있습니다.

예

이 예에서 markLoop 레이블은 while 루프를 나타냅니다.

MarkLoop: 동안(theMark == 참)( doSomething(); )

부서지다

break 문을 사용하여 루프를 중단하거나 컨트롤을 전환하거나 레이블 문과 함께 사용하십시오.

  • 레이블 없이 break 를 사용하면 while , do-while 및 for 루프가 중단되거나 제어가 즉시 다음 문으로 전환됩니다.
  • 레이블과 함께 break를 사용하면 특별히 표시된 표현식이 끊어집니다.

연산자 구문은 다음과 같을 수 있습니다.

  1. 부서지다;
  2. 부서지다 상표;

구문의 첫 번째 형식은 루프를 완전히 중단하거나 제어를 전환합니다. 두 번째는 특별히 표시된 표현식을 중단합니다.

예 1

다음 예제는 값이 theValue인 요소를 찾을 때까지 배열의 요소를 반복합니다.

(i = 0; 나는< a.length; i++) { if (a[i] == theValue) { break; } }

예제 2: 라벨 인터럽트

변수 x = 0; var z = 0 labelCancelLoops: 동안(참) (console.log("외부 루프: " + x); x += 1; z = 1; 동안(참)(console.log("내부 루프: " + z) ;z += 1;if (z === 10 && x === 10) ( break labelCancelLoops; ) else if (z === 10) ( break; ) ) )

계속하다

continue 문은 while , do-while , for 루프에서 앞으로 이동하거나 레이블로 이동하는 데 사용됩니다.

  • 레이블 없이 continue를 사용하면 while , do-while 및 for 루프의 현재 반복을 중단하고 다음 반복에서 루프를 계속합니다. break 와 달리 continue 는 루프를 완전히 중단하지 않습니다. while 루프에서 조건으로 점프합니다. 그리고 in for 는 단계를 증가시킵니다.
  • 레이블과 함께 계속을 사용하면 해당 레이블이 있는 루프에 적용됩니다.

continue 구문은 다음과 같습니다.

  1. 계속하다;
  2. 계속하다 상표 ;

예 1

다음 예제는 i의 값이 3일 때 실행되는 continue 문이 있는 while 루프를 보여줍니다. 따라서 n은 값 1, 3, 7 및 12를 가져옵니다.

변수 = 0; varn = 0; 동안 (나는< 5) { i++; if (i == 3) { continue; } n += i; }

예 2

표시된 표현식 checkiandj표시된 표현식을 포함합니다. 확인. continue 를 만나면 프로그램은 현재 반복을 종료합니다. 확인그리고 다음 반복을 시작합니다. 계속 만날 때마다 확인조건이 false 를 반환하는 동안 다음 반복으로 진행합니다. 나눗셈의 나머지를 계산한 후 false가 반환되는 경우 checkiandj, checkiandj조건이 false 를 반환하는 한 다음 반복으로 진행합니다. false가 반환되면 프로그램은 이후 표현식부터 실행을 계속합니다. checkiandj.

계속 레이블이 붙은 경우 checkiandj, 프로그램은 레이블의 처음부터 계속할 수 있습니다. checkiandj.

Checkiandj: 동안(i< 4) { console.log(i); i += 1; checkj: while (j >4) ( console.log(j); j -= 1; if ((j % 2) != 0) ( 계속 확인j; ) console.log(j + " even."); ) console.log("i =" + 나); console.log("j = " + j); )

...에 대한

for...in 문은 개체의 모든 열거 가능한 속성을 반복합니다. JavaScript는 각 개별 속성에 대해 지정된 표현식을 실행합니다. for...in 루프는 다음과 같습니다.

For (객체의 변수) ( 표현식 )

예

다음 함수는 개체와 해당 이름을 인수로 사용합니다. 그런 다음 개체의 모든 속성을 반복하고 속성 이름과 해당 값이 포함된 문자열을 반환합니다.

함수 dump_props(obj, obj_name) ( var result = ""; for (var i in obj) ( result += obj_name + "." + i + " = " + obj[i] + "
"; ) 결과 += "

"; 결과 반환; )

제조사 및 모델 속성이 있는 자동차 개체의 경우 결과~ 할 것이다:

car.make = 포드 car.model = 머스탱

예 #2

또한 키로 값을 표시할 수 있습니다.

Let obj = (모델: "AUDI A8", 연도: "2019", 색상: "갈색") for (key in obj) ( console.log(`$(key) = $(obj)`); ) // 모델 = AUDI A8 // 연도 = 2019 // 색상 = 브라운

배열

사용하기가 매우 유혹적이지만 ...에 대한 Array 의 모든 요소를 ​​반복하는 방법으로 이 연산자는 숫자 인덱스와 함께 사용자 정의 속성의 이름을 반환합니다. 따라서 배열과 상호 작용할 때 숫자 인덱스에 대해 표준 for를 사용하는 것이 좋습니다. ...에 대한속성 및 메서드 추가와 같이 배열을 수정하는 경우 배열 요소 외에도 사용자 정의 속성을 트래버스합니다.

을 위한 ( 변수~의 물체) { 표현}

다음 예제는 for...of와 for...in 루프의 차이점을 보여줍니다. for...in은 속성 이름을 반복하는 반면 for...of는 속성 값을 반복합니다.

하자 = ; arr.foo = "안녕하세요"; for (let i in arr) ( console.log(i); // 출력 "0", "1", "2", "foo" ) for (let i of arr) ( console.log(i); / / 출력 "3", "5", "7" )

마지막 업데이트: 2018년 4월 8일

주기를 사용하면 특정 조건에 따라 특정 작업을 여러 번 수행할 수 있습니다. JavaScript에는 다음 유형의 루프가 있습니다.

    ...에 대한

    ~을 위한..의

    ~하는 동안

    할..하는 동안

for 루프

for 루프의 공식 정의는 다음과 같습니다.

For ([카운터 초기화]; [조건]; [카운터 변경])( // 작업 )

예를 들어 for 루프를 사용하여 배열의 요소를 반복합니다.

Var people = ["톰", "앨리스", "밥", "샘"]; for(var i = 0; i

루프 선언의 첫 번째 부분인 var i = 0은 카운터 변수 i를 생성하고 초기화합니다. 그리고 루프가 실행되기 전에 그 값은 0이 됩니다. 사실 이것은 변수를 선언하는 것과 같습니다.

두 번째 부분은 루프가 실행되는 조건입니다. 이 경우 루프는 i 값이 people 배열의 길이와 같은 값에 도달할 때까지 실행됩니다. length 속성을 사용하여 배열의 길이를 얻을 수 있습니다: people.length .

세 번째 부분은 카운터를 1씩 증가시키는 것입니다.

그리고 배열에 4개의 요소가 있으므로 루프 블록은 i의 값이 people.length(즉, 4)와 같아질 때까지 4번 실행됩니다. 그리고 이 값이 1씩 증가할 때마다 루프의 각 개별 반복을 반복이라고 합니다. 따라서 이 경우 4번의 반복이 작동합니다.

그리고 people[i] 표현식의 도움으로 브라우저에서 후속 표시를 위한 배열 요소를 얻을 수 있습니다.

카운터를 1씩 늘릴 필요는 없습니다. 예를 들어 카운터를 1씩 줄이는 등 다른 작업을 수행할 수 있습니다.

Var people = ["톰", "앨리스", "밥", "샘"]; for(var i = people.length - 1; i >= 0; i--)( console.log(people[i]); )

이 경우 배열은 끝에서부터 표시되며 배열의 반복은 i=3에서 i=0까지 시작됩니다.

...에 대한

for..in 루프는 배열과 객체를 반복하도록 설계되었습니다. 공식적인 정의는 다음과 같습니다.

For (배열의 인덱스) ( // 작업 )

예를 들어 배열의 요소를 반복해 보겠습니다.

Var people = ["톰", "앨리스", "밥", "샘"]; for(사람의 변수 인덱스)( console.log(사람); )

for...of 루프

for...of 루프는 for...in 루프와 유사하며 배열과 같은 컬렉션을 반복하도록 설계되었습니다.

Let users = ["톰", "밥", "샘"]; for(let val of users) console.log(val);

컬렉션의 현재 반복 요소는 val 변수에 배치되며 그 값은 콘솔에 출력됩니다.

while 루프

while 루프는 어떤 조건이 참인 동안 실행됩니다. 공식적인 정의는 다음과 같습니다.

While(조건)( // 작업 )

다시, while을 사용하여 배열의 요소를 표시합니다.

Var people = ["톰", "앨리스", "밥", "샘"]; 변수 인덱스 = 0; 동안(색인< people.length){ console.log(people); index++; }

여기서 while 루프는 인덱스 값이 배열의 길이와 같아질 때까지 실행됩니다.

할..하는 동안

do 루프에서는 루프 코드가 먼저 실행된 다음 while 문의 조건이 확인됩니다. 그리고 이 조건이 참인 동안 주기가 반복됩니다. 예를 들어:

변수 x = 1; do( console.log(x * x); x++; ) while(x< 10)

여기서 루프 코드는 x가 10이 될 때까지 9번 실행됩니다. 이 경우 do 루프는 while 문의 조건이 참이 아니더라도 적어도 한 번은 작업 실행을 보장합니다.

계속 및 중단 문

루프가 완료되기 전에 루프를 종료해야 하는 경우가 있습니다. 이 경우 break 문을 사용할 수 있습니다.

< array.length; i++) { if (array[i] >10) 휴식; document.write(배열[i] + "
"); }

이 루프는 배열의 모든 요소를 ​​반복하지만 배열 반복이 요소 12에 도달하면 if (array[i] > 10) 검사가 break 문으로 루프를 중단하기 때문에 마지막 4개 요소는 브라우저에 표시되지 않습니다. .

반복을 건너뛰고 루프를 종료하지 않으려면 continue 문을 사용할 수 있습니다.

변수 배열 = [ 1, 2, 3, 4, 5, 12, 17, 6, 7 ]; for (var i = 0; i< array.length; i++) { if (array[i] >10) 계속하다; document.write(배열[i] + "
"); }

이 경우 프로그램이 배열에서 10보다 큰 숫자를 발견하면 이 숫자는 브라우저에 표시되지 않습니다.