ES6 语法速查表 - ES6+ 常用语法与 JavaScript 新特性大全
这套速查给想摆脱 var 与回调地狱、改用现代写法的 JavaScript 开发者，覆盖 ES2015+ 里重塑日常编码的那批特性：let/const 块级作用域、箭头函数、解构、模板字符串、Promise/async 流程、import/export 模块、类、Map/Set 和迭代器。与干巴巴的规范条目不同，这里按"这个特性解决什么场景的问题"来分——作用域混乱、回调嵌套、对象取值啰嗦都有对应。读完应能把 var 换成块级绑定、用 async/await 捋平嵌套回调，并用 import/export 拆出多文件项目。
变量与函数 9
let x = 1声明块级作用域变量，可在最近的大括号块内重新赋值，不再有 var 的提升问题
const PI = 3.14声明块级作用域常量，赋值后不能重新绑定，缺省首选用 const
const fn = (x) => x * 2箭头函数，单行表达式体隐式 return，且不绑定自己的 this
const fn = (x, y = 1) => x + y默认参数：未传或传 undefined 时才用 y = 1，不必再在函数体里判空
const fn = (...args) => args剩余参数：把调用时多出的实参收进真数组 args
fn(...[1, 2, 3])展开运算符：把一个可迭代对象原地摊开作为实参，也用于数组/对象浅拷贝
user?.name可选链：路径上任一节点为 null/undefined 就整体短路返回 undefined，取代冗长的 && 判断
value ?? "default"空值合并：仅当 value 为 null/undefined 时取默认值，不会把 0 或空串也替换掉
`Hello ${name}`模板字符串：用 ${} 插值，支持多行，替代 + 拼串
解构赋值 5
const [a, b] = [1, 2]数组解构：按位置把元素解包给变量
const { name, age } = user对象解构：按属性名抽字段，避免反复 user.name 取值
const { name: userName } = user解构重命名：把 user.name 的值绑到新变量 userName
const [a, ...rest] = [1, 2, 3]解构 + 剩余：a 取首项，rest 收其余为数组
function fn({ name, age = 18 }) {}函数参数解构：形参直接解构对象，age 缺省为 18
异步编程 8
new Promise((resolve, reject) => {})创建 Promise：执行完成调 resolve，出错调 reject
promise.then().catch().finally()链式调用：then 取成功值、catch 拦异常、finally 无论结果都会执行
Promise.all([p1, p2])并行执行全部，任一 reject 则整体 reject，结果按传入顺序聚合
Promise.race([p1, p2])取最先落定（成功或失败）的那个，做超时兜底常用
async function fn() { await promise }async/await：让异步代码看起来像同步，await 暂停直到 promise 落定
try { await fn() } catch (e) {}错误处理：用 try/catch 拦下 await 抛出的 reject 错误
Promise.allSettled([p1, p2])等待全部落定并逐个返回成功/失败结果，一个失败不影响其它
Promise.any([p1, p2])取第一个成功的，全部失败才 reject（ES2021）
模块化 6
export const fn = () => {}命名导出：import 时按同名变量引入
export default fn默认导出：每个模块至多一个，import 时可自定义名字
import { fn } from "./module"命名导入：按导出的名字 {} 引入
import fn from "./module"默认导入：引入默认导出并起本地名
import * as mod from "./module"导入整个模块为一个命名空间对象 mod
import("./module").then(mod => {})动态导入：运行时按需加载并在 Promise 落定后使用，利于代码分割
类与数据结构 8
class User { constructor() {} }类定义
class Admin extends User {}继承
const map = new Map()Map（键可以是对象）
const set = new Set([1, 2, 3])Set（去重）
for (const [k, v] of map) {}遍历 Map
Array.from(set)Set 转数组
Symbol("id")唯一标识符
for (const item of iterable) {}迭代器协议
Proxy/Reflect 与 Generator 8
new Proxy(target, handler)创建代理对象拦截操作
handler.get(target, key, receiver)拦截属性读取
handler.set(target, key, value)拦截属性设置
Reflect.get(obj, key)反射 API（转发默认行为）
function* gen() { yield 1; yield 2; }生成器函数
const it = gen(); it.next(); it.next()手动迭代生成器
for (const v of gen()) {}用 for...of 消费生成器
const wm = new WeakMap()WeakMap（键必须为对象，弱引用）
提示
- const 声明的对象/数组内容仍可修改，只是引用不可变。
- 箭头函数没有自己的 this，继承外层作用域。
- async/await 是 Promise 的语法糖，错误用 try/catch 捕获。
- ?. 和 ?? 是 ES2020 特性，?. 短路返回 undefined，?? 仅在 null/undefined 时触发。
- Proxy 常用于响应式系统（如 Vue 3 reactive），Reflect 提供对应的默认行为转发。
- Generator 函数执行到 yield 暂停并返回值，调用 next() 恢复执行。
- WeakMap/WeakSet 的键是弱引用，不影响垃圾回收，适合缓存场景。
由 巧匠 维护
公开更新于 2026年7月21日，内容持续校对官方文档。