前言HTML 是网页骨架CSS 是页面美化JavaScript 是网页交互的灵魂。本文基于完整 JS 学习手册整理覆盖基础语法、数组、定时器、DOM/BOM、面向对象、原型链、ES6、正则、运动动画全体系知识点配套可运行代码、底层内存图解、面试核心考点适合前端入门自学、期末复习、面试复盘。本文知识框架JS 基础语法 → 循环 / 定时器 → 数组 / Date/Math → DOM 页面操作 → 事件系统 → BOM 浏览器操作 → 面向对象 原型链重点→ ES6 箭头函数 /class 继承 → 运动动画封装 → 正则表达式实战 → JSON 数据转换十、正则表达式表单验证实战1. 基础元字符符号作用.匹配任意非换行字符\d数字 0-9\D非数字\s空白空格 / 制表符\S非空白\w数字字母下划线\W非数字字母下划线\转义符取消符号特殊功能2. 限定符匹配次数*0~ 多次1~ 多次?0 或 1 次{n}固定 n 次{n,m}n~m 次{n,}最少 n 次3. 边界符^开头、$结尾完整匹配必填手机号、身份证必须加4. 正则常用方法let reg /\d/g; let str abc123def456; reg.test(str); // 检测是否匹配返回布尔 str.match(reg); // 全局捕获所有匹配内容返回数组 str.search(reg); // 返回匹配索引无匹配-1 str.replace(reg,666); // 替换匹配内容5. 实战正则项目直接复制// 1. 手机号 1开头第二位3-9后9位数字 let phoneReg /^1[3-9]\d{9}$/; phoneReg.test(15653761121); // 2. 18位身份证 let idReg /^[1-9]\d{5}(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dX]$/; // 3. 邮箱qq/163/126 let emailReg /^[^_$].{5,}(163|126|qq)\.(com|cn|net)$/;十一、JSON 数据转换前后端交互必备JSON 本质是字符串只能存对象 / 数组、数字、字符串、布尔、null函数无法存储let user { name: 张三, age: 18 }; // 对象 → JSON字符串传给后端 let jsonStr JSON.stringify(user); // JSON字符串 → JS对象后端返回数据解析 let jsObj JSON.parse(jsonStr);十二、JS 底层内存图解函数执行原理堆内存存放函数、对象、数组等引用类型数据分配唯一内存地址栈内存存放基础变量、函数引用地址、函数执行栈函数执行流程函数创建阶段堆存代码栈存函数地址调用阶段栈开辟独立执行空间形参赋值、预解析变量逐行执行代码执行完毕销毁当前栈执行空间释放内存结尾总结本文覆盖前端 JS 入门到进阶全部核心知识点学习路线建议先吃透基础语法、数组、循环、定时器基础交互重点练习DOM 事件页面交互核心项目高频攻克原型链、this 指向、class 继承面试必考难点掌握正则、运动动画、JSON 处理表单、轮播、数据请求