流程控制

在程式設計中，流程控制是用來決定程式執行順序的工具。透過流程控制，我們可以讓程式根據不同的條件執行不同的程式碼，或是重複執行某些程式碼。

條件判斷：if...else

if...else 是用來根據條件執行不同程式碼的語法。

可以分成單純的 if 判斷和帶有 else 的條件判斷，以及多條件的 if...else if...else 判斷。

語法

// 單純的 if 判斷跟 else 以上皆非
if (條件) {
	// 當條件為 true 時執行的程式碼
} else {
	// 當條件為 false 時執行的程式碼
}

// 多條件的 if...else if...else 判斷
if (條件1) {
	// 當條件1為 true 時執行的程式碼
} else if (條件2) {
	// 當條件2為 true 時執行的程式碼
} else {
	// 當所有條件都不成立時執行的程式碼
}

範例

// 判斷是否成年，僅需判斷是否大於等於 18 歲
let age = 18;

if (age >= 18) {
	console.log('你已成年！');
} else {
	console.log('你還未成年！');
}

// 可以縮寫成
let age = 18
if (age >= 18) console.log('你已成年！');
else console.log('你還未成年！');


/**
 * 判斷成績等級
 * A: 90 分以上
 * B: 80-89 分
 * C: 70-79 分
 * D: 60-69 分
 * F: 60 分以下
 */
let score = 85;

if (score >= 90) {
	console.log('你的成績是 A');
} else if (score >= 80) {
	console.log('你的成績是 B');
} else if (score >= 70) {
	console.log('你的成績是 C');
} else if (score >= 60) {
	console.log('你的成績是 D');
} else {
	console.log('你的成績是 F');
}

// 可以縮寫成
let score = 85;
if (score >= 90) console.log('你的成績是 A');
else if (score >= 80) console.log('你的成績是 B');
else if (score >= 70) console.log('你的成績是 C');
else if (score >= 60) console.log('你的成績是 D');
else console.log('你的成績是 F');

TIP

使用 if...else if...else 判斷成立後執行的程式碼只有一行時，可以省略大括號。

但實際上有些人習慣還是加上大括號，依團隊開發習慣決定。

多條件判斷：switch

switch 是用來處理多個條件的語法，適合用在條件較多的情況。比如上面的 if...else if...else 判斷可以用 switch 來簡化。

但是要特別注意的是，switch 在結束後需要使用 break 或是 return 來避免執行到下一個 case 的程式碼。否則只要下個 case 的條件符合，程式碼就會繼續執行下去。

當然在一些情況下，也可以透過這樣的特性來實現特定的邏輯。

語法

switch (變數) {
	case 值1:
		// 當變數等於值1時執行的程式碼
		break;
	case 值2:
		// 當變數等於值2時執行的程式碼
		break;
	default:
	// 當變數不符合任何條件時執行的程式碼
}

範例

// 使用 switch 判斷成績等級
let score = 85;

switch (true) {
	case score >= 90:
		console.log('你的成績是 A');
		break;
	case score >= 80:
		console.log('你的成績是 B');
		break;
	case score >= 70:
		console.log('你的成績是 C');
		// break; 這裡沒有 break，下一個 case 也符合條件會繼續執行
	case score >= 60:
		console.log('你的成績是 D');
		break;
	default:
		console.log('你的成績是 F');
}

迴圈：for

for 迴圈用來重複執行某段程式碼，直到條件不成立為止。需要給定一個初始化的變數、一個停止的條件，以及每次迴圈執行一次後的更新步驟。

語法

for (初始化; 條件; 更新) {
	// 每次迴圈執行的程式碼
}

範例

/**
 * 初始值：i = 0
 * 條件：i < 5
 * 每個迴圈結束後: i++ (i 增加 1) => 也可以寫作 i += 1 或是 i = i + 1
 * 
 * 結果:
 * 這是第 0 次迴圈
 * 這是第 1 次迴圈
 * 這是第 2 次迴圈
 * 這是第 3 次迴圈
 * 這是第 4 次迴圈
 * 
 * 說明: 之所以印到 `這是第 4 次迴圈` 就結束了是因為執行完此次迴圈後
 * i 會從 4 增加到 5，這時迴圈會被條件式判斷為 false，迴圈結束。
 */
for (let i = 0; i < 5; i++) {
	console.log('這是第 ' + i + ' 次迴圈');
}

在撰寫迴圈時要特別注意避免寫出無窮迴圈的情況，否則程式會一直無限執行，你會看到你的電腦直接卡住 比如說：

for (let i = 0; i < 5; ) {
	console.log('這是第 ' + i + ' 次迴圈');
	// 沒有更新 i 的值，會導致無窮迴圈
}

迴圈：while

while 迴圈會在條件為 true 時重複執行程式碼，而且不需要事先定義迴圈的次數，不用給定每次迭代的變數。

適合用在不知道需要執行多少次的情況下。

語法

while (條件) {
	// 每次迴圈執行的程式碼
}

範例

let count = 0;

while (count < 3) {
	console.log('計數：' + count);
	count++;
}

while 迴圈寫出無窮迴圈的情況也很容易，比如：

while(true){
	console.log('這是無窮迴圈');
	// 這裡沒有條件會導致無窮迴圈
}

迴圈：do...while

do...while 迴圈與 while 迴圈類似，但它會先執行一次迴圈體內的程式碼，然後再檢查條件。這表示 do...while 迴圈至少會執行一次。

語法

do {
	// 每次迴圈執行的程式碼
} while (條件);

範例

let count = 0;

do {
	console.log('計數：' + count);
	count++;
} while (count < 3);
// 輸出：
// 計數：0
// 計數：1
// 計數：2

let i = 5;
do {
  console.log('這個迴圈至少會執行一次，i = ' + i);
  i++;
} while (i < 5);
// 輸出：
// 這個迴圈至少會執行一次，i = 5
// 即使條件 i < 5 一開始就是 false，迴圈體還是會執行一次。

while 與 do...while 的差異

特性	while 迴圈	do...while 迴圈
條件檢查	先檢查條件，再執行迴圈體	先執行迴圈體，再檢查條件
執行次數	條件不成立時可能一次都不執行	至少會執行一次
適用情境	當你可能不需要執行迴圈體時	當你確定至少需要執行一次迴圈體時

迴圈中的特殊指令：continue 和 break

前述提到，迴圈需要給定一個停止的條件，那有沒有什麼方式可以強制停止、或是跳過特定的步驟直接往下一圈執行？

有，可以使用，continue 和 break。 continue 可以忽略當前迴圈的剩餘程式碼，直接進入下一次迴圈，而 break 則是直接終止整個迴圈。

continue

continue 用來跳過當前這次迴圈的剩餘程式碼，直接進入下一次迴圈。

範例

/**
 * 這個範例會跳過 i 等於 2 的情況
 * 
 * 輸出結果:
 * 目前的 i 是：0
 * 目前的 i 是：1
 * 目前的 i 是：3
 * 目前的 i 是：4
 */
for (let i = 0; i < 5; i++) {
	if (i === 2) {
		continue; // 當 i 等於 2 時，跳過這次迴圈
	}
	console.log('目前的 i 是：' + i);
}

break

break 用來終止整個迴圈的執行，並跳出迴圈。

範例

/**
 * 這個範例會在 i 等於 3 時終止迴圈
 * 
 * 輸出結果:
 * 目前的 i 是：0
 * 目前的 i 是：1
 * 目前的 i 是：2
 * 
 */
for (let i = 0; i < 5; i++) {
	if (i === 3) {
		break; // 當 i 等於 3 時，終止迴圈
	}
	console.log('目前的 i 是：' + i);
}

在這個範例中，當 i === 3 時，break 會終止整個迴圈，後續的迴圈不再執行。

---

continue 和 break 的差異

指令	功能
continue	跳過當前這次迴圈的剩餘程式碼，進入下一次迴圈
break	終止整個迴圈的執行，跳出迴圈

---

綜合範例

以下範例展示如何同時使用 continue 和 break：

/**
 * 這個範例會在 i 等於 2 時跳過這次迴圈，
 * 並在 i 等於 5 時終止整個迴圈。
 * 
 * 輸出結果:
 * 目前的 i 是：0
 * 目前的 i 是：1
 * 目前的 i 是：3
 * 目前的 i 是：4
 */
for (let i = 0; i < 10; i++) {
	if (i === 2) {
		continue; // 當 i 等於 2 時，跳過這次迴圈
	}
	if (i === 5) {
		break; // 當 i 等於 5 時，終止整個迴圈
	}
	console.log('目前的 i 是：' + i);
}

---

小結

• 使用 continue 可以跳過某些不需要執行的迴圈內容。
• 使用 break 可以在特定條件下終止迴圈，避免不必要的執行。

試著在你的程式中加入 continue 和 break，觀察它們如何影響迴圈的執行流程！

小結

流程控制是程式設計中不可或缺的一部分，學會使用條件判斷和迴圈可以讓你的程式更靈活、更強大。試著自己動手寫一些程式，練習使用 if...else、switch、for 和 while 吧！

範例練習

練習目標

試著完成以下程式碼，並預測每一行的輸出結果：

// 使用 if...else 判斷 BMI
let weight = 70; // 體重 (公斤)
let height = 1.75; // 身高 (公尺)
let bmi = weight / (height * height);

if (bmi < 18.5) {
	console.log('你的 BMI 是 ' + bmi.toFixed(2) + '，屬於體重過輕');
} else if (bmi >= 18.5 && bmi < 24.9) {
	console.log('你的 BMI 是 ' + bmi.toFixed(2) + '，屬於正常範圍');
} else if (bmi >= 25 && bmi < 29.9) {
	console.log('你的 BMI 是 ' + bmi.toFixed(2) + '，屬於過重');
} else {
	console.log('你的 BMI 是 ' + bmi.toFixed(2) + '，屬於肥胖');
}

// 使用 switch 判斷健康建議
let category = '過重';

switch (category) {
	case '體重過輕':
		console.log('建議多攝取營養，增加體重');
		break;
	case '正常範圍':
		console.log('保持目前的生活習慣，繼續維持健康');
		break;
	case '過重':
		console.log('建議適量運動，控制飲食');
		break;
	case '肥胖':
		console.log('建議諮詢醫生，制定減重計畫');
		break;
	default:
		console.log('無法判斷健康建議');
}

// 使用 for 迴圈計算 BMI 的變化
let initialWeight = 60;
let targetWeight = 80;
let step = 5;

for (let w = initialWeight; w <= targetWeight; w += step) {
	let currentBmi = w / (height * height);
	console.log('體重 ' + w + ' 公斤時的 BMI 是：' + currentBmi.toFixed(2));
}

// 使用 while 迴圈模擬減重過程
let currentWeight = 80;

while (currentWeight > 70) {
	console.log('目前體重：' + currentWeight + ' 公斤');
	currentWeight -= 2;
}
console.log('減重目標達成！');

練習步驟

1. 在你的程式編輯器中執行這段程式碼。
2. 修改變數的值，例如 weight 或 height，觀察輸出結果的變化。
3. 嘗試新增更多條件或迴圈，模擬不同的 BMI 計算情境。

提示：確保每個條件和迴圈的邏輯正確，並注意 break 的使用位置。

練習區

步驟 1: 建立一個新的檔案

1. 在你的專案資料夾中，建立一個名為 control-flow-practice.js 的檔案。

步驟 2: 撰寫以下練習

在 control-flow-practice.js 中完成以下練習：

1. 使用 if-else 判斷一個數字是否為偶數或奇數。
2. 使用 switch 判斷一個字串是否為 "red", "blue", 或 "green"，並輸出對應的顏色名稱。
3. 使用 for 迴圈輸出 1 到 10 的數字。
4. 使用 while 迴圈計算 1 到 100 的總和。

步驟 3: 執行檔案

1. 在終端機中執行 node control-flow-practice.js，檢查結果是否正確。