JavaScript思维导图合集

这里整理了 JavaScript 入门阶段最核心的 8 个知识点思维导图。每张图覆盖一个主题，图下附文字要点，方便快速回顾。

1. 变量

要点：

• 声明方式：var（函数作用域）、let（块级）、const（常量）
• 数据类型：原始类型（number、string、boolean、null、undefined、symbol、bigint）和引用类型（object、array、function）
• 类型转换：隐式转换（==、+ 运算）和显式转换（Number()、String()、Boolean()）
• 作用域：全局、函数、块级；作用域链查找规则

2. 运算符

要点：

• 算术运算符：+ - * / % **
• 比较运算符：==（值相等）vs ===（值和类型都相等）
• 逻辑运算符：&& || !，短路求值规则
• 位运算符：& | ~ ^ << >>
• 三元运算符：condition ? a : b
• 扩展：可选链 ?.、空值合并 ??

3. 数组

要点：

• 创建与访问：[]、索引从 0 开始
• 常用方法：push/pop（尾部增删）、shift/unshift（头部增删）、slice/splice（截取/删除）
• 遍历：forEach、map、filter、reduce、find、some、every
• 排序：sort() 默认按字符串排序，数字排序需传比较函数
• 展开与合并：[...arr1, ...arr2]、concat

4. 流程语句

要点：

• 条件：if/else、switch/case、三元运算符
• 循环：for、while、do...while、for...of（遍历值）、for...in（遍历键）
• 跳转：break（跳出循环）、continue（跳过本次）
• 异常：try/catch/finally

5. 字符串函数

要点：

• 查找：indexOf、includes、startsWith、endsWith
• 截取：slice、substring、substr
• 修改：replace、toUpperCase、toLowerCase、trim
• 分割与拼接：split、concat
• 模板字符串：反引号 `${var}`

6. 函数基础

要点：

• 函数声明 vs 函数表达式 vs 箭头函数
• 参数：默认参数、剩余参数 ...args、arguments 对象
• 作用域与闭包：内层函数访问外层变量
• 回调函数：作为参数传递的函数
• 立即执行函数 IIFE：(function(){})()

7. DOM 操作

要点：

• 获取元素：getElementById、querySelector、querySelectorAll
• 修改内容：innerHTML、textContent
• 修改样式：element.style.color = 'red'
• 修改属性：getAttribute、setAttribute
• 事件监听：addEventListener('click', fn)
• 创建与删除：createElement、appendChild、removeChild

8. 正则表达式

要点：

• 元字符：\d \w \s \b .
• 量词：* + ? {n,m}
• 分组：(pattern) 捕获，(?:pattern) 非捕获
• 标志位：g（全局）、i（忽略大小写）、m（多行）
• 方法：test、match、replace、exec

相关阅读

• JavaScript正则表达式手册 — 完整正则速查
• ECMAScript文档 — ES6+ 语法
• 设计模式文档 — 设计模式