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

이전 글 "JS 루프 학습: while 루프문의 활용(상세 예시)"에서 while 루프와 do while 루프에 대해 간략하게 알아보았으며, 오늘은 또 다른 종류의 루프인 for 루프를 소개하겠습니다. 성명서, 도움이 되길 바라며 모두가 도와드립니다!

1: for 루프

for 루프는 for 문에서 루프 수를 제어하는 ​​변수를 미리 정의하므로 for 루프 문은 알려진 루프 수에 따라 루프 작업을 수행할 수 있습니다. 루프이며 루프 횟수가 명확하게 알려진 상황에 적합합니다. 스크립트를 실행해야 하는 횟수입니다.

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

for (初始化语句; 循环条件; 变量更新--自增或自减) {
    语句块;   
}

for 루프 문은 4개 부분으로 나눌 수 있습니다. ()号中的三个表达式和{}의 "문 블록"을 아래에서 분석해 보겠습니다.

명령문 분석:

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

• 루프 조건(표현식 2): 루프 실행의 제한 조건으로, 루프 본문의 코드 실행 여부를 제어하는 ​​데 사용됩니다. 조건이 TRUE이면 루프가 계속되고, 조건이 FALSE이면 루프가 종료됩니다. 그리고 루프는 즉시 종료됩니다.
  

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

• Statement 블록: 조건이 참이라고 판단될 때 실행해야 하는 여러 코드입니다.
  

위의 설명이 조금 복잡합니까? for 루프의 실행 과정을 보다 직관적으로 이해하기 위해 for 루프 문의 실행 흐름도를 살펴보겠습니다.

for 루프, 다음으로 실제 작업을 수행하고 이를 마스터했는지 확인하기 위해 작은 질문을 해보세요!

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

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

루프의 세 표현식에 대해

JS for 루프에서 괄호 안의 세 표현식은 생략할 수 있지만 구분을 위해 사용됩니다. 다음 예와 같이 세 가지 표현식은 생략할 수 없습니다.

// 省略第一个表达式
var i = 0;
for (; i < 5; i++) {
    // 要执行的代码
}
// 省略第二个表达式
for (var y = 0; ; y++) {
    if(y > 5){
        break;
    }
    // 要执行的代码
}
// 省略第一个和第三个表达式
var j = 0;
for (; j < 5;) {
    // 要执行的代码
    j++;
}
// 省略所有表达式
var z = 0;
for (;;) {
    if(z > 5){
        break;
    }
    // 要执行的代码
    z++;
}

2: for 루프 중첩어떤 종류의 루프라도 중첩될 수 있습니다. 주기).

문법 형식:

for (初始化语句1; 循环条件; 变量更新--自增或自减) {
    //语句块1;   
    for (初始化语句2; 循环条件; 变量更新--自增或自减) {
        //语句块2;
        for (初始化语句3; 循环条件; 变量更新--自增或自减) {
            //语句块3; 
            .....  
        }
    }
}

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

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

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

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

행 9개와 열 9개가 있습니다. 총계, 모든 줄에는 여러 표현이 있습니다.
i행에는 i*1에서 시작하여 i*i로 끝나는 표현식이 있습니다(루프를 통해 이 효과를 얻을 수 있습니다).
따라서 출력을 제어하려면 이중 루프가 필요합니다. 외부 루프는 행 수 i(i는 최소 1~최대 9)를 제어하고 내부 루프는 j 열(j는 최소 1~최대)을 제어합니다. i)와 같습니다.

구현 코드:

for(var i = 1; i <= 9; i++){     //外层循环控制行
	for(var j = 1; j <= i; j++) //内层循环控制列
	{
		document.write(j+"*"+i+"="+j*i+"   ");
	}
	document.write("</br>");
}

출력 결과:

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 스타일을 추가하여 수정합니다.

table {
	width: 600px;
	border-collapse: separate;
}

table td {
	border: #000 1px solid;
	text-align: center;
}

출력 결과 보기:

[권장 학습:

javascript 고급 튜토리얼

]

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