javascript基础（控制流程（循环 while，for））（十二）

最新推荐文章于 2024-09-21 11:29:05 发布

咸鸭蛋炒饭

最新推荐文章于 2024-09-21 11:29:05 发布

阅读量437

点赞数

分类专栏： HTML5基础篇文章标签： javascript 经验 html

本文链接：https://blog.csdn.net/u010853130/article/details/54923153

版权

HTML5基础篇专栏收录该内容

121 篇文章 7 订阅

订阅专栏

有编程基础的，自学时可以略过

1.while和do...while：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			/*
			 * 向页面中输出1-10 10个数
			 */
			
			//创建一个变量
			/*var n = 0;
			document.write(++n + "<br />");*/
			
			/*
			 * 循环语句
			 * 	- 通过循环语句，我们可以使一些语句反复的执行多次
			 * 	- 分类
			 * 		- while语句
			 * 		- do...while语句
			 * 		- for语句
			 * 
			 * 	- while语句（while循环）
			 * 		- 语法：
			 * 			while(条件表达式){
			 * 				语句...
			 * 			}
			 * 
			 * 		- 执行流程：
			 * 			while语句在执行时，会先对条件表达式进行求值判断
			 * 				如果结果为true，则执行循环体，执行完毕以后，继续对条件表达式进行判断
			 					如果为true，则继续执行循环体，以此类推。
			 * 				如果结果为false，则退出循环
			 * 
			 * 	- do...while语句
			 * 		- 语法：
			 * 			do{
			 * 				语句...
			 * 			}while(条件表达式)
			 * 
			 * 		- 执行流程：
			 * 			do...while语句在执行时，会先执行do后的的循环体，
			 * 				然后再判断while后的条件表达式，如果判断结果为false，则终止循环
			 * 				如果判断结果为true，则继续执行循环体，执行完成以后继续判断依此类推
			 * 			它和while的区别就是，while是先判断后执行，而do...while是先执行后判断
			 * 			只不过do...while可以保证循环体至少执行一次。
			 * 
			 * 			如果需要确保循环体至少执行一次，则使用do...while
			 * 			否则使用while。
			 */
			
			var n = 0;
			
			//写一个循环
			//像这种将条件表达式写死为true，我们称为死循环
			//死循环就是会一直执行的循环，慎用
			/*while(true){
				alert(n++);
				
				if(n == 10){
					//可以使用break来结束循环
					break;
				}
			}*/
			
			/*while(true){
				document.write(++n + "<br />");
				
				if(n==3767){
					break;
				}
			}*/
			
			
			//创建一个执行10次的循环
			
			//1.初始化的表达式(初始化一个变量)
			var i = 0;
			
			//2.条件表达式（循环执行的条件）
			/*while(i < 0){
				
				//3.更新表达式(对初始化变量进行更新)
				i++;
				
				document.write(i + "<br />");
				
			}*/
			
			do{
				//3.更新表达式(对初始化变量进行更新)
				i++;
				
				document.write(i + "<br />");
			}while(i<0)
			
			
			
			
		</script>
	</head>
	<body>
	</body>
</html>

2.for循环：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			/*
			 * for循环（for语句）
			 * 	- for循环和while循环本质上没有区别，只不过for循环将循环三个要件，统一写到一起
			 *  - 语法：
			 * 		for(①初始化表达式;②条件表达式;④更新表达式){
			 * 			③语句...
			 * 		}
			 * 
			 * 		- 执行流程：
			 * 			①执行初始化表达式，来初始化变量
			 * 			②执行条件表达式，来判断是否执行循环体
			 * 				如果条件表达式为false，则直接退出循环
			 * 				如果条件表达式为true，则执行循环体
			 * 			③执行循环体
			 * 			④执行更新表达式
			 * 			重复②
			 * 
			 * 			- 在for循环中初始化表达式只会执行一次
			 * 			- for循环的功能和while循环的功能是重复，
			 * 				可以互相代替，实际开发中for循环用的会多一些
			 * 	
			 */
			
			//创建一个执行10次的for循环
			for(var i = 0 ; i < 10 ; i++){
				document.write(i + "<br />");
			}
			
			/*var i = 0;
			
			for( ; i < 10 ; ){
				
				document.write(i + "<br />");
				i++;
			}*/
			
			//如果for循环中将所有的表达式都省略，就写两个; 则此时它就是一个死循环会一直执行
			/*for(;;){
				alert("hello");
			}*/
			
			
			//创建一个执行10次的循环
			//1.初始化表达式
			var n = 0;
			
			//2.条件表达式
			/*while (n < 10){
				
				//3.更新表达式
				n++;
				
				document.write(n + "<br />");
			}*/
			
			
			
			
		</script>
	</head>
	<body>
	</body>
</html>

3.嵌套for循环

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			/*
			 
			 	在页面中打印如下图形
			 	
			 	*      1   i=0    j<1
			 	**	   2   i=1	  j<2		
			 	***    3   i=2    j<3
			 	****   4   i=3    j<4
			 	*****  5   i=4    j<5
			 	 
			 	*****
			 	*****
			 	*****
			 	*****
			 	*****
			 	
			 	
			 	*****  1   i=0    j<5
			 	****   2   i=1	  j<4
			 	***    3   i=2    j<3
			 	**     4   i=3    j<2
			 	*      5   i=4    j<1
			 	
			 	
			 */
			
			/*
			 * 创建一个循环来控制图形的高度
			 * 	i < 几，图形的高度就是几
			 */
			/*for(var i = 0 ; i < 5 ; i++){
				
				//创建一个内层循环，来控制图形的宽度，循环执行几次图形的宽度就是多少
				//外层循环每执行1次，内层循环就要执行5次
				for(var j = 0 ; j < i+1 ; j++){
					document.write("*   ");
				}
				
				//输出一个换行
				document.write("<br />");
				
			}*/
			
			for(var i = 0 ; i < 5 ; i++){
				
				//创建一个内层循环，来控制图形的宽度，循环执行几次图形的宽度就是多少
				//外层循环每执行1次，内层循环就要执行5次
				for(var j = 0 ; j < 5-i ; j++){
					document.write("*   ");
				}
				
				//输出一个换行
				document.write("<br />");
				
			}
			
			
		</script>
	</head>
	<body>
	</body>
</html>

4..break和continue

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			/*
			 * break关键字可以用来退出switch语句和循环语句
			 * 
			 * break可以用来立刻退出离他最近的循环语句
			 */
			
			/*for(var i=0 ; i<5 ; i++){
				console.log(i);
				
				if(i == 2){
					break;
				}
			}*/
			
			/*if(true){
				break;
				console.log("hello");
			}*/
			
			/*for(var i=0 ; i<5 ; i++){
				console.log("外层循环："+i);
				
				for(var j=0 ; j<5 ; j++){
					console.log("----->内层循环："+j)
					
					if(j == 2){
						break;
					}
				}
			}*/
			
			/*
			 * 还可以为循环指定一个label来标识循环，
			 * 	使用break时，可以通过这个label来指定要结束的循环
			 */
			
			/*hello:
			for(var i=0 ; i<5 ; i++){
				console.log("外层循环："+i);
				
				for(var j=0 ; j<5 ; j++){
					console.log("----->内层循环："+j)
					
					if(j == 2){
						break hello;
					}
				}
			}*/
			
			/*
			 * continue
			 * 	- continue可以用来跳过当次循环
			 */
			/*for(var i=0 ; i<5 ; i++){
				
				if(i == 2){
					//break;
					continue;
				}
				
				console.log(i);
				
			}*/
			
			hello2:
			for(var i=0 ; i<5 ; i++){
				
				
				
				for(var j=0 ; j<5 ; j++){
					
					continue hello2;
					
					console.log("-------------->内存循环："+j);
				}
				
				console.log("外层循环"+i);
				
			}
			
		</script>
	</head>
	<body>
	</body>
</html>