JavaScript 核心知識體系：10 張高清思維導圖全景速覽（含變量、DOM、BOM、正則等）

JavaScript 核心知識體系：10 張高清思維導圖全景速覽

思維導圖（Mind Map）是發散性思維的可視化工具，通過圖文並重、層級關聯、顏色記憶鏈接，幫助大腦在邏輯與想像間平衡發展。本文精選 10 張高清思維導圖，覆蓋 JavaScript 從基礎語法到瀏覽器對象模型的核心知識點，適合系統學習、面試複習、查漏補缺，建議收藏備用。

導圖目錄總覽

1. JavaScript 變量與數據類型
2. JavaScript 運算符與表達式
3. JavaScript 數組操作大全
4. JavaScript 流程控制語句
5. JavaScript 字符串核心方法
6. JavaScript 函數基礎與進階
7. JavaScript 基礎 DOM 操作
8. DOM 文檔對象模型深度圖解
9. BOM 瀏覽器對象模型全景圖
10. JavaScript 正則表達式實戰

1. JavaScript 變量與數據類型

核心知識點：

• 聲明關鍵字：var（函數作用域/提升）、let/const（塊級作用域/暫時性死區）
• 八大數據類型：Undefined、Null、Boolean、Number、String、Symbol、BigInt、Object
• 類型判斷：typeof、instanceof、Object.prototype.toString.call()、Array.isArray()
• 類型轉換：隱式/顯式轉換規則、== vs ===、NaN 特性

2. JavaScript 運算符與表達式

核心知識點：

• 算術：+ - * / % **（冪運算）、++/-- 前後綴差異
• 比較：==（類型轉換）vs ===（嚴格）、Object.is()（處理 NaN/-0）
• 邏輯：&& || ! ??（空值合併）、短路求值原理
• 位運算：& | ^ ~ << >> >>>、實戰技巧（權限掩碼、取整 ~~x）
• 其他：?. 可選鏈、?? 空值合併、typeof、delete、in、instanceof

3. JavaScript 數組操作大全

核心知識點：

• 創建：字面量、Array.of/from、構造函數陷阱
• 增刪改：push/pop/shift/unshift/splice、slice（淺拷貝）
• 遍歷：for/forEach/map/filter/reduce/find/every/some/flat/flatMap
• 查找：indexOf/lastIndexOf/includes/find/findIndex
• 排序：sort 比較函數穩定性、reverse
• 轉換：join/toString/JSON.stringify
• 陷阱：稀疏數組、類數組轉真數組（Array.from/展開運算符）

4. JavaScript 流程控制語句

核心知識點：

• 分支：if/else、switch/case（嚴格相等）、三元運算符
• 循環：for/while/do-while、for...in（枚舉屬性）、for...of（迭代值）
• 跳轉：break/continue/label 標籤語句
• 異常：try/catch/finally/throw、錯誤對象屬性（name/message/stack）
• 嚴格模式：'use strict' 限制與優化

5. JavaScript 字符串核心方法

核心知識點：

• 查找：indexOf/lastIndexOf/search/match/includes/startsWith/endsWith
• 截取：slice/substring/substr 差異、負索引行為
• 大小寫：toUpperCase/toLowerCase/localeCompare
• 分割/合併：split/join、模板字面量 `${var}`
• 替換：replace/replaceAll（正則/函數回調）
• 填充：padStart/padEnd、repeat/trim/trimStart/trimEnd
• Unicode：codePointAt/fromCodePoint、normalize() 規範化

6. JavaScript 函數基礎與進階

核心知識點：

• 定義方式：函數聲明/表達式/箭頭函數/構造函數/Generator/Async
• 參數：默認值、剩餘參數 ...args、解構賦值、arguments 對象
• this 綁定：默認/隱式/顯式（call/apply/bind）/new/箭頭函數（詞法作用域）
• 閉包：形成條件、應用場景（私有變量、柯里化、模塊模式）、內存洩漏防範
• 原型鏈：prototype/__proto__/constructor、繼承模式（組合/寄生組合/Class extends）
• 高階函數：柯里化、偏函數、函數組合、柯里化 vs 偏應用

7. JavaScript 基礎 DOM 操作

核心知識點：

• 節點獲取：getElementById/querySelector/querySelectorAll/getElementsByClassName/TagName
• 節點屬性：id/className/style/innerHTML/textContent/value/dataset
• 節點操作：createElement/appendChild/insertBefore/replaceChild/removeChild/cloneNode
• 事件模型：捕獲/目標/冒泡三階段、addEventListener/removeEventListener、事件對象（target/currentTarget/preventDefault/stopPropagation）
• 事件委託：利用冒泡機制綁定父元素、event.target 判斷來源

8. DOM 文檔對象模型深度圖解

核心知識點：

• 文檔樹結構：Document/Element/Attribute/Text/Comment/DocumentFragment 節點類型
• 節點屬性：nodeType/nodeName/nodeValue/parentNode/childNodes/firstChild/lastChild
• 文檔操作：createDocumentFragment/write/writeln/createElement/createTextNode
• 選集/範圍：Selection/Range 實現富文本編輯器核心
• 性能優化：DocumentFragment 批量操作、innerHTML vs DOM 方法、重排/重繪最小化

9. BOM 瀏覽器對象模型全景圖

核心知識點：

• window 核心：全局對象、open/close/alert/confirm/prompt/setTimeout/setInterval/requestAnimationFrame
• location：URL 解析（href/protocol/host/pathname/search/hash）、assign/replace/reload
• history：back/forward/go/pushState/replaceState（SPA 路由核心）
• navigator：用戶代理信息、onLine/geolocation/cookieEnabled
• screen：屏幕分辨率、可用區域
• Storage：localStorage/sessionStorage、IndexedDB/Cookie 存儲對比

10. JavaScript 正則表達式實戰

核心知識點：

• 元字符：^ $ . * + ? {n,m} [ ] | ( ) \
• 修飾符：g 全局、i 忽略大小寫、m 多行、s dotAll、u Unicode、y sticky
• 分組與引用：捕獲組 ()、非捕獲 (?:)、命名組 (?<name>)、反向引用 \1/$1
• 斷言：先行 (?=)/(?!)、後行 (?<=)/(?<!)（ES2018）
• 常用方法：test/exec/match/matchAll/replace/search/split
• 實戰：郵箱/手機/身份證/URL/日期/密碼強度驗證、千分位分隔、模板解析

學習建議與使用技巧

1. 模塊化學習：按導圖順序逐個攻克，每張導圖對應一個知識專題。
2. 代碼驗證：看到語法點立即在 Console 寫 Demo 驗證，加深肌肉記憶。
3. 關聯串聯：將導圖間關聯點串起（如：閉包→模塊模式→單例模式；原型鏈→繼承→Class 語法糖）。
4. 面試複習：面試前快速瀏覽 10 張導圖，查漏補缺高頻考點。
5. 工具推薦：XMind、MindMaster、Miro、ProcessOn 等可二次編輯導圖，加入個人筆記。

總結

這 10 張思維導圖構建了 JavaScript 從語言核心到瀏覽器交互的完整知識骨架。思維導圖不是終點，而是起點——用它建立全局觀，再通過代碼實踐、項目應用、源碼閱讀填充血肉，才能真正掌握 JavaScript。建議將本文加入收藏夾，學習路上隨時回顧、查缺補漏。祝你前端進階之路順風順水！