JavaScript流程控制精講（二）運算符與循環實戰
學習目標：掌握條件判斷與循環控制，實現基礎業務邏輯
核心要點：運算符優先級 | 短路運算 | 循環優化 | 項目實戰
一、運算符進階技巧
1.1 算術運算符
console.log(5 % 3); // 2（取模）
console.log(2 ** 3); // 8（冪運算 ES6）
console.log('5' - 3); // 2（隱式轉換）
console.log('5' + 3); // "53"（字符串拼接）
1.2 賦值運算符
let count = 10;
count += 5; // 等同于 count = count + 5
count **= 2; // ES6冪賦值（100）
1.3 比較運算符（重點！）
// 全等判斷（推薦）
console.log(2 === '2'); // false（類型不同）// 特殊值比較
console.log(NaN === NaN); // false
console.log(null == undefined); // true
1.4 邏輯運算符
// 短路運算應用
isLogin && showUserPanel(); // 條件執行
result || defaultValue; // 默認值設置// 優先級：! > && > ||
console.log(true || false && false); // true
二、流程控制實戰
2.1 條件分支結構
// if...else 多分支
if(score >= 90) {grade = 'A';
} else if(score >= 60) {grade = 'C';
} else {grade = 'D';
}// 三元表達式（簡化雙分支）
const access = age >= 18 ? '允許' : '禁止';
2.2 switch穿透現象
switch(level) {case 3:addBonus();// 缺少break會繼續執行case4!case 2:sendNotification();break;default:basicAction();
}
三、循環控制與優化
3.1 while循環三要素
let i = 0; // 1.初始值
while(i < 5) { // 2.終止條件console.log(i);i++; // 3.變量變化
}
3.2 循環控制關鍵字
// break跳出循環
while(true) {if(condition) break;
}// continue跳過當前迭代
for(let i=0; i<10; i++) {if(i%2) continue;console.log(i); // 只輸出偶數
}
3.3 循環性能優化
// 緩存數組長度提升性能
const arr = [...Array(1000)];
for(let i=0, len=arr.length; i<len; i++) {//...
}
四、綜合案例：ATM終端模擬
let balance = 1000; // 初始余額while(true) {const action = prompt(`
請選擇操作：
1. 存款
2. 取款
3. 查詢
4. 退出`);if(action === '4') break;switch(action) {case '1':const deposit = Number(prompt('輸入存款金額'));balance += deposit;break;case '2':const withdraw = Number(prompt('輸入取款金額'));if(withdraw > balance) {alert('余額不足！');} else {balance -= withdraw;}break;case '3':alert(`當前余額：￥${balance}`);break;default:alert('無效操作');}
}
關鍵實現解析：
- 使用無限循環維持操作狀態
- 模板字符串實現多行菜單
- 輸入類型強制轉換（Number處理）
- 取款前余額校驗
避坑指南：
- 比較字符串時注意字典序
'2' > '12'→ true - switch語句必須處理default情況
- 循環體內務必要有終止條件防止死循環
- 浮點數計算使用
toFixed(2)避免精度問題
如需完整案例練手以及講解，歡迎閱讀JavaScrip學習專欄！
)
