JavaScript循环基本语法

目录

一、for循环

二、for循环嵌套

三、while循环

四、continue、break


一、for循环

语法结构:

for(初始化变量;条件表达式;操作表达式){

   //循环体

}

举例:

  for (var i = 1; i <= 5; i++) {

        console.log('数字为:' + i + '\n');

  }

-  初始化变量  初始化一个计数器,用var声明新的变量,这个变量帮我们记录次数。

-  条件表达式  用于执行循环的条件,满足继续执行,不满足退出。

-  操作表达式  主要更新循环变量,在循环体结束后执行。

断点调试

断点调试:在程序的某一行设置一个断点,调试时,程序运行到这一行就会停住,然后你可以一步一步往下调试,调试过程中可以看各个变量当前的值,出错的话,调试到出错的代码行即显示错误,停下。断点调试可以帮助观察程序的运行过程。

断点调试的流程:

1、浏览器中按 F12--> sources -->找到需要调试的文件-->在程序的某一行设置断点

2、Watch: 监视,通过watch添加变量可以监视变量的值的变化。

3、摁下F11,程序单步执行,让程序一行一行的执行,观察watch中变量的值的变化。

二、for循环嵌套

定义:在循环语句中在定义一个循环语句的语法结构。

  for (外循环的初始; 外循环的条件; 外循环的操作表达式) {

      for (内循环的初始; 内循环的条件; 内循环的操作表达式) {  

         //需执行的代码;

     }

  }

举例:

  var star = '';

  for (var j = 1; j <= 5; j++) {

      for (var i = 1; i <= 5; i++) {

        star += '*'

      }

      // 每次满 5个*就加一次换行

      star += '\n'

  }

  console.log(star);

总结:

- 外层循环执行一次,内层循环要执行全部次数。

-  for循环是循环条件和数字直接相关的循环。

三、while循环

语法结构:

while (条件表达式) {

    // 循环体代码

}

举例:

 var num = 1;

 while (num <= 10) {

     console.log(num + '\n');

     num++;

  }

- 条件表达式为true,则执行循环体代码,否则退出循环。

- 循环代码执行完结束后,会继续执行条件表达式,它必须有条件否则会出现死循环。

do {

    // 循环体代码 - 条件表达式为 true 时重复执行循环体代码

} while(条件表达式);

举例:

do{

var msg= prompt('密码:123456'); //输入密码为123456后循环体结束

}while(msg!=”123456”);

alert(“密码正确”);

- 与while循环方式一致,区别在于它先执行下循环体条件,在判断表达式。

- 循环体至少会执行一次。

四、continue、break

continue :关键字用于立即跳出本次循环,继续下一次循环。

 for (var i = 1; i <= 5; i++) {

     if (i == 3) {

          continue; // 跳出本次循环,跳出的是第3次循环

      }

      console.log('提示信息:' + i + “\n”);

 }

break 关键字用于立即跳出整个循环(循环结束)。

for (var i = 1; i <= 5; i++) {

     if (i == 3) {

          break; // 跳出整个循环。 

      }

      console.log('提示信息:' + i + “\n”);

 }

练习题

1.打印九九乘法表。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			var str = "";
			for (var i = 1; i <= 9; i++) {
				for (var j = 1; j <= i; j++) {
					str = str + j + "*" + i + "=" + j * i + "\t";
				}
				str = str + "\n";
			}
			console.log(str);
		</script>
	</body>
</html>

实现效果

 2.打印倒三角形案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
          var src = '';
			for (var i = 1; i < 6; i++) {
				for (var j = 1; j < 7 - i; j++) {
					src = src + '*';
				}
				src = src + '\n';
			}
			console.log(src);
		</script>
	</body>
</html>

实现效果

 3.制作一个简易的计算器,浏览器接收+,-*/、接收两个数,后计算结果。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			var first = Number(prompt("请输入第1个数:"));
			var symbol = prompt("请输入运算符:");
			var end = Number(prompt("请输入第2个数:"));
			var sum;
			switch (symbol) {
				case "+":
					sum = first + end;
					break;
				case "-":
					sum = first - end;
					break;
				case "*":
					sum = first * end;
					break;
				default:
					sum = first / end;
			}
			console.log(sum);
		</script>
	</body>
</html>

实现效果

猜你喜欢

转载自blog.csdn.net/qq_65715980/article/details/125528007