前端全栈学习项目

项目结构

frontend-learning/
├── 01-js-basics/              # JS基础概念示例代码
│   ├── 01-closure.js              # 闭包
│   ├── 02-prototype.js            # 原型链
│   ├── 03-event-loop.js           # 事件循环
│   ├── 04-promise.js              # 异步编程
│   ├── 05-this.js                 # this绑定
│   ├── 06-scope.js                # 作用域
│   ├── 07-es6.js                  # ES6+核心特性
│   └── 08-memory.js               # 内存管理与GC
├── 02-typescript/             # TypeScript学习
│   ├── 01-basic-types.ts          # 基础类型
│   ├── 02-generics.ts             # 泛型
│   ├── 03-type-guards.ts          # 类型守卫
│   └── 04-utility-types.ts        # 工具类型
├── 03-exercises/              # 手写练习题（带详细步骤和测试用例）
│   ├── 01-debounce.js             # 防抖函数 ⭐⭐
│   ├── 02-throttle.js             # 节流函数 ⭐⭐
│   ├── 03-promise-all.js          # Promise.all ⭐⭐⭐
│   ├── 04-deep-clone.js           # 深拷贝 ⭐⭐⭐
│   └── 05-promise.js              # 手写Promise ⭐⭐⭐⭐
├── 04-solutions/              # 参考答案
│   ├── 01-debounce.js
│   ├── 02-throttle.js
│   ├── 03-promise-all.js
│   ├── 04-deep-clone.js
│   └── 05-promise.js
└── README.md                  # 本文件

学习方法

三步学习法

1. 看示例：先看 01-js-basics/ 中的示例代码和注释
2. 做练习：在 03-exercises/ 中完成练习题（先自己写，不要看答案）
3. 对答案：完成后对比 04-solutions/ 中的参考答案

手写题练习要点

• 先理解题意和使用场景
• 按照步骤提示逐步实现
• 运行测试用例验证结果
• 尝试优化和扩展

复习安排（遗忘曲线）

复习时间	复习内容	手写练习
第1天	闭包、原型链、事件循环	debounce
第2天	异步编程、this绑定、作用域	throttle
第4天	ES6+、内存管理与GC	Promise.all
第7天	全部JS概念复习	deepClone
第14天	TypeScript复习	综合练习

核心概念速查

闭包

• 捕获引用不是值
• 应用：computed/useCallback缓存、模块封装

原型链

• 逐级查找，找到就停
• 继承 = 原型链的拼接

事件循环

• 同步 → 微任务 → 宏任务
• 每执行完一个宏任务，清空微任务队列

异步编程

• Promise执行顺序
• return Promise.resolve() 多一轮微任务

this绑定

• 默认绑定：window/undefined
• 隐式绑定：obj.greet()
• 显式绑定：call/apply/bind
• 箭头函数：静态绑定，继承外层函数的this

作用域

• var：函数作用域
• let/const：块级作用域

ES6+

• Set：去重
• Map/WeakMap：键值对，WeakMap弱引用
• Proxy：拦截对象操作
• 展开运算符：...arr

内存管理

• 闭包持有引用会导致内存泄漏
• WeakMap不阻止垃圾回收
• 及时清理事件监听器、定时器

手写题清单

题目	文件	难度	面试频率
debounce 防抖	03-exercises/01-debounce.js	⭐⭐	🔥🔥🔥
throttle 节流	03-exercises/02-throttle.js	⭐⭐	🔥🔥🔥
Promise.all	03-exercises/03-promise-all.js	⭐⭐⭐	🔥🔥🔥
deepClone 深拷贝	03-exercises/04-deep-clone.js	⭐⭐⭐	🔥🔥🔥
Promise	03-exercises/05-promise.js	⭐⭐⭐⭐	🔥🔥