3.12 迴圈(Loop)

在 javascript/practice 資料夾下，建立 loop.html 檔案，以便練習。

for 迴圈

範例 1：基本形式

示意圖：

for loop

for(var i = 0; i < 3; i++){
  console.log("迴圈：" + i);
}
console.log("結束迴圈，i 的值：" + i);

範例 2：var 與 let

for(let i = 0; i < 10; i++){
  console.log("迴圈：" + i);
}
console.log("結束迴圈，i 的值：" + i);
console.log("因為上一行出錯，js 被中斷執行了，所以不會在 console 中印出。");

錯誤訊息如下圖：

因為 i 的可視範圍(scope)是區塊(Block)，也就是用大括號包含來的區域，所以此例來說，i 只存在於 for 迴圈之中。

JS 因為在第 4 行的地方出錯，造成了後面的程式碼被中斷了。

範例 3：break

遇到 break，直接結束整個 for 迴圈：

for(var i = 0; i < 10; i++){
  if(i == 3){
    console.log("迴圈：" + i);
    break;
  }
  console.log("迴圈：" + i);
}
console.log("結束迴圈，i 的值：" + i);

/*
迴圈：0
迴圈：1
迴圈：2
迴圈：3
結束迴圈，i 的值：3
*/

範例 4：continue

遇到 continue，結束當次的 for 迴圈，繼續執行下一次的迴圈。

for(var i = 0; i < 10; i++){
  if(i == 3){
    continue;
  }
  console.log("迴圈：" + i);
}
console.log("結束迴圈，i 的值：" + i);

/*
迴圈：0
迴圈：1
迴圈：2
迴圈：4
迴圈：5
迴圈：6
迴圈：7
迴圈：8
迴圈：9
結束迴圈，i 的值：10
*/

範例 5：無窮迴圈(要避免此狀況)

for(var i = 0; i < 10; i--){
  console.log("迴圈：" + i);
}
console.log("結束迴圈，i 的值：" + i);

瀏覽器是會當掉的……所以在寫任何的迴圈時，都要留意何時離開迴圈。

for...of 迴圈：針對陣列、字串資料

陣例格式：

var cars = ['BMW', 'Volvo', 'Mini']; // 中括號包起來就是陣列格式
var car;
for (car of cars) {
  console.log(car);
}

/*
BMW
Volvo
Mini
*/

字串格式：

var text_string = "JavaScript";
var each_character;
for (each_character of text_string) {
  console.log(each_character);
}

/*
J
a
v
a
S
c
r
i
p
t
*/

for...in 迴圈：針對物件資料

物件格式：

var person = {
  fname: "John",
  lname: "Doe",
  age: 18
}; // 大括號包起來，就是物件格式

for (let key in person) {
  console.log(key + "：" + person[key]);
}

/*
fname：John
lname：Doe
age：18
*/

while 迴圈

示意圖：

while loop

範例 1：基本形式

var a = 0;
while(a < 10){
  console.log("迴圈 " + a);
  a++;
}
console.log("結束迴圈，a 的值：" + a);

/*
迴圈 0
迴圈 1
迴圈 2
迴圈 3
迴圈 4
迴圈 5
迴圈 6
迴圈 7
迴圈 8
迴圈 9
結束迴圈，a 的值：10
*/

範例 2：無窮迴圈(要避免此狀況)

var a = 0;
while(a < 10){
  console.log("迴圈 " + a);
}
console.log("結束迴圈，a 的值：" + a);

此程式碼在進入 while 迴圈之後，變數 a 的值一直都是 0，則 a < 10 的判斷永遠都是 true，會造成無窮迴圈一直在跑 while 迴圈裡的程式，以致於瀏覽器當機。

do...while 迴圈

示意圖：

do while loop

範例 1：基本形式

var a = 0;
do{
  console.log("迴圈 " + a);
  a++;
}while(a < 10);
console.log("結束迴圈，a 的值：" + a);

/*
迴圈 0
迴圈 1
迴圈 2
迴圈 3
迴圈 4
迴圈 5
迴圈 6
迴圈 7
迴圈 8
迴圈 9
結束迴圈，a 的值：10
*/

與 while 迴圈主要差在哪裡？ do 大括號裡的程式，至少一定會執行一次。

練習：九九乘法表

分別用 for 迴圈及 while 迴圈，撰寫九九乘法表。在 console 中，如下輸出(顯示部份)：

/*

1 x 1 = 1
1 x 2 = 2
1 x 3 = 3
1 x 4 = 4
1 x 5 = 5
1 x 6 = 6
1 x 7 = 7
...
2 x 1 = 2
2 x 2 = 4
2 x 3 = 6
...
9 x 9 = 81

*/

參考作法：

for 迴圈寫法：

while 迴圈寫法：