홈페이지>웹 디자인 튜토리얼>자바스크립트 튜토리얼

JS 루프 학습: while 루프 문 사용(자세한 예)

저자：Eve Cole 업데이트 시간：2022-08-06 08:59:54

루프는 한 가지 작업을 반복적으로 수행하는 것입니다. 코드를 작성하는 과정에서 일부 데이터를 순회하거나 특정 문자열을 반복적으로 출력하는 등 반복적으로 수행해야 하는 작업을 자주 접하게 됩니다. , 이러한 종류의 반복 작업의 경우 루프를 사용하여 완료해야 합니다.

루프의 목적은 특정 코드 부분을 반복적으로 실행하는 것입니다. 루프를 사용하면 프로그래밍 부담을 줄이고, 코드 중복을 방지하고, 개발 효율성을 높이고, 향후 유지 관리를 용이하게 할 수 있습니다. while 루프는 자바스크립트에서 제공하는 가장 간단한 루프문으로 while 루프와 do-while 루프의 사용법을 알아봅니다.

1: while 루프

while 루프문은 루프문의当型으로, 조건이 만족되면 루프 본문을 먼저 실행합니다.

기능: 지정된 조건이 충족되지 않을 때까지 작업을 반복합니다.

특징: 먼저 표현식을 판단하고 표현식 결과가 참일 때 해당 명령문을 실행합니다.

1. JS while 루프 구문

while(expression) { //Expression은 루프 조건 //실행할 코드}

명령문 분석:

  • 먼저 "expression"의 값을 계산하고, 값이 true이면 루프에서 "PHP"를 실행합니다. bodyStatement block";

    설명: "expression"의 계산 결과는 Boolean 유형(TRUE 또는 FALSE)입니다. 다른 유형의 값인 경우 자동으로 Boolean 유형의 값으로 변환됩니다(PHP는 약한 언어이기 때문입니다). 유형을 지정하고 변수 값에 따라 변환되어 자동으로 변수가 올바른 데이터 유형으로 변환됩니다.

    "문 블록"은 { } 로 둘러싸인 하나 이상의 문 모음입니다. 문 블록에 문이 하나만 있는 경우 { } 도 생략할 수 있습니다.

  • 실행이 완료된 후 수식으로 돌아가서 다시 수식의 값을 계산하여 판정합니다. 수식의 값이 참이면 계속해서 "문 블록"을 실행합니다... 이 과정은

  • 수식의 값이 나올 때까지

    • 반복됩니다.

  • 루프에서 벗어나기 전에 false이면 아래 명령문을 실행합니다.

while 문의 흐름도는 다음과 같습니다.

1.png

일반적으로 "식"은 비교 연산자나 논리 연산자를 사용하여 계산한 값입니다.

예시 
코드

는 다음과 같습니다.

var i = 1;
동안( i <= 5) {
    document.write(i+", ");
    나++;
}
</script>

0.png

참고:

루프 문을 작성할 때 조건식의 결과가 false(즉, 부울 값 false)일 수 있는지 확인해야 합니다. 왜냐하면 표현식의 결과가 true인 한 루프는 계속되고 더 이상 그렇지 않기 때문입니다. 이러한 종류의 실패에 대해 자동으로 중지되는 루프를 일반적으로 "무한 루프" 또는 "무한 루프"라고 합니다.

실수로 무한 루프를 생성하면 브라우저나 컴퓨터가 정지될 수 있습니다.

표현식이 항상 참이고 루프 조건이 항상 참인 경우 while 루프는 계속 실행되고 끝나지 않아 "무한 루프"가 됩니다.

var i = 1;
동안(i){
    console.log(i);
}

프로그램을 실행한 후 사용자가 강제로 닫을 때까지 변수 i 의 값이 출력됩니다.

JS while 루프 예제

[예제 1] while 루프를 사용하여 1부터 100 사이의 모든 정수의 합을 계산합니다:

<script>
var i = 1;
var 합계=0;
동안(i<=100){
	합+=i;
	나++;
}
console.log("100에 1을 더한 값은 다음과 같습니다: "+sum);
</script>

출력 결과:

1.png

[예시 2] 1900년부터 2020년까지의 윤년을 모두 찾아 한줄에 6개씩 출력 :

<script>
var i = 1900;
var count = 0; //윤년 횟수를 계산합니다. while (i <= 2020) {
    //윤년인지 판단 if (i % 4 == 0 && i % 100 != 0 || i % 400 == 0) {
        document.write(i + "&nbsp;&nbsp;");
        카운트++;
        if (개수 % 6 == 0) {
            document.write("<br/>");
        }
    }
    나++;
}
</script>

2.png

2. JS while 루프 중첩 구조

while 루프도 중첩 효과를 얻을 수 있습니다. 즉, 하나 이상의 while 루프가 while 루프 내에 중첩됩니다.

구문 형식:

while(조건 1){
     // 조건 1이 참일 때 실행되는 코드 while(조건 2){
          // 조건 2가 참일 때 실행되는 코드...
     }
}

요약: 중첩은 포함을 의미합니다. 소위 while 루프 중첩은 while 내에 중첩되는 것입니다.

여기서는 두 개의 while 루프 중첩을 정의합니다. 물론 원하는 만큼 while 루프를 중첩할 수 있습니다.

while 루프 실행 과정을 이해합니다.

내부 루프 실행이 완료된 후 다음 외부 루프의 조건 판단이 실행됩니다.

7.png

예 1: 중첩 루프를 사용하여 카운터 인쇄

<script type="text/javascript">
	var 나는 = 0;
	동안(i < 2){
	   console.log("i =", i);
	   var j = 0;
	   동안(j < 2){
		console.log("tj =", j);
		j += 1;
	   }
	   나++;
	}
	console.log("오버");
</script>

9.png

먼저 가장 바깥쪽 while 루프 중첩을 정의합니다. 카운터 변수 i는 0부터 시작하고 종료 조건은 i < 2입니다. 루프가 실행될 때마다 i의 값은 1씩 증가하고 i의 현재 값은 인쇄됩니다.

가장 바깥쪽 루프 내부에는 내부 루프도 정의됩니다. 카운터 변수 j는 0부터 시작하고 종료 조건은 i < 2입니다. 루프가 실행될 때마다 j의 값은 1씩 증가하고 현재 값은 j입니다. j가 인쇄됩니다.

while 루프 중첩 요약

JavaScript의 while 루프는 중첩 효과를 얻을 수도 있습니다. 즉, 하나 이상의 while 루프가 while 루프 내에 중첩됩니다.

예 2:

<스크립트>
/*
1. 며느리를 3번 반복해서 인쇄했는데 내가 틀렸다 2. 설거지 3. 위의 벌칙은 3일 동안 반복되는 벌칙이다 - 한 벌은 반복되어야 한다 – 잠시 루프에 넣습니다 */
변수 j = 0
동안(j < 3){
    변수 i = 0
    동안(i < 3){
        document.write('며느리님, 제가 틀렸습니다<br>')
        나는 += 1;
	}
    document.write('설거지<br>')
	document.write('한 세트의 처벌이 끝났습니다!!!!!!!!!!!!<br>')
    j += 1;
}
</script>

6.png

2: do-while 루프

while 루프 외에 do-while 루프도 있습니다.

do-while 루프 문은 루프 본문의 "直到型블록"을 먼저 실행한 다음 루프 조건이 true인지 판단하여 false인 경우 계속 루프를 실행합니다. , , 루프가 종료됩니다.

따라서 표현식의 결과에 관계없이 do-while 루프 문은 "문 블록"을 적어도 한 번 실행합니다.

do-while 루프 문의 특징: 루프 본문을 먼저 실행한 다음 루프 조건이 true인지 확인합니다.

1. JS do-while 루프 구문

do{
    명령문 블록;  
}while(expression);//표현식은

루프 조건문으로 구문 분석됩니다.

  • 먼저 루프 본문의 "문 블록"을 한 번 실행한 다음 "표현식"의 값을 결정합니다. "표현식"의 값이 true이면 반환하여 루프 본문의 문 블록을 다시 실행합니다... 이 과정은 수식의 값이 false일 때 루프를 빠져나올 때까지 반복됩니다

  • . 이때 루프가 종료되고 다음 명령문이 실행됩니다.

참고:

  • while 루프와 마찬가지로 do-while 루프의 "표현식"의 계산 결과는 불리언 TRUE 또는 FALSE여야 합니다. 다른 유형의 값인 경우 자동으로 불리언 값으로 변환됩니다.

  • do-while 문 끝에 있는 세미콜론은 생략할 수 없습니다(반드시 있어야 함) ; do while 루프 구문의 일부입니다.

do-while 루프 문의 흐름도는 다음과 같습니다.

1.png

JS do-while 루프 예제

[예1] do-while을 사용하여 1~5까지 출력:

<script>
var i = 1;
하다 {
    document.write(i+", ");
    나++;
}동안( i <= 5);
</script>

3.png

[예제 2] while 루프를 사용하여 1부터 100 사이의 모든 정수의 합을 계산합니다:

<script>
var i = 1;
var 합계=0;
하다{
	합+=i;
	나++;
}동안(i<=100);
console.log("1 + 2 + 3 + ... + 98 + 99 + 100 = "+합계);
</script>

4.png

[예시 3] 1900년부터 2020년 사이의 윤년을 모두 찾아보세요

<script>
var i = 1900;
var count = 0; //윤년 횟수를 계산합니다. do {
    //윤년인지 판단 if (i % 4 == 0 && i % 100 != 0 || i % 400 == 0) {
		console.log(i);
    }
    나++;
}동안(i <= 2020);
</script>

5.png

2. JS do-while 루프 중첩 구조

do while 루프는 중첩 효과를 얻을 수도 있습니다. 즉, 하나 이상의 do while 루프가 do while 루프 내에 중첩됩니다. 이 작성 방법은 while 루프의 중첩과 유사합니다.

구문:

do{
    // 명령문 블록 1;
    하다{
    	// 명령문 블록 2;
    	하다{
    		// 명령문 블록 2;
    		...
	}while(조건 3);
    }while(조건 2);
}while(조건 1);

여기서는 do while 루프의 세 개의 중첩을 정의했습니다. 물론 원하는 만큼 do while 루프를 중첩할 수 있습니다.

사례: 루프 중첩을 사용하여 카운터 
<script type="text/javascript">

인쇄

	var 나는 = 0;
	하다{
		console.log("i =", i);
		var j = 0;
		하다{
			console.log("tj =", j);
			j += 1;
		}동안(j < 2);
		나++;
	}동안(i < 2);
	console.log("오버");
</script>

8.png

먼저 가장 바깥쪽 do while 루프 중첩을 정의합니다. 카운터 변수 i는 0부터 시작하고 종료 조건은 i < 2입니다. 루프가 실행될 때마다 i 값은 1씩 증가하고 현재 값은 나는 인쇄될 것이다.

가장 바깥쪽 루프 내부에는 내부 루프도 정의됩니다. 카운터 변수 j는 0부터 시작하고 종료 조건은 i < 2입니다. 루프가 실행될 때마다 j의 값은 1씩 증가하고 현재 값은 j입니다. j가 인쇄됩니다.

do while 루프 중첩 요약

JavaScript의 do while 루프는 중첩 효과를 얻을 수도 있습니다. 즉, 하나 이상의 do while 루프가 do while 루프 내에 중첩됩니다.

[추천 학습: JavaScript 고급 튜토리얼]

위는 JS 루프 학습의 세부 내용입니다: while 루프 문 사용(자세한 예). 자세한 내용은 PHP 중국어 웹사이트의 다른 관련 기사를 참고하세요!
관련 기사