front-end-example/05-es6-plus

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
• 02-spread-and-rest/README.md
• 03-arrow-functions/README.md
• 04-modules-basic/README.md
• 05-promise-basics/README.md
• 06-async-await/README.md
• 07-arrow-this/README.md
• 08-fetch-and-json/README.md
• 09-final-modern-js/README.md

过关标准

如果你能独立做到下面这些，就说明这一章已经基本过关：

• 能用模板字符串代替拼接
• 能用解构快速读取对象和数组数据
• 能用展开运算符合并对象、复制数组
• 能写简单的箭头函数
• 能理解箭头函数的 this 和普通函数的差异
• 能写出基础的 import / export
• 能读懂 fetch() 返回值，并通过 res.json() 取到数据
• 能用 Promise 和 async / await 写一个简单异步流程
• 能把这些语法组合进一个小页面

学习建议

• 先把语法写顺，再去追求更短
• 一次只替换一类旧写法，避免混乱
• 学模块时一定要看清“谁导出、谁导入”
• 学异步时先看执行顺序，再看语法形式