JavaScript 條件語句與循環語句詳解
條件語句
JavaScript 中的條件語句用於根據不同的條件執行不同的代碼塊。常見的條件語句包括 if...else、switch 等。
if...else 語句
if...else 是最基本的條件控制結構，語法如下：
if (condition) {
// 條件為 true 時執行的代碼
} else {
// 條件為 false 時執行的代碼
}還可以結合 else if 實現多重條件判斷：
if (score >= 90) {
console.log("優秀");
} else if (score >= 80) {
console.log("良好");
} else {
console.log("繼續努力");
}switch 語句
switch 適用於多個固定值的條件判斷，比 if...else 更簡潔：
switch (day) {
case 1:
console.log("星期一");
break;
case 2:
console.log("星期二");
break;
default:
console.log("未知日期");
}循環語句
循環語句用於重複執行某段代碼，常見的循環語句有 for、while、do...while 等。
for 循環
for 循環適用於已知循環次數的情況：
for (let i = 0; i < 5; i++) {
console.log(i); // 輸出 0 到 4
}while 循環
while 循環在條件為 true 時持續執行：
let i = 0;
while (i < 5) {
console.log(i); // 輸出 0 到 4
i++;
}do...while 循環
do...while 至少執行一次循環體，再檢查條件：
let i = 0;
do {
console.log(i); // 輸出 0 到 4
i++;
} while (i < 5);循環控制語句
break 和 continue
break用於立即退出循環：
for (let i = 0; i < 10; i++) {
if (i === 5) break;
console.log(i); // 輸出 0 到 4
}continue跳過當前迭代，進入下一次循環：
for (let i = 0; i < 5; i++) {
if (i === 2) continue;
console.log(i); // 輸出 0, 1, 3, 4
}實際應用示例
使用條件語句優化用户權限判斷
const role = "admin";
if (role === "admin") {
console.log("顯示管理面板");
} else {
console.log("顯示普通用户界面");
}使用循環遍歷數組
const colors = ["red", "green", "blue"];
for (let i = 0; i < colors.length; i++) {
console.log(colors[i]);
}JavaScript 條件語句與循環語句：從基礎語法到實戰應用
在 JavaScript 編程中，條件語句與循環語句是控制代碼執行流程的核心，它們如同搭建程序邏輯的“磚瓦”，支撐起從簡單交互到複雜功能的實現。本文將結合語法細節與實戰案例，帶你全面掌握這兩類語句的用法。
一、條件語句：讓代碼“做選擇”
條件語句的核心是“根據不同判斷結果執行不同代碼塊”，JavaScript 中常用的有 if-else 、 if-else if-else 和 switch 三種形式。
1. if-else ：基礎二選一邏輯
if-else 是最基礎的條件結構，當 if 後的表達式結果為 true 時執行對應代碼塊，否則執行 else 代碼塊。例如判斷用户年齡是否滿足成年標準：
javascript
let age = 19;
if (age >= 18) {
console.log("您已成年，可獨立完成註冊");
} else {
console.log("您未成年，需監護人協助註冊");
}
需注意， if 後的條件表達式無需加括號包裹（但推薦加以提升可讀性），且代碼塊的大括號在單條語句時可省略，但為了代碼健壯性，建議始終保留。
2. if-else if-else ：多條件分支
當需要判斷多個條件時，可使用 if-else if-else 結構，它會依次檢查條件，直到找到第一個為 true 的分支並執行，後續分支不再判斷。例如根據考試分數評級：
javascript
let score = 85;
if (score >= 90) {
console.log("成績等級：A（優秀）");
} else if (score >= 80) {
console.log("成績等級：B（良好）");
} else if (score >= 60) {
console.log("成績等級：C（及格）");
} else {
console.log("成績等級：D（不及格）");
}
3. switch ：等值匹配場景
當條件是“判斷一個變量與多個固定值是否相等”時， switch 語句比 if-else if 更簡潔。它通過 case 匹配值， break 終止當前分支， default 處理所有不匹配的情況：
javascript
let week = "週二";
switch (week) {
case "週一":
console.log("今日需完成周計劃制定");
break;
case "週二":
case "週三":
case "週四":
console.log("今日需專注核心業務開發");
break;
case "週五":
console.log("今日需完成周工作總結");
break;
default:
console.log("今日為休息日，可自主安排學習");
}
這裏“週二、週三、週四”共用一個邏輯，只需在最後一個 case 後加 break ，避免“穿透效應”（即不寫 break 會繼續執行後續 case 代碼）。
二、循環語句：讓代碼“重複做”
循環語句用於重複執行某段代碼，直到滿足終止條件，JavaScript 中常用的有 for 、 while 和 do-while 三種，另有用於數組遍歷的 for...in 和 for...of 。
1. for 循環：已知循環次數場景
for 循環是最常用的結構，語法為 for(初始化表達式; 條件表達式; 更新表達式) ，三個部分用分號分隔，其中初始化表達式僅執行一次，條件表達式每次循環前判斷，更新表達式每次循環後執行。例如打印 1 到 10 的整數：
javascript
for (let i = 1; i <= 10; i++) {
console.log(`當前數字：${i}`);
}
若需遍歷數組，可結合數組長度控制循環：
javascript
let fruits = ["蘋果", "香蕉", "橙子"];
for (let i = 0; i < fruits.length; i++) {
console.log(`水果列表：${fruits[i]}`);
}
2. while 循環：未知循環次數場景
while 循環僅需一個條件表達式，語法為 while(條件表達式) ，當條件為 true 時持續執行循環體，直到條件變為 false 。例如計算 1 到 100 的累加和：
javascript
let sum = 0;
let num = 1;
while (num <= 100) {
sum += num;
num++;
}
console.log(`1到100的累加和：${sum}`);
需注意，若忘記在循環體中更新條件變量（如 num++ ），會導致“死循環”，使程序卡住，編寫時需格外注意。
3. do-while 循環：至少執行一次的場景
do-while 循環與 while 類似，但它會先執行一次循環體，再判斷條件，因此無論條件是否成立，循環體至少執行一次。例如獲取用户輸入，直到輸入合法：
javascript
let input;
do {
input = prompt("請輸入1-10之間的數字：");
} while (isNaN(input) || input < 1 || input > 10);
console.log(`您輸入的合法數字：${input}`);
4. for...in 與 for...of ：便捷遍歷
- for...in 用於遍歷對象的可枚舉屬性（包括原型鏈上的屬性），也可遍歷數組的索引：
javascript
let person = { name: "張三", age: 25 };
for (let key in person) {
console.log(`${key}: ${person[key]}`); // 輸出 name: 張三，age: 25
}
- for...of 用於遍歷可迭代對象（如數組、字符串、Map 等）的元素，比 for...in 更適合數組遍歷：
javascript
let colors = ["紅", "綠", "藍"];
for (let color of colors) {
console.log(`顏色：${color}`); // 輸出 顏色：紅，顏色：綠，顏色：藍
}
三、實戰案例：結合條件與循環實現功能
通過一個“成績統計系統”案例，綜合運用條件語句與循環語句：需求為輸入 5 名學生的成績，計算平均分，並統計及格人數。
javascript
let totalScore = 0;
let passCount = 0;
// 循環輸入5名學生成績
for (let i = 1; i <= 5; i++) {
let score = prompt(`請輸入第${i}名學生的成績：`);
score = Number(score); // 轉換為數字類型
// 條件判斷成績是否合法
if (isNaN(score) || score < 0 || score > 100) {
alert("輸入成績不合法，請重新輸入0-100之間的數字！");
i--; // 重新獲取當前學生成績，循環次數不增加
continue; // 跳過本次循環後續代碼
}
totalScore += score;
// 條件判斷是否及格
if (score >= 60) {
passCount++;
}
}
// 計算平均分並輸出結果
let average = totalScore / 5;
alert(`5名學生成績統計：\n平均分：${average.toFixed(1)}\n及格人數：${passCount}`);
該案例中， for 循環控制輸入次數， if 語句判斷成績合法性與是否及格， continue 語句用於跳過非法輸入的後續處理，充分體現了兩類語句的協同作用。
四、注意事項與優化技巧
1. 避免死循環：編寫 while 和 for 循環時，確保條件變量會被正確更新，必要時可添加循環次數限制（如 for (let i = 0; i < 1000; i++) ），防止程序卡死。
2. 簡化條件表達式：複雜條件可拆分為多個變量，提升可讀性。例如 if (age >= 18 && score >= 60 && isRegistered) 可改為 let isEligible = age >= 18 && score >= 60 && isRegistered; if (isEligible) 。
3. 選擇合適的循環：已知循環次數用 for ，未知次數用 while ，至少執行一次用 do-while ，數組遍歷優先用 for...of 。
4. 利用短路求值：條件語句中可使用 && （邏輯與）和 || （邏輯或）的短路特性簡化代碼。例如 let name = user.name || "匿名用户" （若 user.name 為假值，則使用“匿名用户”）。
掌握條件語句與循環語句，是 JavaScript 入門的關鍵一步。它們不僅是基礎語法，更是構建複雜邏輯的核心工具，後續學習函數、數組方法等內容時，也會頻繁依賴這些知識。建議多通過實戰案例練習，逐步提升代碼的邏輯性與健壯性。
截圖需包含博客完整標題、發佈時間、作者信息、全文內容及瀏覽/點贊數據，可使用瀏覽器截圖工具（如 Chrome 快捷鍵 Ctrl+Shift+I 打開開發者工具，選擇“截圖”功能）截取整個頁面，確保文字清晰可辨。
總結
條件語句和循環語句是 JavaScript 編程的基礎，熟練掌握它們能有效提升代碼邏輯控制能力。合理運用 if...else、switch、for、while 等語句可以讓代碼更加高效和易讀。
