【原生JS教程】第3节：运算符与表达式

👽第 3 课：运算符与表达式

📌 引言

运算符是 JavaScript 中用于操作数据的基本工具，表达式则是由变量、常量、运算符等构成的可求值代码片段。掌握运算符的分类和使用方式，是编写逻辑判断、数据处理和复杂计算的基础。

通过本节课的学习，你将掌握：

• JavaScript 中常见的运算符类型（算术、比较、逻辑、三元等）
• 运算符的优先级与结合性
• 表达式的基本概念与使用场景
• 常见运算符陷阱与最佳实践

---

📚 本节内容概要

✅ 1. 算术运算符（Arithmetic Operators）

用于执行数学运算。

运算符	描述	示例
+	加法	5 + 3 ➜ 8
-	减法	5 - 3 ➜ 2
*	乘法	5 * 3 ➜ 15
/	除法	6 / 3 ➜ 2
%	取余	7 % 3 ➜ 1
**	幂运算	2 ** 3 ➜ 8
++	自增	let a = 5; a++ ➜ 5（后自增）
--	自减	let b = 5; b-- ➜ 5（后自减）

📌 注意：+ 运算符在字符串拼接中具有优先级，例如：

console.log(5 + "5"); // "55"
console.log("5" + 5); // "55"

---

✅ 2. 比较运算符（Comparison Operators）

用于比较两个值的大小或相等性，返回布尔值（true 或 false）。

运算符	描述	示例
==	相等（自动类型转换）	5 == "5" ➜ true
===	严格相等（不转换类型）	5 === "5" ➜ false
!=	不等	5 != 3 ➜ true
!==	严格不等	5 !== "5" ➜ true
>	大于	5 > 3 ➜ true
<	小于	5 < 3 ➜ false
>=	大于等于	5 >= 5 ➜ true
<=	小于等于	5 <= 3 ➜ false

📌 最佳实践：

• 优先使用 === 和 !==，避免因类型转换带来的错误。
• 避免比较 NaN，使用 Number.isNaN() 替代。

---

✅ 3. 逻辑运算符（Logical Operators）

用于组合多个布尔表达式。

运算符	描述	示例
&&	逻辑与	true && false ➜ false
`		`
!	逻辑非	!true ➜ false

📌 短路求值（Short-circuit Evaluation）：

• &&：如果第一个操作数为假值，则返回该值，不再计算第二个。
• ||：如果第一个操作数为真值，则返回该值，不再计算第二个。

console.log(0 && 5); // 0
console.log(0 || 5); // 5

📌 常见用途：

• || 用于设置默认值：let name = input || "default";
• && 用于条件执行：isLoggedIn && showProfile();

---

✅ 4. 条件表达式（三元运算符）

是 if...else 的简写形式，用于根据条件返回两个值中的一个。

let age = 20;
let result = (age >= 18) ? "成年" : "未成年";
console.log(result); // "成年"

📌 语法：

condition ? valueIfTrue : valueIfFalse

---

✅ 5. 运算符优先级与结合性

JavaScript 中的运算符有优先级顺序，高优先级的运算符会先执行。若优先级相同，则按结合性（左结合或右结合）执行。

优先级	运算符	结合性
最高	()	左
	++, --	右
	!, typeof	右
	*, /, %	左
	+, -	左
	<, >, <=, >=	左
	==, ===	左
	&&	左
	`
最低	?:（三元）	右

📌 建议：使用括号 () 提高可读性，避免优先级问题。

let result = 5 + 3 * 2; // 11（先乘后加）
let result2 = (5 + 3) * 2; // 16（先加后乘）

---

✅ 6. 表达式（Expressions）

表达式是由变量、常量、运算符等组成的可以求值的代码片段。

常见表达式类型：

• 算术表达式：5 + 3
• 布尔表达式：age > 18
• 字符串表达式："Hello, " + name
• 函数表达式：function() { return 10; }
• 对象表达式：{ name: "Alice" }
• 数组表达式：[1, 2, 3]

📌 表达式与语句的区别：

• 表达式返回一个值。
• 语句执行一个操作，不一定返回值（如 if、for、while）。

---

✅ 7. 实战练习建议

练习 1：理解 == 与 === 的区别

console.log(5 == "5");  // true
console.log(5 === "5"); // false

📌 问题：为什么 == 会返回 true？=== 为何返回 false？

练习 2：使用逻辑运算符设置默认值

function greet(name) {
  name = name || "Guest";
  console.log("Hello, " + name);
}

greet();        // "Hello, Guest"
greet("Alice"); // "Hello, Alice"

📌 问题：如果 name 是空字符串，会发生什么？

练习 3：使用三元运算符简化判断

let score = 85;
let grade = score >= 90 ? "A" : score >= 80 ? "B" : "C";
console.log(grade); // "B"

📌 问题：你能将上述代码改写为 if...else 吗？

---

🧾 总结

本节课我们系统学习了 JavaScript 中的各类运算符（算术、比较、逻辑、三元），掌握了表达式的基本概念，并理解了运算符的优先级和结合性。通过实战练习，我们加深了对逻辑判断、类型转换和表达式使用的理解。

通过本节课的学习，你已经具备以下能力：

• 使用算术运算符进行数学计算
• 使用比较运算符进行逻辑判断
• 使用逻辑运算符实现短路求值和默认值设置
• 使用三元运算符简化 if...else 判断
• 理解运算符优先级与结合性，避免常见陷阱

---

第 3 课：运算符与表达式 —— 重难点分析与高频面试题

---

🧠 本节重难点分析

🔑 重点内容

知识点	说明
算术运算符	掌握 +、-、*、/、%、**、++、-- 的使用，理解字符串拼接优先级
比较运算符	熟悉 ==（类型转换）与 ===（严格相等）的区别
逻辑运算符	掌握 &&（短路返回第一个假值）和 `
条件表达式（三元运算符）	理解其作为 if...else 简写形式的用法
运算符优先级	了解常见运算符的优先级顺序，避免逻辑错误
表达式与语句的区别	表达式返回值，语句执行操作

🧩 难点内容

知识点	说明
== 与 === 的行为差异	特别是 null == undefined 为 true，而 null === undefined 为 false
+ 运算符的类型转换行为	如 5 + "5" 返回 "55"，而 5 - "5" 返回 0
逻辑运算符的“短路”行为	如 0 && 5 返回 0，`0
运算符优先级陷阱	如 5 + 3 * 2 与 (5 + 3) * 2 的差异
三元运算符嵌套的可读性问题	嵌套使用可能导致代码难以维护

---

📌 第 3 课 10 大高频面试题

1. == 和 === 有什么区别？

答案要点：

• ==：进行类型转换后再比较。
• ===：不进行类型转换，直接比较类型和值。

console.log(5 == "5");  // true
console.log(5 === "5"); // false

2. null == undefined 和 null === undefined 的结果分别是什么？

答案要点：

• null == undefined ➜ true（类型转换后相同）
• null === undefined ➜ false（类型不同）

3. + 运算符在字符串和数字之间的行为？

答案要点：

• 如果其中一个操作数是字符串，+ 会执行字符串拼接。
• 其他情况执行加法运算。

console.log(5 + "5"); // "55"
console.log(5 - "5"); // 0

4. 什么是“短路求值”？请举例说明。

答案要点：

• &&：如果第一个操作数为假值，返回该值，不执行后续。
• ||：如果第一个操作数为真值，返回该值，不执行后续。

console.log(0 && 5); // 0
console.log(0 || 5); // 5

5. ! 运算符的作用是什么？如何判断真假值？

答案要点：

• !：将操作数转换为布尔值后取反。
• 假值包括：0、""、null、undefined、NaN、false。

console.log(!""); // true
console.log(!5);  // false

6. ++a 和 a++ 有什么区别？

答案要点：

• ++a：前置自增，先自增再返回值。
• a++：后置自增，先返回值再自增。

let a = 5;
console.log(++a); // 6
console.log(a++); // 6
console.log(a);   // 7

7. 如何使用三元运算符简化 if...else？

答案要点：

• 三元运算符格式为 condition ? valueIfTrue : valueIfFalse。

let age = 20;
let result = age >= 18 ? "成年" : "未成年";

8. JavaScript 中哪些运算符的优先级最高？

答案要点：

• 括号 () 最高。
• 接下来是 ++、--、!、typeof。
• 最低的是 ?:（三元）、=、+= 等赋值运算符。

console.log(5 + 3 * 2);     // 11（先乘后加）
console.log((5 + 3) * 2);   // 16（先加后乘）

9. 请解释 0.1 + 0.2 !== 0.3 的原因？

答案要点：

• JavaScript 使用 IEEE 754 浮点数表示法，某些十进制小数无法精确表示，导致精度丢失。

console.log(0.1 + 0.2); // 0.30000000000000004

10. NaN 和 isNaN() 的区别？

答案要点：

• NaN：表示“非数字”，但其本身是 number 类型。
• isNaN()：尝试将参数转换为数字再判断，可能误判（如 isNaN("abc") 返回 true）。
• 推荐使用 Number.isNaN()。

console.log(isNaN("123"));        // false（字符串被转为数字）
console.log(Number.isNaN("123")); // false
console.log(Number.isNaN(NaN));   // true

---

📚 面试建议

• 理解 == 与 === 的本质区别，避免类型转换带来的错误。
• 掌握 +、&&、|| 的类型转换行为。
• 熟练使用三元运算符简化条件判断。
• 避免依赖 isNaN()，使用 Number.isNaN() 更安全。
• 使用括号提高表达式的可读性，避免优先级陷阱。

---

📅 下一节预告：第 4 课：条件语句与循环
📌 建议复习内容：

• if...else 与 switch 的使用场景
• for、while、do...while 的基本结构
• break 与 continue 的作用
• 理解 NaN 与 Number.isNaN() 的区别

📌 预习建议：

• 查阅 MDN 关于 if...else 和 switch 的文档
• 尝试使用 for 循环遍历数组
• 理解 break 与 continue 的作用

---