第 35 节 · ES6+ 全特性速查

📌 版本信息：覆盖 ES2015ES2024 常用特性（基于 ECMAScript 2025 语言标准核对；2026-08-29） 📚 来源：现代 JS 教程 全书 ｜ 阮一峰 ES6 入门 ｜ MDN JavaScript 参考 📖 定位：手册型文档——把散落在第 0918 节的现代语法一次性盘成速查表，读 AI 生成代码时随手翻。

一、本节的目标

1. 把 ES6+ 高频特性按"读代码频率"分级盘存
2. 每条：一行定义 + 一个最短例子 + 何时用
3. 补齐前 18 节没细讲的边角（Symbol、Proxy、迭代器等"认脸级"特性）

---

二、第一梯队：天天见（必须形成肌肉记忆）

特性	最短例子	要点
let/const	const lat = 30.59	块作用域；默认 const（第 09 节）
模板字符串	`${name}（${mag}级）`	支持换行与内嵌表达式
解构（对象）	const { name, lat } = city	重命名 : 新名、默认值、嵌套解构
解构（数组）	const [lng, lat] = coord	按位置；[a, ...rest]
展开运算符	{ ...base, mag: 6 } / [...arr, x]	浅拷贝/合并/可变参数
默认参数	function f(zoom = 10)	第 11 节
箭头函数	xs.map((x) => x.id)	词法 this（第 32 节）
简写属性	{ name, lat } ≙ { name: name, lat: lat }	对象字面量
计算属性名	{ [key + 'X']: 1 }	方括号里是表达式
可选链	data.properties?.mag	深层安全读
空值合并	zoom ?? 10	只认 null/undefined（第 10 节）
模块	import/export	第 18 节

---

三、第二梯队：每周见（读懂为主）

特性	例子	说明
for...of	for (const q of quakes)	可迭代对象的统一遍历
Object 方法	Object.keys/entries/fromEntries	对象⇄数组互转：Object.fromEntries(Object.entries(o).map(...))
Array 增强	find/at/flat/includes	at(-1) 尾元素（第 13 节）
数组去重	[...new Set(arr)]	Set 是值唯一的集合
Map/Set	new Map([['a',1]])	Map 任意键类型；Set 去重/存在判断
class	class Layer { constructor(){} show(){} }	原型的语法糖；static、#private 私有字段
extends/super	class TileLayer extends Layer	继承；构造器里 super() 必须先调
Promise	第 16 节全套	all/allSettled/race
async/await	第 17 节全套	异步同步写法
模板标签	tag\lat=${lat}``	模板字符串当函数用（styled-components 的原理），认脸
生成器	function* gen(){ yield 1 }	惰性序列；for...of 可消费；认脸级
Proxy	new Proxy(obj, { get(){…} })	拦截操作——Vue3 响应式的底层，读源码前认脸
Reflect	Reflect.get(obj, 'x')	与 Proxy 配套的规范操作 API，认脸

---

四、第三梯队：里程碑与冷门（知道存在）

特性	一句话	GIS 场景？
Symbol	唯一标识符键，obj[Symbol('id')]	防键名冲突，少见
迭代协议	对象实现 [Symbol.iterator] 即可被 for...of	自定义数据结构遍历
WeakMap/WeakSet	弱引用键（不阻止 GC）	框架内部缓存，认脸
BigInt	123n 超大整数	度×10⁷ 整数存储（第 09 节）
可选 catch 绑定	try {...} catch {}	不需要 err 时
逻辑赋值	a ??= 10 / a &&= b / ||=	短路赋值简写
数值分隔符	1_000_000	可读性
String 增强	'x'.repeat(3)、padStart(2,'0')	时间格式化 String(m).padStart(2,'0')
globalThis	跨环境的"全局对象"	库代码用
structuredClone	深拷贝（第 12 节）	已讲

---

五、高频组合拳（GIS 代码模式）

// ① 条件加入对象（undefined 字段自动剔除）
const query = {
  mag_min: mag ?? undefined,
  ...(bounds ? { bbox: bounds.join(',') } : {}),
};

// ② 数组分组（第 22 节 groupBy 的现代替代：ES2024 Object.groupBy）
Object.groupBy(quakes, (q) => (q.mag >= 5 ? 'strong' : 'weak'));

// ③ 去重按 id
const unique = [...new Map(features.map((f) => [f.id, f])).values()];

// ④ 安全求平均
const avg = xs.length ? xs.reduce((s, x) => s + x, 0) / xs.length : 0;

// ⑤ 排序副本（不动原数组）
const sorted = [...features].sort((a, b) => b.mag - a.mag);

✍️ 用法：把本文档当字典——写代码/读 AI 代码时遇到"眼熟但叫不准"的语法，回来查一行。阶段二剩余两节（错误处理、类型系统）完成后做 C-02b 综合项目。

---

六、自测题

1. { ...a, ...b } 若 b 与 a 有同名字段，结果？顺序敏感吗？
2. [...new Set(arr)] 的时间复杂度量级？比 filter+indexOf 好在哪？
3. Object.groupBy 返回的东西能直接 .map 吗？怎么转数组？
4. a ??= b 等价于哪条语句？
5. Vue3 响应式依赖 ES6 的哪个特性？

参考答案

1. 同名字段 b 覆盖 a；顺序敏感（后面的覆盖前面）。
2. O(n)；Set 哈希查找 O(1)，filter+indexOf 是 O(n²)。
3. 不能直接 map（返回普通对象）；Object.entries(g).map(...) 或 Object.values(g) 转数组。
4. if (a === null || a === undefined) a = b;
5. Proxy（拦截 get/set 实现依赖收集与更新触发）。

---

七、下一步

语法盘存完毕 → 第 36 节：错误处理与调试，把"读报错"升级成体系。