现代JavaScript与ES6+核心特性学习思维导图

一、 基础语法与声明

1. 变量声明

let 与 const

块级作用域

暂时性死区

2. 箭头函数

语法简写

this 绑定行为

不适用的场景

3. 模板字符串

多行字符串

表达式嵌入

标签模板

二、 解构赋值

1. 数组解构

基本用法

默认值

剩余模式

2. 对象解构

属性重命名

嵌套解构

函数参数解构

三、 扩展与收集运算符

1. 扩展运算符 (...)

数组展开

对象展开

函数调用传参

2. 剩余参数 (...)

函数参数收集

解构剩余项

四、 增强的对象字面量

1. 属性简写

2. 方法简写

3. 计算属性名

4. 对象方法扩展

Object.assign()

Object.entries() / Object.keys() / Object.values()

五、 新的数据结构

1. Set 与 WeakSet

去重特性

常用方法

2. Map 与 WeakMap

键值对集合

与对象的区别

3. Symbol 类型

唯一性

内置Symbol

六、 迭代器与生成器

1. 可迭代协议

Symbol.iterator

内置可迭代对象

2. for...of 循环

3. 生成器函数

function*

yield 关键字

异步应用

七、 异步编程

1. Promise

状态与链式调用

Promise 静态方法

Promise.all() / Promise.race()

2. async/await

语法糖

错误处理

并行与顺序执行

3. Fetch API

基本使用

与 async/await 结合

八、 模块化

1. ES6 模块语法

export / export default

import

动态导入 import()

2. 模块加载

浏览器支持

打包工具集成

九、 类与面向对象

1. class 语法

构造函数

实例方法与属性

静态方法与属性

2. 继承

extends

super

方法重写

3. 访问器属性

getter / setter

十、 其他重要特性

1. 默认参数

2. 尾调用优化

3. 二进制与八进制字面量

4. 正则表达式增强

十一、 关联 React 框架关键概念

1. JSX 语法依赖

JavaScript 表达式嵌入

箭头函数与事件处理

解构赋值与 Props

2. 组件开发

类组件与 ES6 class

函数组件与箭头函数

Hooks 与闭包特性

3. 状态与副作用管理

useState / useEffect 与异步

状态更新与不可变数据

4. 性能优化

useMemo / useCallback 与依赖数组

上下文与 Provider 模式

5. 现代 React 特性

并发特性与 Suspense

服务器组件

十二、 关联 Vue 3 框架关键概念

1. Composition API 基础

ref 与 reactive (响应式原理)

计算属性与 watch (Getter/Setter)

生命周期钩子与异步

2. 脚本语法糖 (<script setup>)

顶层变量与函数自动暴露

组件导入与注册

defineProps / defineEmits 与解构

3. 响应式系统深入

Proxy 与 Reflect (ES6)

响应式工具函数 (toRefs, watchEffect)

4. 组件与模板

片段、Teleport、Suspense (模板增强)

自定义指令与渲染函数

5. 状态管理

Pinia 与 Store 结构 (模块化)

组合式函数复用

十三、 通用框架关联点