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('无效操作');}
}