JavaScript 学习路线及教程（由浅入深、关联递进、ES6 + 特性后缀标注）-171主机测评

JavaScript 学习路线及教程（由浅入深、关联递进、ES6 + 特性后缀标注）

前言：本教程共分为 14 阶段，重难点阶段配备了真实项目，拒绝纯理论，所有知识点全部落地编码。

整体学习路线：前置基础 → 语法核心 → 变量与数据类型 → 运算符 → 流程控制 → 函数（基础→高级 ES6+）→ 对象 / 数组 / 字符串 / 内置容器API → 原型与面向对象 → 异步编程 → DOM/BOM 浏览器 API → 网络请求 → 高级语法与元编程 ES6+ → 性能、工程化、设计模式、安全、底层原理

所有 ES6 及之后新增语法、API 统一标注「ES6+」。

教程围绕 “是什么 → 为什么 → 怎么用” 结构编写，部分会附带实战练习和思考题

建议代码部分全部手写不要复制，加深印象，避免眼会手不会

前置准备：

工具：VS Code + Live Server 插件（能够实时显示代码效果） + 浏览器开发者工具（F12键打开）在这里插入图片描述

基础储备：HTML/CSS 基础（会写 div、表单、选择器即可，不用精通）

编码习惯：全程手写代码，不复制粘贴，每学知识点立刻写小 demo

第一阶段：前置预备知识

JavaScript 是什么：解释型、弱类型、动态、基于原型的脚本语言

JS 历史与发展

JS 三大组成：ECMAScript、DOM、BOM

ECMAScript 版本：ES5、ES6 (2015)~ES2026 核心特性迭代

JS 运行环境：浏览器端、Node.js 服务端

JS 代码引入方式：行内事件、内部 script、外部 JS

script 标签属性：defer、async「ES6+」、type=“module”「ES6+」

严格模式 use strict

开启方式：全局、函数内、ES Module 自动开启
严格模式限制：禁止未声明变量、禁止 delete 变量、禁止重复参数、this 不指向 window 等

注释语法：单行注释 //、多行注释 /* */

代码规范基础：分号、缩进、标识符、关键字/保留字、命名规范

第二阶段：变量与数据类型

2.1 变量

var 声明变量（函数作用域、变量提升、可重复声明）

let 声明变量「ES6+」（块级作用域、暂时性死区、不可重复声明）

const 声明常量「ES6+」（块级作用域、不可重赋值、引用类型可修改内部属性）

变量提升机制（var/let/const 提升差异）

暂时性死区 TDZ「ES6+」

全局变量、局部变量、块级变量

全局污染

2.2 原始数据类型（基本类型）

Number 数字类型

整数、浮点数、科学计数法
NaN、Infinity、-Infinity
数值精度丢失问题（0.1+0.2）
Number ()、parseInt ()、parseFloat () 类型转换

String 字符串

单引号、双引号、模板字符串「ES6+」
字符串索引读取、length 长度、转义字符

Boolean 布尔值：true /false

Undefined：未定义，变量声明未赋值

Null：空对象指针，手动置空

Symbol「ES6+」：唯一不可变标识，Symbol ()、Symbol.for ()、Symbol.keyFor ()

BigInt「ES6+」：超大整数，后缀 n，BigInt () 构造函数

2.3 引用数据类型（复杂类型）

Object 对象

Array 数组

Function 函数

解构赋值「ES6+」

对象解构、数组解构、函数参数解构
解构默认值、剩余解构…rest

RegExp 正则对象

Date 日期对象

Map「ES6+」、WeakMap「ES6+」

Set「ES6+」、WeakSet「ES6+」

包装类：String/Number/Boolean，原始值与包装对象自动转换机制（装箱、拆箱）

2.4 类型检测与类型转换

typeof 运算符（各类型返回值、typeof null bug）

Object.prototype.toString.call () 精准类型判断

instanceof 判断引用类型原型关系

constructor 判断类型

隐式类型转换（自动转换）

加法拼接、减法乘除转数字
真值 / 假值判断

显式强制类型转换

String()、Number()、Boolean()、parseInt()、parseFloat ()
一元 +、!!、toString ()

真值集合、假值集合（0、‘’、null、undefined、NaN、false）

第三阶段：运算符

赋值运算符：=、+=、-=、*=、/=、%=、**=「ES6+」、&&=「ES6+」、||=「ES6+」、??=「ES6+」

算术运算符：+ – * / %、++ 自增、– 自减、** 幂运算「ES6+」

比较运算符：> < >= <=、== 宽松相等、=== 严格相等、!=、!==

逻辑运算符：&& 与、|| 或、! 非

空值合并运算符？？「ES6+」

可选链操作符？.「ES6+」：对象？. 属性、数组？.[]、函数？.()

三元条件运算符条件？a : b

位运算符：& | ^ ~ <<>> >>>

逗号运算符，

in 运算符：检测属性是否存在对象

delete 运算符：删除对象属性

new 运算符：实例化构造函数

展开运算符 …「ES6+」：数组展开、对象展开、函数传参展开

运算优先级、括号改变优先级规则

第四阶段：流程控制语句

4.1 分支判断

if /else if /else 条件判断

switch 分支语句

break 穿透、default 默认分支
switch 严格匹配 === 特性

短路逻辑 && || 替代简单 if 判断

4.2 循环语句

for 基础循环（初始化；条件；自增）

while 先判断后执行循环

do while 先执行后判断循环

for…in 遍历对象可枚举属性

for…of「ES6+」遍历可迭代对象：数组、Set、Map、字符串、生成器

循环控制关键字

break：终止整个循环
continue：跳过本次循环进入下一次

标签循环 label + break/continue

4.3 异常捕获

try /catch/finally 错误捕获

throw 手动抛出错误

Error 内置错误对象、自定义错误类

第五阶段：函数体系

5.1 函数基础

函数声明 function fn (){}（函数提升）

函数表达式 const fn = function (){}（无提升）

匿名函数、自执行函数 IIFE

函数调用、参数、返回值 return

形参、实参、arguments 类数组

函数返回值规则（无 return 默认返回 undefined）

函数作为参数（回调函数）、函数作为返回值

5.2 ES6 + 函数新特性

箭头函数 ()=>{}「ES6+」

简写规则（单参数省略括号、单行省略 return 大括号）
无 this、无 arguments、不可 new、无原型、不能做生成器

函数参数默认值「ES6+」

剩余参数 …rest「ES6+」（替代 arguments）

函数参数解构「ES6+」

函数参数尾逗号「ES6+」

5.3 函数上下文 this（重中之重）

this 五种绑定规则（优先级从低到高）

默认绑定：普通独立函数调用 this，全局 this（window/globalThis）
隐式绑定：对象方法 this 指向对象
显式绑定：call /apply/bind
new 绑定：new 构造函数 this 指向新实例
箭头函数 this：继承外层作用域 this，无法修改

全局 this：window、globalThis「ES6+」

严格模式下 this 为 undefined

this 面试经典场景：定时器、事件、对象方法、嵌套函数

5.4 作用域与闭包

全局作用域、函数作用域、块级作用域（let/const）「ES6+」

作用域链（变量查找规则）

闭包定义：函数嵌套、内部函数引用外部变量、外部执行后变量不销毁

闭包用途：私有变量、防抖节流、缓存、柯里化

闭包内存泄漏问题

5.5 高阶函数

高阶函数定义：参数 / 返回值为函数

函数柯里化、反柯里化

偏函数

防抖 debounce、节流 throttle

组合函数 compose、管道函数 pipe

5.6 迭代器与生成器「ES6+」

迭代器接口 Iterator：next ()、done、value

可迭代对象 Symbol.iterator「ES6+」

生成器函数 function* fn ()「ES6+」

yield 暂停、yield* 委托生成器

生成器异步方案（替代回调）

5.7 其他函数相关

构造函数、工厂函数

纯函数、副作用概念

递归函数、递归终止条件、尾递归「ES6+」

函数 length 属性、name 属性

第六阶段：对象、数组、字符串、内置容器 API

6.1 Object 对象

对象字面量创建、构造函数 new Object

对象属性读写：点语法、方括号语法

属性增删改查、delete 删除属性

对象属性分类：数据属性、访问器属性 get/set

属性描述符 Object.defineProperty、Object.defineProperties

对象遍历：for in、Object.keys、Object.values、Object.entries「ES6+」

对象方法（对象函数）

对象静态方法

Object.assign「ES6+」浅拷贝
Object.is「ES6+」精准相等判断
Object.freeze 冻结、Object.seal 密封、Object.preventExtensions
Object.getPrototypeOf / setPrototypeOf

对象简写、方法简写、计算属性名「ES6+」

浅拷贝、深拷贝实现

6.2 Array 数组

数组创建、索引、length、类数组转数组

数组常用 API

增：push()、unshift()
删：pop()、shift()
改：splice()
查：indexOf()、lastIndexOf()
排序：sort()、reverse()
拼接：concat()、join()
截取：slice()
迭代：forEach()、map()、filter()、every()、some()、reduce()、reduceRight()
查找：find()「ES6+」、findIndex()「ES6+」、at()「ES6+」
包含：includes()「ES6+」
填充：fill()「ES6+」
复制：copyWithin()「ES6+」
扁平化：flat()「ES6+」、flatMap()「ES6+」

数组去重、排序、扁平化、分割拼接实战

稀疏数组、空位处理

6.3 String 字符串

字符串常用 API：

查找：charAt()、charCodeAt()、indexOf()、lastIndexOf()、at()「ES6+」
截取：substr()、substring()、slice()
拼接：concat()
大小写：toUpperCase()、toLowerCase()
替换：replace()
分割：split()
去除空白：trim()
重复：repeat()「ES6+」
补全：padStart()「ES6+」、padEnd()「ES6+」
包含：includes()「ES6+」、startsWith()「ES6+」、endsWith()「ES6+」

字符串编码：UTF-16、码点 codePointAt「ES6+」

6.4 新型集合容器 ES6+

Set「ES6+」

去重、add/delete/has/clear、size
遍历、数组转 Set、Set 转数组

WeakSet「ES6+」：仅存引用类型、弱引用、无遍历、GC 自动回收

Map「ES6+」

键可为任意类型、set/get/delete/has/clear、size
keys/values/entries 遍历

WeakMap「ES6+」：键只能对象、弱引用、垃圾回收自动释放

6.5 Math 数学工具对象

常用属性和方法：PI、abs、floor、ceil、round、random、max/min、pow、sqrt、三角函数

ES6 + 新增方法：hypot、trunc、sign、cbrt

6.6 Date 日期对象

创建日期、时间戳、get/set 年月日时分秒毫秒

时间戳转换、日期格式化、时差计算

6.7 RegExp 正则表达式

字面量 / 构造函数创建正则

修饰符：g、i、m、s「ES6+」、y「ES6+」

元字符、量词、分组、捕获、反向引用

前瞻断言、后顾断言「ES6+」

API：test、exec、字符串 match/replace/search/split

捕获组、命名捕获组「ES6+」

6.8 JSON基础

第七阶段：原型、原型链、面向对象

构造函数、实例、原型对象三者关系

构造函数创建实例、new 关键字执行四步

prototype 显式原型（构造函数原型）

proto 隐式原型（实例指向原型）

原型链查找机制：属性 / 方法向上递归查找

constructor 属性指向构造函数

原型修改、原型污染问题

继承实现方案

原型链继承
借用构造函数继承
组合继承（最常用基础继承）
寄生组合继承（最优原生继承）

Object.create () 创建指定原型对象

class 类语法「ES6+」

class 构造器 constructor
extends 类继承「ES6+」
super 父类构造器 / 父类方法「ES6+」
实例方法、静态方法 static「ES6+」
私有属性 #xxx「ES6+」、私有静态属性
getter /setter 访问器

静态原型、实例原型区分

多继承、混入 mixin 实现

原型链顶层 Object.prototype、null 终止原型链

第八阶段：异步编程

8.1 基础异步模型

同步、异步概念

异步演进路线：回调 → Promise → Generator → async/await

回调函数、回调地狱问题

浏览器事件循环 Event Loop

宏任务：setTimeout、setInterval、DOM 事件、ajax
微任务：Promise.then/catch/finally、queueMicrotask「ES6+」、async await
执行顺序：同步代码→微任务→单次宏任务

Node.js 事件循环（阶段划分，拓展）

定时器 setTimeout /setInterval、clearTimeout、clearInterval

延迟 0 执行原理

8.2 Promise「ES6+」

Promise 三种状态：pending/fulfilled/rejected，状态不可逆

Promise 构造函数、resolve、reject

实例方法 .then/.catch/.finally「ES6+」

静态方法

Promise.all「ES6+」全部成功才返回
Promise.race「ES6+」最快完成返回
Promise.allSettled「ES6+」全部完成无论成败
Promise.any「ES6+」第一个成功返回
Promise.resolve / Promise.reject

Promise 链式调用、错误穿透

手写简易 Promise 原理

8.3 async / await「ES6+」

async 函数自动包装返回 Promise

await 等待 Promise 解析，只能在 async 内部使用

await 错误捕获 try/catch

异步并行、串行、竞速写法

顶层 await

async 与生成器对比

8.4 其他异步方案

生成器 + co 库异步方案

事件发布订阅模式（异步解耦）

Web Worker「ES6+」多线程异步（主线程分离计算）

第九阶段：浏览器宿主 API（BOM + DOM，前端 JS 专属）

9.1 BOM 浏览器对象模型

window 全局顶层对象

窗口控制：open、close、resizeTo

定时器：setTimeout、setInterval

导航对象 location

href、host、hostname、pathname、search、hash
assign、replace、reload 页面跳转刷新

浏览器信息 navigator

userAgent、platform、language、cookieEnabled

屏幕信息 screen

历史记录 history

back()、forward()、go()
pushState、replaceState「ES6+」（前端路由核心）

弹窗：alert、confirm、prompt

存储 API

localStorage 永久本地存储
sessionStorage 会话存储
Cookie 基础读写
IndexedDB 大容量异步存储

剪贴板 API Clipboard「ES6+」

页面可见性 Page Visibility API

9.2 DOM 文档对象模型

DOM 树结构：文档、元素、文本、注释节点

获取 DOM 节点

getElementById、getElementsByTagName、getElementsByClassName
querySelector、querySelectorAll「ES6+」

节点操作

创建：createElement、createTextNode
追加：appendChild、prepend、append「ES6+」
移除：removeChild、node.remove ()「ES6+」
替换：replaceChild、replaceWith「ES6+」
克隆：cloneNode

节点内容操作：innerText、innerHTML、value（表单专用）

节点属性操作

标准属性：element.xxx
自定义属性：getAttribute /setAttribute/removeAttribute
dataset 自定义数据属性 data-xxx「ES6+」

节点样式操作

行内样式 element.style
类名 classList「ES6+」add/remove/toggle/contains
getComputedStyle 获取计算后样式

事件系统

事件绑定：onxxx、addEventListener、removeEventListener
事件流：捕获阶段、目标阶段、冒泡阶段
事件对象 event：target、currentTarget、preventDefault ()、stopPropagation ()
事件委托（事件代理）原理与实战
常见事件：鼠标、键盘、表单、滚动、resize、load、DOMContentLoaded
自定义事件 CustomEvent「ES6+」

表单操作：input 取值、表单提交、表单校验

元素尺寸与位置

offsetWidth/offsetHeight、clientWidth/clientHeight、scroll 系列、getBoundingClientRect ()

虚拟 DOM 基础概念（拓展）

实战 1：TodoList 待办清单（原生 JS 无框架）

功能：新增任务、删除、标记完成、清空已完成、本地存储刷新不丢失、筛选全部 / 已完成 / 未完成

实战 2：轮播图组件（手写，不套插件）

自动轮播、左右切换按钮、小圆点指示器、鼠标移入暂停、无缝滚动逻辑

第十阶段：网络请求与前端通信

XMLHttpRequest 原生 AJAX

同步 / 异步请求、请求状态码 status、readyState
GET/POST 请求、请求头、请求参数、上传文件

Fetch API「ES6+」

fetch 基础语法、Request/Response 对象
Headers、GET/POST 传参、FormData
fetch 坑：4xx/5xx 不会触发 reject、跨域处理

跨域问题详解

同源策略定义
CORS 跨域资源共享（服务端配置）
JSONP 跨域原理
代理服务器、iframe 跨域、postMessage「ES6+」

WebSocket「ES6+」长连接实时通信

简单文件上传、下载前端实现

实战：天气预报简易项目（原生 JS + 公开天气接口）

功能：

async/await 发送网络请求 fetch

解构解析后端返回 JSON 数据

localStorage 缓存今日天气，减少重复请求

异常捕获：网络失败、接口报错友好提示

第十一阶段：ES6 + 高级语法、元编程、模块化

11.1 模块化系统「ES6+」

ES Module 模块标准 import /export

默认导出 export default、具名导出 export
导入语法：import、import * as、import 解构导入
动态导入 import ()「ES6+」返回 Promise

模块作用域、严格模式自动开启

ES Module 与 CommonJS（Node）区别对比

11.2 元编程（拦截、代理对象）「ES6+」

Proxy 代理对象：拦截对象读写、删除、函数调用等 13 种捕获器

Reflect 反射 API：配合 Proxy 操作对象底层行为

内置 Symbol 元符号：Symbol.hasInstance、Symbol.toStringTag、Symbol.toPrimitive 等

11.3 其他高级 ES6 + 语法

块级作用域、顶层 await「ES6+」模块顶层异步

数字分隔符 1_000_000「ES6+」

对象私有字段 #prop「ES6+」

空对象字面量优化、可选链、空值合并（前文运算符已覆盖）

导入断言 import assertions「ES6+」

第十二阶段：内存、垃圾回收、性能优化

JS 内存划分：栈内存（基本类型）、堆内存（引用类型）

垃圾回收机制 GC：引用计数、标记清除算法

内存泄漏场景：全局变量、闭包、定时器未清除、DOM 引用、事件未解绑

性能优化方向

循环优化、减少 DOM 操作（文档碎片 DocumentFragment）
防抖节流、虚拟列表、请求缓存
避免深拷贝、合理使用 WeakMap/WeakSet 弱引用
懒加载、分块加载、requestAnimationFrame 动画优化

第十三阶段：工程化、拓展、设计模式、安全

13.1 JS 工程化相关

CommonJS（Node 模块化）require /module.exports

打包工具基础概念：Webpack/Vite、转译 Babel「ES6 + 降级」

TypeScript 基础概念（JS 超集，拓展）

代码规范 ESLint、Prettier

13.2 前端安全

XSS 跨站脚本攻击：存储型、反射型、DOM 型，防御方案

CSRF 跨站请求伪造、防御手段

CSP 内容安全策略

Cookie 安全：HttpOnly、SameSite

13.3 常用设计模式（JS 专属）

单例模式、工厂模式、构造器模式

原型模式、观察者模式（发布订阅）

装饰器模式「ES6 + 装饰器提案」

适配器模式、代理模式、节流防抖（行为模式）

13.4 其他拓展知识点

递归、分治算法简单 JS 实现

深浅拷贝完整手写实现

手写核心 API：call/apply/bind、new、Promise、防抖节流、深拷贝

正则实战：表单校验、模板渲染、字符串处理

函数式编程基础：纯函数、不可变数据、Ramda/Lodash 思想

第十四阶段：底层原理与面试深度知识点

JS 执行上下文、执行栈、变量对象 VO、活动对象 AO

作用域链创建过程

原型链完整查找流程

Event Loop 完整执行流程（浏览器 + Node 对比）

宏任务微任务优先级细节

函数提升、变量提升底层原理

Promise 微任务调度机制

类与原型底层等价转换（class 本质是语法糖）

可迭代协议、迭代器协议底层规范

模块化加载机制（ES Module 与 CommonJS 差异）