feat: add TypeScript lessons and learning panel
- Introduced a new script to check TypeScript lesson files for errors. - Created a main TypeScript file to render lessons and their details. - Added lesson definitions with starter and answer codes. - Implemented a user interface for navigating and running lessons. - Styled the application with CSS for a better user experience. - Updated README to reflect the new TypeScript section and usage instructions.
This commit is contained in:
151
05-es6-plus/README.md
Normal file
151
05-es6-plus/README.md
Normal file
@@ -0,0 +1,151 @@
|
||||
# ES6+(现代 JS)
|
||||
|
||||
这部分只解决一个问题:你能不能用现代 JavaScript 的语法和模块能力,把代码写得更清晰、更工程化。
|
||||
|
||||
## 学完后你应该掌握
|
||||
|
||||
- 模板字符串
|
||||
- 对象和数组解构
|
||||
- 展开运算符和剩余参数
|
||||
- 箭头函数的基础写法
|
||||
- 箭头函数和 `this` 的常见差异
|
||||
- `import` / `export` 的基础用法
|
||||
- `fetch()` 和 `res.json()` 的基础用法
|
||||
- Promise 的基础链式写法
|
||||
- `async` / `await` 的基础写法
|
||||
- 如何把这些能力组合成一个现代 JS 小页面
|
||||
|
||||
## 这一章在解决什么
|
||||
|
||||
JavaScript 本体解决的是逻辑表达。
|
||||
|
||||
ES6+ 这一章解决的是:
|
||||
|
||||
- 代码怎么写得更短、更清楚
|
||||
- 多文件之间怎么建立依赖
|
||||
- 异步代码怎么写得更自然
|
||||
|
||||
它回答的是:
|
||||
|
||||
- 对象里的值怎么快速取出来
|
||||
- 数组和对象怎么复制或合并
|
||||
- 回调函数怎么写得更紧凑
|
||||
- 多个 JS 文件怎么互相导入
|
||||
- Promise 和 `async` / `await` 怎么替代层层回调
|
||||
|
||||
## 必须建立的 5 个核心意识
|
||||
|
||||
### 1. ES6+ 不是“炫技语法”,而是为了减少样板代码
|
||||
|
||||
比如:
|
||||
|
||||
- 模板字符串比字符串拼接更直观
|
||||
- 解构让取值更直接
|
||||
- 展开运算符让复制和合并更清楚
|
||||
|
||||
### 2. 语法糖不改变逻辑本质
|
||||
|
||||
例如:
|
||||
|
||||
- 箭头函数还是函数
|
||||
- `async` / `await` 本质上仍然建立在 Promise 上
|
||||
|
||||
### 3. 模块化是现代前端代码的基础
|
||||
|
||||
一个文件只做一件事,然后通过:
|
||||
|
||||
- `export`
|
||||
- `import`
|
||||
|
||||
把能力组合起来。
|
||||
|
||||
### 4. Promise 和 `async` / `await` 是为了解决异步可读性
|
||||
|
||||
不是让异步消失,而是让异步流程更好读、更好维护。
|
||||
|
||||
### 5. 优先理解“什么时候用”,再记语法
|
||||
|
||||
比如:
|
||||
|
||||
- 需要字符串插值时用模板字符串
|
||||
- 需要快速取对象字段时用解构
|
||||
- 需要复制对象和数组时用展开运算符
|
||||
- 需要跨文件协作时用模块
|
||||
|
||||
## 高频语法速记
|
||||
|
||||
### 模板字符串
|
||||
|
||||
- `` `Hello ${name}` ``
|
||||
|
||||
### 解构
|
||||
|
||||
- `const { name } = user`
|
||||
- `const [first, second] = list`
|
||||
|
||||
### 展开和剩余
|
||||
|
||||
- `const newArr = [...arr]`
|
||||
- `const newUser = { ...user, age: 21 }`
|
||||
- `function sum(...numbers) {}`
|
||||
|
||||
### 箭头函数
|
||||
|
||||
- `const add = (a, b) => a + b`
|
||||
|
||||
### 模块
|
||||
|
||||
- `export`
|
||||
- `import`
|
||||
|
||||
### 异步
|
||||
|
||||
- `Promise`
|
||||
- `.then()`
|
||||
- `async`
|
||||
- `await`
|
||||
|
||||
## 学习顺序
|
||||
|
||||
1. 模板字符串和解构
|
||||
2. 展开运算符和剩余参数
|
||||
3. 箭头函数
|
||||
4. 模块基础
|
||||
5. Promise
|
||||
6. `async` / `await`
|
||||
7. 箭头函数里的 `this`
|
||||
8. `fetch` 和 JSON
|
||||
9. 综合练习
|
||||
|
||||
## 练习目录
|
||||
|
||||
- [01-template-and-destructuring/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/01-template-and-destructuring/README.md)
|
||||
- [02-spread-and-rest/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/02-spread-and-rest/README.md)
|
||||
- [03-arrow-functions/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/03-arrow-functions/README.md)
|
||||
- [04-modules-basic/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/04-modules-basic/README.md)
|
||||
- [05-promise-basics/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/05-promise-basics/README.md)
|
||||
- [06-async-await/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/06-async-await/README.md)
|
||||
- [07-arrow-this/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/07-arrow-this/README.md)
|
||||
- [08-fetch-and-json/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/08-fetch-and-json/README.md)
|
||||
- [09-final-modern-js/README.md](/Users/lijiaqing/home/wwwroot/front-end-example/05-es6-plus/09-final-modern-js/README.md)
|
||||
|
||||
## 过关标准
|
||||
|
||||
如果你能独立做到下面这些,就说明这一章已经基本过关:
|
||||
|
||||
- 能用模板字符串代替拼接
|
||||
- 能用解构快速读取对象和数组数据
|
||||
- 能用展开运算符合并对象、复制数组
|
||||
- 能写简单的箭头函数
|
||||
- 能理解箭头函数的 `this` 和普通函数的差异
|
||||
- 能写出基础的 `import` / `export`
|
||||
- 能读懂 `fetch()` 返回值,并通过 `res.json()` 取到数据
|
||||
- 能用 Promise 和 `async` / `await` 写一个简单异步流程
|
||||
- 能把这些语法组合进一个小页面
|
||||
|
||||
## 学习建议
|
||||
|
||||
- 先把语法写顺,再去追求更短
|
||||
- 一次只替换一类旧写法,避免混乱
|
||||
- 学模块时一定要看清“谁导出、谁导入”
|
||||
- 学异步时先看执行顺序,再看语法形式
|
||||
Reference in New Issue
Block a user