【JS基础-Day2】运算符与分支语句
📺 对应视频：P20-P34 | 🎯 核心目标：掌握各类运算符、分支控制流程、while循环及断点调试
一、运算符
1.1 算术运算符
console.log(10 + 3) // 13
console.log(10 - 3) // 7
console.log(10 * 3) // 30
console.log(10 / 3) // 3.3333...
console.log(10 % 3) // 1 取余（模）
console.log(2 ** 3) // 8 幂运算（ES7）
取余的实际应用：
// 判断奇偶
num % 2 === 0 // 偶数
num % 2 !== 0 // 奇数
// 循环序号（0,1,2,0,1,2...）
index % 3
// 最后一位数字
123 % 10 // 3
1.2 赋值运算符
let x = 10
x += 5 // x = x + 5 = 15
x -= 3 // x = x - 3 = 12
x *= 2 // x = x * 2 = 24
x /= 4 // x = x / 4 = 6
x **= 2 // x = x ** 2 = 36
x %= 5 // x = x % 5 = 1
1.3 自增自减运算符
let a = 1
let b = ++a // 先加后用：a=2, b=2
let c = a++ // 先用后加：c=2, a=3
// 记忆口诀：++ 在前先加，在后后加
⚠️ 易错点：
++在for循环外单独使用时，前缀/后缀结果相同；但在赋值表达式中，差别很大！
1.4 比较运算符
console.log(3 > 2) // true
console.log(3 < 2) // false
console.log(3 >= 3) // true
console.log(3 <= 2) // false
// 相等性比较（重点！）
console.log(3 == '3') // true ← 宽松相等，会做类型转换
console.log(3 === '3') // false ← 严格相等，类型也要一致
console.log(3 != '3') // false ← 宽松不等
console.log(3 !== '3') // true ← 严格不等
// 字符串比较（按字符 Unicode 码点逐位比较）
console.log('a' > 'A') // true（a=97，A=65）
console.log('10' > '9') // false（'1' < '9'）
console.log(10 > 9) // true（数字比较正常）
💡 最佳实践：永远使用
===和!==，避免隐式类型转换带来的意外。
1.5 逻辑运算符
// && 与（都为真才真）
console.log(true && true) // true
console.log(true && false) // false
console.log(1 > 0 && 2 > 1) // true
// || 或（有一个真就真）
console.log(true || false) // true
console.log(false || false) // false
// ! 非（取反）
console.log(!true) // false
console.log(!false) // true
console.log(!0) // true（0 是 falsy）
console.log(!!'hello') // true（双重取反，转布尔）
短路运算（非常重要！）
// && 短路：左边为 false，直接返回左边值（不执行右边）
console.log(0 && 'hello') // 0（左边是 falsy，直接返回）
console.log(1 && 'hello') // 'hello'（左边为 truthy，返回右边）
console.log(null && getData()) // null，getData() 不会执行！
// || 短路：左边为 true，直接返回左边值
console.log(0 || 'default') // 'default'
console.log('hi' || 'default') // 'hi'
// 实际应用：默认值设置
let username = userInput || '游客'
1.6 空值合并运算符（ES2020）
// ?? 只在左边是 null 或 undefined 时才取右边
// 与 || 的区别：|| 对所有 falsy 值都触发
let count = 0
console.log(count || 10) // 10（因为 0 是 falsy）
console.log(count ?? 10) // 0（0 不是 null/undefined）
二、分支语句
2.1 if 语句
// 单分支
if (condition) {
// 条件为真时执行
}
// 双分支
if (score >= 60) {
console.log('及格')
} else {
console.log('不及格')
}
// 多分支（else if 链）
if (score >= 90) {
console.log('优秀')
} else if (score >= 80) {
console.log('良好')
} else if (score >= 60) {
console.log('及格')
} else {
console.log('不及格')
}
⚠️ 注意：if 后面的
{}省略时只执行紧跟的一条语句，但强烈建议永远加花括号，避免 bug。
2.2 三元运算符
// 语法：条件 ? 值1 : 值2
let max = a > b ? a : b
// 等价于：
let max
if (a > b) {
max = a
} else {
max = b
}
// 实际应用场景
let timeStr = hour < 10 ? '0' + hour : String(hour) // 补零
let label = isLogin ? '退出登录' : '立即登录'
嵌套三元（尽量避免，可读性差）：
// 不推荐
let grade = score >= 90 ? 'A' : score >= 80 ? 'B' : score >= 60 ? 'C' : 'D'
// 推荐改为 if-else if 或 switch
2.3 switch 语句
switch (day) {
case 1:
console.log('星期一')
break // ← 必须写 break！否则会"穿透"到下一个 case
case 2:
console.log('星期二')
break
case 6:
case 7: // ← 两个 case 共用同一逻辑（利用穿透特性）
console.log('周末')
break
default:
console.log('未知')
}
switch vs if-else 如何选择？
switch 适合：等值比较、case 较多、值固定
if-else 适合：范围比较（>/<）、条件复杂、条件数量少
三、while 循环
3.1 基本语法
// while：先判断后执行（条件为假则一次都不执行）
let i = 1
while (i <= 5) {
console.log(i)
i++
}
// do-while：先执行后判断（至少执行一次）
let num
do {
num = prompt('请输入一个正数')
num = Number(num)
} while (num <= 0)
3.2 循环控制
for (let i = 0; i < 10; i++) {
if (i === 3) continue // 跳过本次，继续下一次
if (i === 7) break // 终止整个循环
console.log(i)
}
// 输出：0 1 2 4 5 6
3.3 无限循环与退出
// 写服务器或游戏循环时会用
while (true) {
// ... 执行某些操作
if (shouldStop) break // 必须有退出条件！
}
四、断点调试
4.1 Chrome DevTools 调试步骤
- 打开开发者工具（F12）
- 切换到 Sources 面板
- 找到 JS 文件，点击行号添加断点（蓝色标记）
- 刷新页面，代码执行到断点处会暂停
- 使用控制按钮逐步调试
关键按钮：
▶️ Resume (F8) → 继续执行到下一个断点
↷ Step Over (F10) → 执行当前行，跳过函数内部
↓ Step Into (F11) → 进入函数内部
↑ Step Out (Shift+F11) → 跳出当前函数
4.2 在代码中主动断点
function calculate(x, y) {
debugger // ← 代码会在这里暂停
return x + y
}
4.3 Watch 表达式
在 Sources 面板的 Watch 区域可以实时观察变量或表达式的值，便于追踪状态变化。
五、综合练习思路
练习1：判断闰年
function isLeapYear(year) {
// 闰年规则：能被4整除且不能被100整除，或能被400整除
return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0
}
练习2：成绩等级
function getGrade(score) {
if (score < 0 || score > 100) return '无效分数'
if (score >= 90) return 'A'
if (score >= 80) return 'B'
if (score >= 70) return 'C'
if (score >= 60) return 'D'
return 'F'
}
练习3：猜数字游戏（while 应用）
const target = Math.floor(Math.random() * 100) + 1
let guess
let attempts = 0
while (guess !== target) {
guess = Number(prompt('猜一个1-100之间的数：'))
attempts++
if (guess < target) alert('猜小了')
else if (guess > target) alert('猜大了')
else alert(`恭喜！你猜了${attempts}次`)
}
六、本章知识图谱
运算符与分支
├── 运算符
│ ├── 算术：+ - * / % **
│ ├── 赋值：= += -= *= /=
│ ├── 比较：> < >= <= == === != !==
│ ├── 逻辑：&& || !（注意短路！）
│ └── 空值合并：??（区别于 ||）
├── 分支语句
│ ├── if / else if / else
│ ├── 三元运算符 ? :
│ └── switch（注意 break）
├── while 循环
│ ├── while（先判断）
│ ├── do-while（先执行）
│ └── break / continue
└── 断点调试
├── Chrome DevTools → Sources
└── debugger 语句
七、高频面试题
Q1： == 和 === 的区别？
==是宽松相等，比较前会进行隐式类型转换；===是严格相等，类型不同直接返回 false。实际开发中应始终使用===。
Q2： && 和 || 返回的是布尔值吗？
不一定！它们返回的是操作数本身，而非 true/false。
&&返回第一个 falsy 值或最后一个值；||返回第一个 truthy 值或最后一个值。
Q3： switch 忘写 break 会怎样？
发生穿透（Fall-through） ，会继续执行下一个 case 的代码，直到遇到 break 或 switch 结束。有时可以利用这个特性，但大多数情况是 bug。
⬅️ 上一篇：Day1 - JS入门 ➡️ 下一篇：Day3 - 循环与数组
