寫給兔小白的js教程(3)
- 2020 年 1 月 6 日
- 筆記
昨天兔小白太忙了，沒有完成家庭作業，沒關係，今天講的東西比較簡單，給兔子一個緩衝的時間。
今天繼續講語句，來看看用得第二多的循環語句吧。
1、for循環語句
for循環語句可以將某段代碼反覆執行一定的次數，我們直接用例子講語法。比如我們要在頁面上連續跳10次提示框，可以這麼寫：
for(var i = 0;i < 10;++i){ window.alert("ALARM"); }
當然啦，只有搗亂的程序才會這麼不停的彈提示框，咱們不管它，來看語法。for語句由三段組成，第一段是初始化用的，這裡我們定義了一個變量i，賦了初值0。第二段是判斷條件，表示條件滿足時才會繼續循環，這裡寫的是i<10，表示只要變量i的值小於10，就一直循環。第三段是增量語句，這裡每循環一次就自增i的值，所以循環10次以後，i=10，就不再滿足循環條件了，所以循環就退出了。
for語句還能有一些變化：
//用多個變量也可以喲 for(var i = 0,j = 0;i +j < 10;++i,++j){ //do something } //用自減也可以喲 for(var i = 100;i > 0;--i){ //do something } //判斷條件不僅限於循環變量喲，可以與外部變量結合使用 for(var i = 0;i < 10 && !userCancel;++i){ //do something } //什麼都不寫，會死循環的，這種情況要在內部按某種條件強行退出循環 for(;;){ //do something }
與循環語句經常一起出現的還有兩個關鍵字：break和continue，前者用於強行退出循環，後者用於忽略本次循環後面的語句，直接進入下一次循環。看個例子：
var rnd = 0; for(;;){ //生成一個100以內的隨機數，看着眼熟不？嘿嘿 rnd = Math.floor(Math.random() * 100); //如果這個隨機數大於60，就退出循環 if(rnd > 60) break; }
2、for…in循環語句
for…in語句可以認為是for循環針對數組與對象的一個簡化的特殊用法，它經常用於遍曆數組元素。下面兩種寫法是等價的，兔體會一下：
var numbers = [1, 2, 3]; for(var i in numbers){ alert(numbers[i]); }
var numbers = [1, 2, 3]; for(var i = 0;i < numbers.length;++i){ alert(numbers[i]); }
3、while循環語句
while循環也用於將一段代碼反覆執行，直到條件不滿足時為止。它和for可以互相轉化，比如上面那個彈出10次提示框的for循環，用while改寫一下：
var i = 0; while(++i < 10){ window.alert("ALARM"); }
while只有一個判斷條件，只要條件滿足，就一直循環，所以與for相比，它經常用於無法事先判斷循環次數的場景。用while的時候要小心，如果處理不好，它可能會造成死循環喲。
4、do…while循環
while循環有個缺點，就是如果條件不滿足，它就一次循環都不執行，可是有時候我們希望我們的代碼至少執行一次，這時候do…while就派上用場了。看個例子，比如我們要讓用戶輸入一個數字，如果輸入不合法，就重新輸入，直到合法為止，用do…while會比用while舒服很多：
var num; do{ //prompt()方法會彈一個輸入框讓用戶輸入 num = window.prompt("請輸入一個數字"); } while(isNaN(num));
好了，遊戲時間到了，我們把今天的知識點組合一下，讓兔小灰來猜水果。規則是這樣的，兔小白輸入想吃的水果的名字（英文），不等兔小白輸完，兔小灰就要猜出是什麼。
上代碼啦，這回不算長吧？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <title>兔小灰猜水果</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style> *{font-size:20px;font-family:"微軟雅黑"} #fruits{display:inline-block;} </style> <script type="text/javascript" language="javascript"> //定義一個全局的字符串數組，用來存兔小灰知道的所有水果(真少啊) var fruitArray = ["apple", "banana", "cherry", "grape", "mango", "orange", "peach", "pineapple", "strawberry", "watermelon"]; /* * 這個方法和上課課的一樣喲，偷懶用的 */ function get(id){ return document.getElementById(id); } /* * 兔小灰來猜測兔小白想吃什麼 */ function grayGuess(){ //取得兔小白的輸入，為了防止兔小白用大寫字母導致後面比對出問題，一律用toLowerCase()方法轉成小寫 //fruits是一個空數組，兔可以把它想像成一個空籃子，一會兒我們要往裡放過濾出來的水果圖片 var input = get("whiteWant").value.toLowerCase(), fruits = []; //這裡用到了今天學的for...in循環了 //我們遍歷fruitArray中的每一個元素 for(var i in fruitArray){ //[i]用於從數組中取第i個元素 //我們看這個元素是否包含兔小白的輸入，indexOf()是字符串對象的一個方法，返回子串出現的位置，如果找不到，會返回-1 //所以判斷其返回值>=0，就表明找到了 if(fruitArray[i].indexOf(input) >= 0){ //push()方法用於往數組裡壓入一個元素，這裡我們壓入一段html代碼，兔應該能看懂，就是一個<img>標籤 fruits.push("<img src='p_w_picpaths/" + fruitArray[i] + ".jpg' />"); } } //join()是數組的方法，用於把數組中的每個元素連接成一個字符串 //我們再把這個字符串賦給div的innerHTML屬性，就相當於把那一堆<img>加到頁面上了 get("fruits").innerHTML = fruits.join(""); } </script> <body> 兔小灰我想吃 <input type="text" id="whiteWant" onkeyup="grayGuess()" /> <img src="p_w_picpaths/white.gif" id="white" /> <br/><br/> <img src="p_w_picpaths/gray.gif" id="gray" /> 兔小白是不是想吃…… <div id="fruits"></div> </body> </html>
兔小白認真閱讀了沒？下面是家庭作業了：
1、基礎題：如果沒找到合適的水果，能不能讓兔小灰說：「這是什麼水果啊？北門的水果攤有沒？」 2、進階題：現在每次兔小灰會列出一大堆可能的水果，能不能讓他只列最有可能的一個？
