iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 4
0
自我挑戰組

跟著新手一起玩Javascript!系列 第 4

DAY4 - JavaScript概念 - 迴圈

迴圈提供一個快速又簡潔的方法來重複地做某件事。有很多種不同種類的迴圈,不過他們本質上都是做一樣的事:把一件動作重複地做一定的次數。
//引述自 MDN Web docs

迴圈

昨天講到了條件式,今天我們來講另一個也是很多程式語言都會有的 - 迴圈 (Loops and iteration)
在 JavaScript 中有很多種迴圈,以下就來一一介紹他們。

for 迴圈

for ("初始表達式"; "條件式"; "遞增表達式"){
  "陳述式"
}

for 迴圈應該是大家最常使用的迴圈了吧。for 迴圈會不斷地執行裡頭的陳述式,每執行一次都會檢查一次條件式,並執行後面的遞增表達式,直到跳出迴圈為止。
讓我們直接看個例子:

for ( var i = 0 ; i < 5 ; i ++){
  console.log(i);
}

一開始i=0,每執行一次console.log(i);都會檢查i < 5是否為true,並讓i ++,直到i < 5false時跳出迴圈。
如果不使用迴圈我們只能寫成這樣:

console.log(0);
console.log(1);
console.log(2);
console.log(3);
console.log(4);

如果不是i < 5個而是i < 500的話.../images/emoticon/emoticon04.gif
還好我們有迴圈!

while 迴圈

while ("條件式"){
  "陳述式"
}

把 while 迴圈比照一下上面的 for 迴圈,會發現他少了 "初始表達式" 和 "遞增表達式",這讓 while 迴圈比較適合用在「不確定會做幾次」的迴圈上。比如說我想看看遊戲抽卡的運氣如何,我們就可以用以下的迴圈:

var count = 0;
while (Math.random()>0.005){ // 抽中五星機率是0.5%,如果沒抽中,再抽一次!
  count ++; // 每抽一次count就+1
}
console.log(count);

嗯…剛剛試了一下,居然要 277 次,看來手氣不好呢。

do-while 迴圈

do {
  "陳述式"
} while ("條件式");

do-while 迴圈長得很像 while 迴圈,唯一不同的地方是他會先執行陳述式,再來看條件式是否為 true 。上面抽五星的例子:在 random 出來的數字小於等於 0.005 的情況,就不會執行裡頭的陳述式 : count ++;,因此最後得出的數字 count 所代表的意思,應該是:我抽卡失敗的次數。
如果要得到我抽了幾次卡的次數,應該改寫成 do-while 迴圈:

var count = 0;
do { // 抽中五星機率是0.5%,如果沒抽中,再抽一次!
  count ++; // 每抽一次count就+1
} while (Math.random()>0.005)
console.log(count);

我其實抽了 278 次啊 QQ

for-in 迴圈

for ("變數" in "物件") {
   "陳述式";
}

for-in 迴圈需要配合一個 object (物件) 來使用,variable (變數) 會搜尋物件裡所有的屬性的名稱

let arr = [20, 40, "abc"];
arr.foo = "def";
arr.bar = 60;

for (let i in arr) {
   console.log(i); // logs "0", "1", "2", "foo", "bar"
}

for-of 迴圈

for ("變數" of "物件") {
   "陳述式";
}

for-of 迴圈與 for-in 迴圈相似,但這次的 object 只能使用可迭代 (iterable) 物件,如 Array, Map, Set, String, TypedArray, arguments等等,並且這次是搜尋物件裡屬性的值

let arr = [20, 40, "abc"];
arr.foo = "def";
arr.bar = 60;

for (let i of arr) {
   console.log(i); // logs "20", "40", "abc"
}

這次就不會出現 "def""60" 了,因為並不在迭代範圍裡。

巢狀迴圈

如果有兩個以上的值需要做重複,也可以把迴圈寫成巢狀。
比如說要計算九九乘法表,我們就可以寫成這樣:

for (var i = 1; i < 10; i ++){
   for (var j = 1; j < 10; j ++){
      console.log(i*j);
   }
   console.log("\n");
}

上一篇
DAY3 - 遊戲實作 - 猜數字遊戲 (條件式)
系列文
跟著新手一起玩Javascript!4

尚未有邦友留言

立即登入留言