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

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

저자：Eve Cole 업데이트 시간：2022-08-08 08:55:02
이전 글 "JS 루프 학습: While 루프문의 활용(상세예)"에서 while 루프와 do while 루프에 대해 간략하게 알아보았으며, 오늘은 또 다른 종류의 루프인 for 루프문 I을 소개하겠습니다. 모두에게 도움이 되길 바랍니다.

1: for 루프

for 루프는 for 문에서 루프 수를 제어하는 ​​변수를 미리 정의하므로 for 루프 문은 알려진 루프 수에 따라 루프 작업을 수행할 수 있습니다. 스크립트를 실행해야 하는 경우는 명확하게 알려져 있습니다.

for 루프의 구문 형식은 다음과 같습니다.

for(초기화 문, 루프 조건, 변수 업데이트-증가 또는 감소) {
    명령문 블록;   
}

for 루프 문은 () 의 세 가지 표현식과 {} 의 "문 블록"의 4개 부분으로 분해될 수 있습니다. 아래에서 분석해 보겠습니다.

진술 분석:

  • 초기화 문(표현식 1): 주로 카운터를 설정하는 데 사용되는 변수 값, 즉 루프 시작 부분의 값을 초기화하는 데 사용됩니다. 이 문은 첫 번째 루프 동안에만 실행되며 초기화되지 않습니다. 앞으로 다시 실행됩니다.

  • 루프 조건(표현식 2): 루프 실행의 제한 조건으로, 조건이 TRUE이면 루프 본문의 코드를 실행할지 여부를 제어하고, 조건이 FALSE이면 루프를 종료하고 루프를 종료합니다. 즉시.

  • 변수 업데이트(수식 3): 루프가 실행될 때마다 카운터 값이 즉시 수정되어 루프 조건이 점차 "참이 아님"이 되는 식입니다.

  • 문장 블록(Statement block): 조건이 참이라고 판단될 때 실행되어야 하는 코드의 개수입니다.

위의 설명이 조금 혼란스럽나요? for 루프의 실행 과정을 보다 직관적으로 이해하기 위해 for 루프 문의 실행 흐름도를 살펴보겠습니다.

1.jpg

이제 for 루프의 실행 과정을 이해했으므로 실제 작업을 수행하고 이를 마스터했는지 확인하기 위해 작은 질문을 해보자!

예: 1에서 100까지의 합을 계산합니다.

<script type="text/javascript">
	var 합계=0;
	for(var i=1; i<=100; i++){
		합+=i;
	}
	console.log('1 + 2 + 3 +...+ 99 + 100 = '+sum);
</script>

1.png

JS for 루프

의 세 가지 표현식은

생략할 수 있지만 다음 예와 같이 세 표현식을 구분하는 데 사용되는 세미콜론은 생략할 수 없습니다. 
// 첫 번째 표현식 생략 Formula var i = 0;
for (; i < 5; i++) {
    //실행할 코드}
// 두 번째 표현식 생략 for (var y = 0; ; y++) {
    만약(y>5){
        부서지다;
    }
    //실행할 코드}
// 첫 번째와 세 번째 표현식을 생략합니다. var j = 0;
(; j < 5;) {
    // 실행할 코드 j++;
}
// 모든 표현식 생략 var z = 0;
을 위한 (;;) {
    if(z>5){
        부서지다;
    }
    // 실행할 코드 z++;
}

2: for 루프 중첩

어떤 종류의 루프라도 중첩될 수 있습니다(즉, 하나 이상의 루프가 루프에 정의됩니다).

구문 형식:

for(초기화 문 1; 루프 조건; 변수 업데이트 - 자체 증가 또는 자체 감소) {
    //문 블록 1;   
    for(초기화 명령문 2; 루프 조건; 변수 업데이트 - 자체 증가 또는 자체 감소) {
        //문 블록 2;
        for(초기화 명령문 3; 루프 조건; 변수 업데이트-증가 또는 감소) {
            //문 블록 3; 
            .....  
        }
    }
}

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

사례: for 루프는 구구단을 구현합니다.

먼저 구구단을 살펴보겠습니다.

1.png

차트의 패턴을 그릴 수 있습니다.

  • 총 9개의 행과 9개의 열이 있고 각 행에는 여러 표현식이 있습니다.

  • i번째 줄에는 i*1에서 시작하여 i*i로 끝나는 표현식이 있습니다(루프를 통해 이 효과를 얻을 수 있습니다).

따라서 출력을 제어하려면 이중 루프가 필요합니다. 외부 루프는 행 수 i(i는 최소 1이고 최대는 9)를 제어하고 내부 루프는 열 j(j는 최소 1이고 최대는 동일함)를 제어합니다. 나)에게.

구현 코드:

for(var i = 1; i <= 9; i++){ //외부 루프는 행을 제어합니다. for(var j = 1; j <= i; j++) //내부 루프는 열을 제어합니다.
		document.write(j+"*"+i+"="+j*i+"&nbsp;&nbsp;&nbsp;");
	}
	document.write("</br>");
}

출력 결과:

3.png

또한 99 구구단을 테이블에 넣고 시작 그림과 같이 출력할 수도 있습니다.

document.write("<table>");

for (var i = 1; i <= 9; i++) { //외부 루프 제어 라인 document.write("<tr>");
	for (var j = 1; j <= i; j++) //내부 루프 제어 열 {
		document.write("<td>" + j + "*" + i + "=" + j * i + "</td>");
	}
	//줄 바꿈, 각 줄에 출력되는 표현식 수 제어 document.write("</tr>");
}
document.write("</table>");

그런 다음 CSS 스타일을 추가하여 수정합니다.

테이블 {
	너비: 600px;
	국경 붕괴: 분리;
}

테이블 td {
	테두리: #000 1px 솔리드;
	텍스트 정렬: 중앙;
}

출력을 살펴보세요.

2.png

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

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