当前位置：首页 > news >正文

JavaScript流程控制精讲（二）运算符与循环实战

news 来源：原创 2025/5/24 13:24:50

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