【原生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的作用