js流程控制語句(循環)

重複重複(for循環)

很多事情不只是做一次,要重複做。如打印10份試卷,每次打印一份,重複這個動作,直到打印完成。這些事情,我們使用循環語句來完成,循環語句,就是重複執行一段代碼。

for語句結構:

for(初始化變量;循環條件;循環迭代)
{     
    循環語句 
 }
例子:我們有每一個籃子1,2,3...10不同數量的球,使用for語句完成合計,看看我們一共有多少錢?

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>if...else</title>
<script type="text/JavaScript">
var ball,sum=0;//ball變量存放不同面值,sum總計
for(ball=1;ball<=10;ball++)
{ 
  sum= sum + ball;
}
  document.write("sum合計:"+sum);
</script>
</head>
<body>
</body>
</html>
輸出:sum合計:55

反反覆覆(while循環)

和for循環有相同功能的還有while循環, while循環重複執行一段代碼,直到某個條件不再滿足。

while語句結構:

while(判斷條件)
{
    循環語句
 }
例子:我們使用while語句,輸出5個數字

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>while</title>
<script type="text/javascript">
  var mynum =1;//mynum初值化數值爲1
   while(mynum<=5)
  {
	document.write("數字:"+mynum);
    mynum=mynum+1;	
   }
</script>
</head>
<body>
</body>
</html>
輸出:數字:1數字:2數字:3數字:4數字:5

來來回回(Do...while循環)

do while結構的基本原理和while結構是基本相同的,但是它保證循環體至少被執行一次。因爲它是先執行代碼,後判斷條件,如果條件爲真,繼續循環。

do...while語句結構:

do
{
    循環語句
 }
while(判斷條件)

例如:我們使用do...while語句,輸出6個數字。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>do...while</title>
<script type="text/javascript">
    var mynum =6;//mynum初值化數值爲6
	do
	{
	document.write("數字:"+mynum+"<br/>");
	mynum=mynum-1;
	}
	while( mynum>0)
	</script>
</head>
<body>
</body>
</html>
輸出:
           數字:6
           數字:5
           數字:4
           數字:3
           數字:2
           數字:1

退出循環break

在while、for、do...while、while循環中使用break語句退出當前循環,直接執行後面的代碼。

格式如下:

for(初始條件;判斷條件;循環後條件值更新)
{
  if(特殊情況)
  {break;}
  循環代碼
}

例子:考試成績輸出,如果成績及格繼續輸出下個成績,如果成績不及格,退出並且後面成績不輸出, 我們使用break語句,退出循環。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>break</title>
<script type="text/JavaScript">
var mynum =new Array(70,80,66,90,50,100,89);//定義數組mynum並賦值
var i=0;
while(i<mynum.length)
{
  if(mynum[i]<60)
   {
    document.write("成績"+mynum[i]+"不及格,不用循環了"+"<br>");
    break;
   }
  document.write("成績:"+mynum[i]+"及格,繼續循環"+"<br>");
  i=i+1;
  
}
</script>
</head>
<body>
</body>
</html>
輸出:成績:70及格,繼續循環            成績:80及格,繼續循環            成績:66及格,繼續循環            成績:90及格,繼續循環           成績50不及格,不用循環了

繼續循環continue

continue的作用是僅僅跳過本次循環,而整個循環體繼續執行。

語句結構:

for(初始條件;判斷條件;循環後條件值更新)
{
  if(特殊情況)
  { continue; }
 循環代碼
}
上面的循環中,當特殊情況發生的時候,本次循環將被跳過,而後續的循環則不會受到影響。

例如:考試成績輸出,如果成績及格繼續輸出下個成績,如果成績不及格,則不輸出該成績,我們使用continue語句完成

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>continue</title>
<script type="text/JavaScript">
 var mynum =new Array(70,80,66,90,50,100,89);//定義數組mynum並賦值
 var i;
 for(i=0;i<mynum.length;i++)
 {
  	if(mynum[i]<60)
    {
	document.write("成績不及格,不輸出!"+"<br>");
    continue;
	}
	document.write("成績:"+mynum[i]+"及格,輸出!"+"<br>");
}
</script>
</head>
<body>
</body>
</html>
輸出:成績:70及格,輸出!    成績:80及格,輸出!    成績:66及格,輸出!    成績:90及格,輸出!    成績不及格,不輸出!    成績:100及格,輸出!    成績:89及格,輸出!

編程練習

在一個大學的編程選修課班裏,我們得到了一組參加該班級的學生數據,分別是姓名、性別、年齡和年級,接下來呢,我們要利用JavaScript的知識挑出其中所有是大一的女生的的名字哦。

學生信息如下:

    ('小A','女',21,'大一'),  ('小B','男',23,'大三'),

    ('小C','男',24,'大四'),  ('小D','女',21,'大一'),

    ('小E','女',22,'大四'),  ('小F','男',21,'大一'),

    ('小G','女',22,'大二'),  ('小H','女',20,'大三'),

    ('小I','女',20,'大一'),  ('小J','男',20,'大三')

<!DOCTYPE  HTML>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>流程控制語句</title>
<script type="text/javascript">

 //第一步把之前的數據寫成一個數組的形式,定義變量爲 infos
 var infos = [];
 infos[0] = ['小A','女',21,'大一'],
 infos[1] = ['小B','男',23,'大三'],
 infos[2] = ['小C','男',24,'大四'],  
 infos[3] = ['小D','女',21,'大一'],
 infos[4] = ['小E','女',22,'大四'],
 infos[5] = ['小F','男',21,'大一'],
 infos[6] = ['小G','女',22,'大二'],
 infos[7] = ['小H','女',20,'大三'],
 infos[8] = ['小I','女',20,'大一'],
 infos[9] = ['小J','男',20,'大三'];
 
 var oneInfo = [];
 //第一次篩選,找出都是大一的信息
 for(var i=0; i<9; i++) {
    if(infos[i][3] === '大一') {
        oneInfo.push(i);
    }    
 }
 document.write(oneInfo+"</br>");
 //第二次篩選,找出都是女生的信息
 for(var j=0; j<oneInfo.length; j++){
     if(infos[oneInfo[j]][1] === '女') {
         document.write(infos[oneInfo[j]][0]);
     }
 }
</script>
</head>
<body>
</body>
</html>
輸出:0,3,5,8    小A小D小I    

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章