🔧 第三章：运算符与控制流
掌握 JavaScript 的运算符和控制流结构
3.1 算术、比较、逻辑运算符
算术运算符
| 运算符 |
描述 |
示例 |
结果 |
| + |
加法 |
5 + 3 |
8 |
| - |
减法 |
5 - 3 |
2 |
| * |
乘法 |
5 * 3 |
15 |
| / |
除法 |
6 / 3 |
2 |
| % |
取余 |
7 % 3 |
1 |
| ** |
幂运算 |
2 ** 3 |
8 |
比较运算符
| 运算符 |
描述 |
示例 |
结果 |
| == |
相等（类型转换） |
5 == '5' |
true |
| === |
严格相等 |
5 === '5' |
false |
| != |
不等（类型转换） |
5 != '5' |
false |
| !== |
严格不等 |
5 !== '5' |
true |
| > |
大于 |
5 > 3 |
true |
| < |
小于 |
5 < 3 |
false |
| >= |
大于等于 |
5 >= 5 |
true |
| <= |
小于等于 |
5 <= 3 |
false |
最佳实践：始终使用严格相等运算符 (===) 和严格不等运算符 (!==)，避免类型转换带来的意外结果。
逻辑运算符
| 运算符 |
描述 |
示例 |
结果 |
| && |
逻辑与 |
true && false |
false |
| || |
逻辑或 |
true || false |
true |
| ! |
逻辑非 |
!true |
false |
3.2 空值合并与可选链
空值合并 (??) 和可选链 (?.) 是现代 JavaScript 的重要特性，让代码更加简洁和安全。
空值合并运算符 (??)
// 传统方式
const value = null;
const result = value || 'default'; // 'default'
// 空值合并运算符（只对 null 和 undefined 生效）
const value2 = 0;
const result2 = value2 ?? 'default'; // 0（因为 0 不是 null 或 undefined）
const value3 = null;
const result3 = value3 ?? 'default'; // 'default'
可选链运算符 (?.)
// 传统方式
const user = { name: 'John' };
const street = user.address && user.address.street; // undefined
// 可选链运算符
const street2 = user?.address?.street; // undefined（不会报错）
// 可选链与函数调用
const result4 = user?.getAddress?.(); // undefined（如果 getAddress 不存在）
// 可选链与数组
const arr = [1, 2, 3];
const value4 = arr?.[5]; // undefined（不会报错）
3.3 条件判断
if...else 语句
const age = 18;
if (age >= 18) {
console.log('成年人');
} else if (age >= 13) {
console.log('青少年');
} else {
console.log('儿童');
}
switch 语句
const fruit = 'apple';
switch (fruit) {
case 'apple':
console.log('苹果');
break;
case 'banana':
console.log('香蕉');
break;
case 'orange':
console.log('橙子');
break;
default:
console.log('未知水果');
}
ES2026 新特性：匹配语句 (Match Statement)
// ES2026 匹配语句（替代复杂 switch）
const value = 10;
match (value) {
case 0:
console.log('零');
break;
case 1:
case 2:
case 3:
console.log('小数字');
break;
case when (x) => x > 5:
console.log('大于 5 的数字');
break;
default:
console.log('其他数字');
}
3.4 循环结构
for 循环
// 基本 for 循环
for (let i = 0; i < 5; i++) {
console.log(i); // 0, 1, 2, 3, 4
}
// for...of 循环（推荐用于数组）
const arr = [1, 2, 3, 4, 5];
for (const item of arr) {
console.log(item); // 1, 2, 3, 4, 5
}
// for...in 循环（慎用，用于对象）
const obj = { a: 1, b: 2, c: 3 };
for (const key in obj) {
console.log(key, obj[key]); // a 1, b 2, c 3
}
while 和 do...while 循环
// while 循环
let count = 0;
while (count < 5) {
console.log(count); // 0, 1, 2, 3, 4
count++;
}
// do...while 循环（至少执行一次）
let count2 = 0;
do {
console.log(count2); // 0, 1, 2, 3, 4
count2++;
} while (count2 < 5);
3.5 迭代器协议初步
for...of vs for...in
| 循环类型 |
遍历对象 |
遍历内容 |
推荐使用 |
| for...of |
可迭代对象（数组、字符串等） |
值 |
是 |
| for...in |
对象 |
键 |
慎用 |
// for...of 遍历数组
const fruits = ['apple', 'banana', 'orange'];
for (const fruit of fruits) {
console.log(fruit); // apple, banana, orange
}
// for...of 遍历字符串
const str = 'hello';
for (const char of str) {
console.log(char); // h, e, l, l, o
}
// for...in 遍历对象（包含原型链属性）
const person = { name: 'John', age: 30 };
for (const key in person) {
if (person.hasOwnProperty(key)) {
console.log(key, person[key]);
}
}
动手练习
练习 1：运算符
- 练习各种算术运算符
- 比较 == 和 === 的区别
- 练习逻辑运算符的短路特性
- 使用空值合并和可选链
练习 2：条件判断
- 使用 if...else 实现一个简单的评分系统
- 使用 switch 语句实现一个简单的菜单系统
- 尝试使用 ES2026 的匹配语句
练习 3：循环
- 使用 for 循环遍历数组
- 使用 for...of 遍历对象
- 使用 while 循环实现一个倒计时
- 比较不同循环方式的性能