찾다

집 >웹 프론트엔드 >JS 튜토리얼 >JS 루프 학습: while 루프 문 사용(자세한 예)

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

青灯夜游
青灯夜游원래의
2022-08-03 18:04:318450검색

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

루프(Looping)는 하나의 작업을 반복적으로 수행하는 것입니다. 코드를 작성하는 과정에서 일부 데이터를 순회하거나 특정 문자열을 반복적으로 출력하는 등 반복적으로 수행해야 하는 작업을 자주 접하게 됩니다. 이렇게 반복되는 작업을 수행하려면 루프를 사용하여 완료해야 합니다.

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

1: while 루프

while 루프 문은 when type 루프 문입니다. 조건이 만족되면 루프 본문이 실행됩니다. 만족하지 않으면 중지됩니다. 当型循环语句，先对循环条件进行判断，当条件满足，则执行循环体，不满足时则停止。

作用：反复执行某一项操作，直到指定的条件不成立。

特点：先判断表达式，当表达式结果为真时执行相应的语句。

1、JS while 循环语法

while(表达式){    //表达式为循环条件
     // 要执行的代码
}

语句解析：

  • 先计算“表达式”的值，当值为真时， 执行循环体内的“PHP语句块”；

    说明：“表达式”的计算结果是布尔类型（ TRUE 或 FALSE）的，如果是其他类型的值也会自动转换为布尔类型的值（因为PHP是弱语言类型，会根据变量的值，自动把变量转换为正确的数据类型）。

    “语句块”就是由{ }包围的一个或多个语句的集合；如果语句块中只有一个语句，也可以省略{ }。

  • 执行结束后，返回到表达式，再次计算表达式的值进行判断，当表达式值为真，则继续执行“语句块”……这个过程会一直重复

  • 直到表达式的值为假时才跳出循环，执行while 下面的语句。

while语句的流程图如下所示：

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

通常“表达式”是使用比较运算符或者逻辑运算符计算后的值

示例代码如下：

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

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

注意事项

在编写循环语句时，一定要确保条件表达式的结果能够为假（即布尔值 false），因为只要表达式的结果为 true，循环会一直持续下去，不会自动停止，对于这种无法自动停止的循环，我们通常将其称为“无限循环”或“死循环”。

如果不小心造成无限循环，可能会导致浏览器或者计算机卡死。

如果表达式一直为真，循环条件一直成立，则while 循环会一直执行下去，永不结束，成为“死循环”

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

运行程序后，会一直输出变量i

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

특징:

수식을 먼저 판단하고, 수식 결과가 참일 때 해당 문을 실행합니다.


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

<script>
var i = 1;
var sum=0;
while(i<=100){
	sum+=i;
	i++;
}
console.log("1加到100的值为："+sum);
</script>

명령문 분석:

  • JS 루프 학습: while 루프 문 사용(자세한 예)먼저 "표현식"의 값을 계산합니다. is true인 경우 루프 본문에서 "PHP 문 블록"을 실행합니다.

    참고: "expression"의 계산 결과는 부울 유형(TRUE 또는 FALSE)입니다. 자동으로 부울 유형 값으로 변환됩니다. (PHP는 약한 언어 유형이므로 변수 값을 기반으로 변수를 올바른 데이터 유형으로 자동 변환합니다.) "명령문 블록"은 { }로 둘러싸인 하나 이상의 명령문 모음입니다. 명령문 블록에 명령문이 하나만 있는 경우 { }도 가능합니다. 생략합니다.

  • 실행이 완료된 후 표현식으로 돌아가서 다시 표현식의 값을 계산하여 표현식 값이 true이면 "문 블록"을 계속 실행합니다... 이 과정이 반복됩니다.

  • 표현식의 값이 false가 될 때까지 루프를 중단하지 말고 아래 명령문을 실행하세요.

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

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

보통 '식'은 비교연산자나 논리연산자를 사용하여 계산한 값입니다

샘플코드는 다음과 같습니다. 

<script>
var i = 1900;
var count = 0; //计数闰年的个数
while (i <= 2020) {
    //判断是否是闰年
    if (i % 4 == 0 && i % 100 != 0 || i % 400 == 0) {
        document.write(i + "  ");
        count++;
        if (count % 6 == 0) {
            document.write("<br/>");
        }
    }
    i++;
}
</script>
JS 루프 학습: while 루프 문 사용(자세한 예)

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

참고

루프 문을 작성할 때 다음을 확인하세요. 조건 표현식 결과가 false일 수 있습니다(즉, 부울 값 false). 표현식 결과가 true인 한 루프는 계속되고 자동으로 중지할 수 없는 이러한 유형의 루프에서는 자동으로 중지되지 않습니다. , 우리는 일반적으로 이를 "무한 루프" 또는 "무한 루프"라고 부릅니다.

JS 루프 학습: while 루프 문 사용(자세한 예)실수로 무한 루프를 생성하면 브라우저나 컴퓨터가 정지될 수 있습니다.

🎜 표현식이 항상 true이고 루프 조건도 항상 true인 경우 while 루프는 계속 실행되고 끝나지 않아 "무한 루프"가 됩니다. 🎜
while(条件1){
     // 条件1成立执行的代码

     while(条件2){
          // 条件2成立执行的代码
           ......
     }
}
🎜프로그램을 실행한 후 변수 i는 사용자가 강제로 닫을 때까지 항상 출력 값입니다. 🎜🎜🎜JS while 루프 예시🎜🎜🎜【예제 1】while 루프를 사용하여 1~100 사이의 모든 정수의 합을 계산합니다. 🎜
<script type="text/javascript">
	var i = 0;
	while(i < 2){
	   console.log("i =", i);
	   var j = 0;
	   while(j < 2){
		console.log("\tj =", j);
		j += 1;
	   }
	   i++;
	}
	console.log("Over");
</script>
🎜출력 결과: 🎜🎜🎜🎜🎜🎜【예제 2】부터 연도를 알아보세요. 1900 ~ 2020 연도 사이의 모든 윤년은 한 줄에 6개씩 출력됩니다. 🎜
<script>
/*
1. 循环打印3次媳妇，我错了
2. 刷碗
3. 上面是一套惩罚，这一套惩罚重复执行3天----一套惩罚要重复执行---放到一个while循环里面
*/
var j = 0
while(j < 3){
    var i = 0
    while(i < 3){
        document.write(&#39;媳妇，我错了<br>&#39;)
        i += 1;
	}
    document.write(&#39;刷碗<br>&#39;)
	document.write(&#39;一套惩罚就结束了!!!!!!!!!!!!<br>&#39;)
    j += 1;
}
</script>
🎜🎜🎜🎜🎜🎜2. JS while 루프 중첩 구조 🎜🎜🎜🎜while 루프도 중첩 효과, 즉 while 루프 Nest 내부를 얻을 수 있습니다. 하나 이상의 while 루프. 🎜🎜🎜 문법 형식: 🎜🎜
do{
    语句块;  
}while(表达式);//表达式为循环条件
🎜🎜🎜 요약: 🎜 while 루프 중첩은 while 내부에 중첩되는 것을 의미합니다. 🎜🎜여기에서는 두 개의 while 루프 중첩을 정의합니다. 물론 원하는 만큼 while 루프를 중첩할 수 있습니다. 🎜🎜🎜🎜while 루프 실행 프로세스 이해하기🎜🎜🎜내부 루프가 완료되면 외부 루프의 다음 조건부 판단이 실행됩니다. 🎜🎜🎜🎜🎜🎜예 1: 중첩 루프를 사용하여 카운터 인쇄🎜🎜
<script>
var i = 1;
do {
    document.write(i+", ");
    i++;
}while( i <= 5);
</script>
🎜🎜🎜

首先，我们定义了一个最外层的 while 循环嵌套，计数器 变量 i 从 0 开始，结束条件是 i

在最外层循环的里面，同时又定义了一个内部循环，计数器变量 j 从 0 开始，结束条件是 i

while循环嵌套总结

JavaScript 的 while 循环也可以实现嵌套的效果，即 while 循环里面嵌套一个或多个 while 循环。

示例2：

<script>
/*
1. 循环打印3次媳妇，我错了
2. 刷碗
3. 上面是一套惩罚，这一套惩罚重复执行3天----一套惩罚要重复执行---放到一个while循环里面
*/
var j = 0
while(j < 3){
    var i = 0
    while(i < 3){
        document.write(&#39;媳妇，我错了<br>&#39;)
        i += 1;
	}
    document.write(&#39;刷碗<br>&#39;)
	document.write(&#39;一套惩罚就结束了!!!!!!!!!!!!<br>&#39;)
    j += 1;
}
</script>

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

二：do-while循环

除了while循环，还有一种 do-while 循环。

do-while循环语句是一种“直到型”循环语句，它是先在执行了一次循环体中的“语句块”之后，然后再对循环条件进行判断，如果为真则继续循环，如果为假，则终止循环。

因此：不论表达式的结果，do-while循环语句至少会执行一次“语句块”。

do-while循环语句的特点：先执行循环体，然后判断循环条件是否成立。

1、JS do-while 循环语法

do{
    语句块;  
}while(表达式);//表达式为循环条件

语句解析：

  • 先执行一次循环体中的“语句块”，然后判断“表达式”的值，当“表达式”的值为真时，返回重新执行循环体中的语句块……这个过程会一直重复

  • 直到表达式的值为假时，跳出循环，此时循环结束，执行后面的语句。

说明：

  • 和while循环一样，do-while循环中“表达式”的计算结果一定是布尔型的 TRUE 或 FALSE，如果是其他类型的值也会自动转换为布尔类型的值。

  • do-while语句最后的分号;是无法省略的（一定要有），它是do while循环语法的一部分。

do-while循环语句的流程图如下所示：

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

JS do-while 循环示例

【示例1】使用 do-while 输出1~5数字：

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

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

【示例2】使用 while 循环计算 1~100 之间所有整数的和：

<script>
var i = 1;
var sum=0;
do{
	sum+=i;
	i++;
}while(i<=100);
console.log("1 + 2 + 3 + ... + 98 + 99 + 100 = "+sum);
</script>

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

【示例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++;
}while (i <= 2020);
</script>

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

2、JS do-while 循环嵌套结构

do while循环 也可以实现嵌套的效果，即 do while 循环里面嵌套一个或多个 do while 循环。这种写法就类似于 while 循环 的嵌套。

语法：

do{
    // 语句块1;
    do{
    	// 语句块2;
    	do{
    		// 语句块2;
    		......
	}while(条件3);
    }while(条件2);
}while(条件1);

这里，我们定义了三个 do while 循环的嵌套，当然，我们可以嵌套任意多个的 do while 循环。

案例：使用循环嵌套，打印计数器

<script type="text/javascript">
	var i = 0;
	do{
		console.log("i =", i);
		var j = 0;
		do{
			console.log("\tj =", j);
			j += 1;
		}while(j < 2);
		i++;
	}while(i < 2);
	console.log("Over");
</script>

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

首先，我们定义了一个最外层的 do while 循环嵌套，计数器 变量 i 从 0 开始，结束条件是 i

在最外层循环的里面，同时又定义了一个内部循环，计数器变量 j 从 0 开始，结束条件是 i

do while循环嵌套总结

JavaScript 的 do while 循环也可以实现嵌套的效果，即 do while 循环里面嵌套一个或多个 do while 循环。

【推荐学习：javascript高级教程】

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

php JavaScript 数据类型 运算符 比较运算符 逻辑运算符 while 字符串 布尔型 循环 布尔类型 JS
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：JavaScript 연산자에 대해 이야기해 봅시다.다음 기사：JavaScript 연산자에 대해 이야기해 봅시다.

관련 기사

더보기