JavaScript 分阶段完整学习路线

整体分 6 大阶段由浅入深适配自学 / 面试复习每阶段标注必掌握、选学、手写练习题阶段一JS 基础语法入门12 周核心知识点变量声明var/let/const、变量提升、块级作用域8 大基础数据类型原始值 vs 引用值类型转换、相等判断 / / Object.is类型检测typeof、toString、instanceof各类运算符算术、逻辑、空值合并??、可选链?.、展开符...流程控制if、switch、for/for in/for of、while、break/continue基础数组、对象增删改查重难点let/const 暂时性死区隐式类型转换坑点[] ![]等for in 和 for of 区别配套练习交换两个变量不使用中间变量判断输入是否为有效数字数组去重基础版遍历对象所有属性并打印验收标准随便给一段混合类型代码能准确说出输出结果。阶段二函数 ES6 核心特性核心23 周核心知识点函数声明、表达式、IIFE、箭头函数形参、默认参数、剩余参数、argumentsthis 基础指向、call/apply/bind作用域、作用域链、闭包概念与场景高阶函数、回调函数ES6 必学解构、模板字符串、对象简写Set / Map / WeakSet / WeakMapclass、extends、super、私有字段#模块化 import /export重难点箭头函数无 this、无 arguments、不能做构造函数闭包内存泄漏问题WeakMap 弱引用特性配套手写练习手写 call /apply/bind实现一个简单计数器闭包使用 Set 数组去重类实现简单继承验收标准能独立解释闭包用途分清各类场景下 this 指向。阶段三异步编程 Event Loop面试高频2 周核心知识点同步 / 异步、阻塞非阻塞概念回调函数、回调地狱Promise三种状态、then/catch/finally、链式调用Promise APIall / race / allSettled / anyasync /await try catch 异常处理宏任务、微任务、浏览器事件循环完整流程定时器 setTimeout /setInterval/requestAnimationFrame异步并发控制串行、批量并行重难点事件循环执行顺序微任务优先于宏任务async/await 本质是 Promise 语法糖Promise 链式错误穿透配套手写练习完整手写 Promise含 then、catch、all、race异步请求串行执行函数根据打印顺序分析 Event Loop 代码输出验收标准任意一段混合定时器 Promise 代码能精准说出打印顺序。阶段四DOMBOM 浏览器 API前端实操2 周核心知识点BOMwindow、location、history、navigator localStorage /sessionStorage/cookie 窗口尺寸、滚动、页面跳转、弹窗DOMDOM 节点获取、增删改查、克隆、替换class、style、dataset、属性操作事件流捕获、目标、冒泡addEventListener、event 对象、阻止冒泡 / 默认行为事件委托事件代理原理与封装表单操作、滚动、图片懒加载基础重难点事件委托适用场景与限制重绘、回流基础概念storage 存储限制、cookie 特性配套手写练习封装通用事件委托函数简易图片懒加载实现获取页面滚动距离、可视区域大小验收标准不用框架原生 JS 完成简单 Tab 切换、轮播基础逻辑。阶段五原型、面向对象、高级 API进阶23 周核心知识点prototype、__proto__、构造函数、原型链四种继承方式优缺点Object.defineProperty、get/setVue2 响应式原理Proxy ReflectVue3 响应式深浅拷贝原理正则表达式元字符、分组、预查、表单校验防抖、节流原理设计模式发布订阅、单例、工厂模式重难点原型链查找机制循环引用下深拷贝处理Proxy 与 defineProperty 差异配套手写练习手写 instanceof浅拷贝、可处理循环引用的深拷贝防抖、节流函数简易发布订阅事件总线简单 Proxy 数据劫持验收标准能完整画出原型链结构图手写响应式基础代码。阶段六网络、Node、工程化、TypeScript就业必备34 周模块 1浏览器网络AJAX XMLHttpRequest、Fetch API同源策略、跨域CORS、JSONP、代理HTTP 基础、Token、请求拦截封装模块 2Node.js 基础Node 事件循环与浏览器区分核心模块 fs /path/http / EventEmitterCommonJS 模块化、Buffer、Stream 流npm/pnpm、package.json模块 3前端工程化模块化规范CommonJS / ESM / UMDWebpack 基础配置、Loader、PluginVite 基础原理ESLint Prettier 代码规范模块 4TypeScript基础类型、接口、泛型、枚举、类型推断、类型体操入门模块 5性能与安全垃圾回收、栈 / 堆内存、内存泄漏场景XSS、CSRF 防护方案减少重绘回流、虚拟列表思路配套手写练习封装通用 Fetch 请求超时、错误拦截简易静态文件服务器Node httpfs手写简易前端路由验收标准能独立搭建基础 Webpack 项目看懂 TS 基础类型代码。通用高频手写题库面试必刷全部阶段结束后集中练call / apply / bind防抖、节流深浅拷贝循环引用版Promise 全套实现数组 reduce、flatinstanceof事件总线发布订阅简易 AJAX 请求封装简易虚拟 DOM简单路由实现学习节奏规划总周期约 3 个月第 1 个月阶段一 阶段二基础 ES6 函数第 2 个月阶段三 阶段四异步 DOM 浏览器第 3 个月阶段五 阶段六原型高级 Node / 工程化 / TS避坑学习建议不要跳过 Event Loop、原型链这是面试核心难点每学完一块必须手写代码只看不学极易遗忘先原生 JS 吃透再接触 Vue/React 框架底层一通百通异步、原型、this 三块反复复盘是区分初级 / 中级前端分水岭