03运算符与流程控制

一、算术运算符与赋值运算符

最熟悉的一组：+ - * / % **。 ** 是 ES7 引入的「幂」：2 ** 3 等于 8。 + 是双面人——两边都是数字就相加，只要有一边是字符串就变成拼接。 所以 '5' + 3 得到字符串 '53'，而 '5' - 3 因为减法没有「拼接」概念，字符串被自动转成数字，得到数字 2。

++ 和 -- 是自增 / 自减。前缀（++i）先加再用， 后缀（i++）先用再加——单独一行没差别，写进表达式里就翻车。

二、比较与逻辑运算符

比较结果是 true / false。=== 严格相等（类型 + 值都相等）， == 会偷偷做类型转换，是JS 公认的坑——项目里只许用 ===。

逻辑三剑客：&&（与，全真才真）、||（或，一真就真）、!（非，取反）。 它们还有个隐藏技能——短路：能立刻判断结果时，后面的就不跑了。

ES2020 新加两个狠角色：?? 空值合并（只在 null/undefined 时兜底）、 ?. 可选链（中间任意一环是 null/undefined 就直接返回 undefined，不报错）。

三、三元运算符与短路求值

三元 条件 ? 值1 : 值2 是 if / else 的表达式版—— if/else 是语句、不返回值；三元是表达式、能塞进变量和模板字符串。

短路求值是逻辑运算符的副产品：a && b 从左往右找第一个 falsy，找到就返回它，全是真值就返回最后一个真值； a || b 反过来找第一个真值。 实战中 || 常用来给「空值/0」兜底（但注意上面说的 ?? 更稳）。

四、if / else if / else 条件分支

主力武器。if (条件) { ... } else if (条件) { ... } else { ... } 条件用括号包起来，执行的代码块用花括号包起来。

三条工程规矩：① 始终写花括号，哪怕只有一行——不加的话缩进出错就是 bug； ② else if 可以链多个，按顺序判定，第一个满足的就跑；③ 嵌套别超过 3 层， 否则就是「金字塔噩梦」，先抽函数 / 早返回 / 卫语句。

五、switch 多路分支

当一个变量要按多个固定值分支时，switch 比一长串 else if 更清晰。 经典结构：switch (x) → 多个 case → 每个 case 末尾必须 break， 最后用 default 兜底。

漏写 break 就会「穿透」——命中一个 case 后，下面所有 case 都会跑， 直到遇到第一个 break 或者 switch 结束。多数情况是 bug，但「多个 case 共享同一段代码」时是有意为之。

六、for 循环

最常用的循环：for (初始化; 条件; 更新) { ... }。 三段都可选：省略初始化就把变量声明写在上面；省略条件就是死循环； 省略更新就靠循环体内手动改。三段都写齐是标准范式。

循环内常用两个控制词：break（跳出整个循环，立刻停） 和 continue（跳过本次，进入下一轮）。

七、while 与 do-while

不知道循环次数、只知「满足条件就继续」时，用 while (条件) { ... }——先判后做。 如果条件一开始就是假，循环体一次都不跑。

反过来想「无论怎样先做一次」，就用 do { ... } while (条件)——先做后判， 最典型的场景是输入验证：必须让用户至少输入一次，不合格就一直让他重新输入。

八、本章小结

• 算术 + - * / % **，+ 会因字符串而变拼接，- 不会——拼接/相减的区别常考。
• 比较只用 === 和 !==，避开 == 的隐式类型转换；逻辑 && / || / ! 都是短路求值。
• ES2020 新增 ??（空值合并）和 ?.（可选链）——兜底字段首选 ??，比 || 更精准。
• 三元 条件 ? a : b 是表达式版的 if/else，嵌套别超过 2 层。
• if/else 用卫语句把异常挡在最前面；switch 每个 case 必须 break，否则穿透。
• for 已知次数、while 条件循环、do-while 至少跑一次；break 跳出整层、continue 跳过本轮。