目錄
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 : expr2const 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;五、注意事項
-
優先級問題
邏輯運算符優先級：&&?>?||?>???，建議用?()?明確優先級：console.log(true || false && false); // 輸出 true（等價于 true || (false && false)) -
副作用控制
短路特性可能導致右側代碼未執行：let x = 0; false && x++; // x 仍為 0 -
避免過度使用
雖然簡潔，但過度使用會降低可讀性：// ? 難以理解 isValid && (isAdmin || isModerator) && submitForm();// ? 更清晰 if (isValid && (isAdmin || isModerator)) {submitForm(); }
六、總結
-
&&：用于?必須滿足前置條件?的場景（如權限檢查）。 -
||：適合舊版默認值，但會覆蓋假值（0、""）。 -
??：現代默認值方案，精準處理?null/undefined。
