javascript基礎（控制流程（迴圈 while，for））（十二）

厚積薄發2017發表於2017-02-08
JavaScriptWhile

有程式設計基礎的，自學時可以略過

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>



相關文章