3.12 迴圈(Loop)
在 javascript/practice
資料夾下,建立 loop.html
檔案,以便練習。
for 迴圈
範例 1:基本形式
示意圖:
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 迴圈
示意圖:
範例 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 迴圈
示意圖:
範例 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 迴圈寫法: