目录

JavaScript运算符

一、运算符分类与优先级

1. 运算符优先级表

二、算术运算符

1. 基础算术运算

2. 自增/自减运算符

三、比较运算符

1. 基础比较

2. 相等性判断

四、逻辑运算符

1. 基础逻辑运算

2. 短路求值（Short-Circuiting）

3. 逻辑赋值运算符（ES2021+）

五、位运算符

1. 基础位运算

六、其他运算符

1. 三元条件运算符

2. 空值合并运算符（??）

3. 可选链运算符（?.）

4. 展开运算符（...）

七、常见陷阱与最佳实践

1. == 的隐式类型转换

2. 浮点数精度问题

3. 短路求值的灵活应用

JavaScript逻辑中断

一、逻辑与 && 的短路

1. 假值列表

2. 示例

二、逻辑或 || 的短路

三、空值合并 ?? 的精准短路

四、实际应用场景

1. 条件执行函数

2. 链式属性访问

3. 组合使用

五、注意事项

六、总结

---

JavaScript运算符

---

一、运算符分类与优先级

1. 运算符优先级表

优先级从高到低排序（部分常见运算符）：

优先级	运算符	说明
1	()	括号（强制优先级）
2	++, --, !, ~, typeof	自增、自减、逻辑非、按位非等
3	**	指数（ES6+）
4	*, /, %	乘、除、取模
5	+, -	加、减
6	<<, >>, >>>	位左移、右移、无符号右移
7	<, <=, >, >=	比较运算符
8	==, !=, ===, !==	相等性判断
9	&	按位与
10	^	按位异或
11	|	按位或
12	&&	逻辑与
13	||	逻辑或
14	??	空值合并（ES2020+）
15	?:	三元条件运算符
16	=, +=, -=, **= 等	赋值运算符
17	,	逗号运算符（返回最后一个表达式）

---

二、算术运算符

1. 基础算术运算

运算符	名称	示例	说明
+	加法	3 + 2 → 5	数值相加或字符串拼接
-	减法	5 - 3 → 2
*	乘法	2 * 3 → 6
/	除法	6 / 2 → 3	结果为浮点数（如 5 / 2 → 2.5）
%	取模	7 % 3 → 1	返回除法余数
**	指数	2 ** 3 → 8	ES6+ 新增，等价于 Math.pow()

2. 自增/自减运算符

运算符	示例	说明
++	let a = 1; a++	后置自增：先返回值，再自增 → a 变为 2
--	let b = 2; --b	前置自减：先自减，再返回值 → b 变为 1

let i = 1
console.log(i++ + ++i + i)  //7

注意：避免在复杂表达式中混用前置和后置形式，易引发歧义。

---

三、比较运算符

1. 基础比较

运算符	名称	示例	说明
>	大于	5 > 3 → true
<	小于	2 < 1 → false
>=	大于等于	5 >= 5 → true
<=	小于等于	3 <= 2 → false

2. 相等性判断

运算符	名称	示例	说明
==	宽松相等	"5" == 5 → true	类型不同时尝试转换再比较
===	严格相等	"5" === 5 → false	值和类型均相同才返回 true
!=	宽松不等	"5" != 5 → false	等效于 !(a == b)
!==	严格不等	"5" !== 5 → true	等效于 !(a === b)

最佳实践：始终优先使用 === 和 !==，避免隐式类型转换导致的意外结果。

---

四、逻辑运算符

1. 基础逻辑运算

运算符	名称	示例	说明
&&	逻辑与	true && false → false	两边为 true 才返回 true
||	逻辑或	true || false → true	任一边为 true 即返回 true
!	逻辑非	!true → false	取反

2. 短路求值（Short-Circuiting）

• && 短路：若左侧为假，直接返回左侧值，否则返回右侧值。

  console.log(0 && "Hello"); // 0（左侧为假，直接返回）
  console.log(2 && "Hello"); // "Hello"

• || 短路：若左侧为真，直接返回左侧值，否则返回右侧值。

  console.log("" || "Default"); // "Default"
  console.log("Hello" || "Default"); // "Hello"

3. 逻辑赋值运算符（ES2021+）

运算符	示例	等效于
&&=	a &&= b	a = a && b
||=	a ||= b	a = a || b
??=	a ??= b	a = a ?? b（空值合并赋值）

---

五、位运算符

1. 基础位运算

运算符	名称	示例	说明
&	按位与	5 & 3 → 1	二进制位均为 1 时结果为 1
|	按位或	5 | 3 → 7	二进制位任一为 1 则结果为 1
^	按位异或	5 ^ 3 → 6	二进制位不同则结果为 1
~	按位非	~5 → -6	取反码（二进制位取反）
<<	左移	5 << 1 → 10	左移指定位数，右侧补 0
>>	右移（有符号）	-5 >> 1 → -3	保留符号位，右侧补 0
>>>	右移（无符号）	-5 >>> 1 → 2147483645	忽略符号位，左侧补 0

---

六、其他运算符

1. 三元条件运算符

• 语法：condition ? expr1 : expr2

  const status = age >= 18 ? "Adult" : "Minor";

2. 空值合并运算符（??）

• 作用：左侧为 null 或 undefined 时返回右侧值，否则返回左侧值。

  const value = input ?? "default"; 
  // 等效于 input !== null && input !== undefined ? input : "default"

3. 可选链运算符（?.）

• 作用：安全访问嵌套对象属性，避免因中间属性不存在而报错。

  const city = user?.address?.city; 
  // 若 user 或 address 为 null/undefined，返回 undefined

4. 展开运算符（...）

• 数组展开：

  const arr1 = [1, 2];
  const arr2 = [...arr1, 3]; // [1, 2, 3]

• 对象展开（ES2018+）：

  const obj1 = { x: 1 };
  const obj2 = { ...obj1, y: 2 }; // { x: 1, y: 2 }

---

七、常见陷阱与最佳实践

1. == 的隐式类型转换

console.log([] == ![]); 
// true（[] 转为 0，![] 转为 false → 0）

解决方案：始终使用 === 和 !==。

2. 浮点数精度问题

console.log(0.1 + 0.2 === 0.3); 
// false（实际结果为 0.30000000000000004）

解决方案：使用 toFixed() 或第三方库（如 decimal.js）处理精度。

3. 短路求值的灵活应用

// 条件执行函数
function init() { console.log("Initialized"); }
let isInit = false;
isInit || init(); // 若未初始化，则调用 init()

---

   

JavaScript逻辑中断

---

一、逻辑与 && 的短路

规则：当左侧表达式为 假值（falsy） 时，直接返回左侧值，不再执行右侧。

1. 假值列表

• false

• 0、-0、0n（BigInt 零）

• ""（空字符串）

• null

• undefined

• NaN

2. 示例

// 示例 1：短路发生
console.log(0 && alert("不会执行")); // 输出 0（左侧为假，直接返回 0）// 示例 2：未短路
console.log(1 && "Hello"); // 输出 "Hello"（左侧为真，返回右侧值）// 实际应用：条件渲染（React/Vue）
isLoggedIn && <Dashboard />;

---

二、逻辑或 || 的短路

规则：当左侧表达式为 真值（truthy） 时，直接返回左侧值，不再执行右侧。

示例

// 示例 1：短路发生
console.log("Hello" || alert("不会执行")); // 输出 "Hello"// 示例 2：未短路
console.log(0 || "默认值"); // 输出 "默认值"// 实际应用：设置默认值（旧版写法）
const port = config.port || 3000; // 注意：0 会被覆盖！

---

三、空值合并 ?? 的精准短路

规则：仅当左侧为 null 或 undefined 时，才返回右侧值。

示例

// 示例 1：不短路
console.log(0 ?? "默认值"); // 输出 0（保留 0）// 示例 2：短路发生
console.log(null ?? "备用值"); // 输出 "备用值"// 实际应用：精准默认值（现代推荐）
const port = config.port ?? 3000; // 允许 0 或 ""

---

四、实际应用场景

1. 条件执行函数

// 仅当用户存在时调用函数
user.isAdmin && showAdminPanel();// 替代写法
if (user.isAdmin) showAdminPanel();

2. 链式属性访问

// 安全访问嵌套属性（旧版）
const city = user && user.address && user.address.city;// 现代替代方案：可选链操作符 `?.`
const city = user?.address?.city;

3. 组合使用

// 复杂条件判断
const result = (condition1 && value1) || (condition2 && value2) ?? fallback;

---

五、注意事项

1. 优先级问题
   逻辑运算符优先级：&& > || > ??，建议用 () 明确优先级：

   console.log(true || false && false); 
   // 输出 true（等价于 true || (false && false))

2. 副作用控制
   短路特性可能导致右侧代码未执行：

   let x = 0;
   false && x++; // x 仍为 0

3. 避免过度使用
   虽然简洁，但过度使用会降低可读性：

   // ❌ 难以理解
   isValid && (isAdmin || isModerator) && submitForm();// ✅ 更清晰
   if (isValid && (isAdmin || isModerator)) {submitForm();
   }

---

六、总结

• &&：用于 必须满足前置条件 的场景（如权限检查）。

• ||：适合旧版默认值，但会覆盖假值（0、""）。

• ??：现代默认值方案，精准处理 null/undefined。

---