ES6+核心特性一文吃透

可视化演示

展示ES6+核心语法特性：解构赋值（数组/对象提取）、ES Module模块化(export/import/Tree Shaking)、以及Class类语法（构造函数/方法/继承）。

ES6时代背景

收纳师第一天进门，没有急着拆箱，而是先掏出一张户型图，带小李把新旧两套房做了整体对比：老房（ES5 时代的 JavaScript）东西都能用，但格局封闭、收纳混乱；新房（ES6）自带一整套更聪明的储物设计。ES6 是 ECMAScript 2015 的俗称，是 JavaScript 史上最大的一次版本跃迁，相当于把年久失修的老楼整体精装改造了一遍。

既然是换代，就绕不开“兼容”问题。一些老浏览器只认识旧房的老开关（ES5 语法），碰到新房的智能面板（ES6 语法）会直接罢工。于是 Babel 诞生了——它像一个万能转接器，把 ES6 新语法实时“翻译”成老浏览器能听懂的 ES5 语法。工程师写完新代码，交给 Babel 转译一遍，新旧设备都能流畅运行。

如今现代浏览器和 Node.js 已原生支持绝大部分 ES6+ 特性，转译不再是日常必需，但理解版本演进的逻辑仍然重要。ES6 带来的核心变化包括：let/const 块级作用域、解构赋值、展开运算符、模板字符串、箭头函数、模块化、Class……它们共同把 JavaScript 从“网页小脚本”升级成可以支撑大型工程的现代语言。

$$\displaystyle \text{ES6} \equiv \text{ECMAScript 2015} \Rightarrow \text{Modern JavaScript}$$

1. ES6 名称解析：ES6 是 ECMAScript 6 的缩写，代表第六版语言标准。

$$\displaystyle \text{ES6} = \text{ECMAScript 6}$$

2. 版本年份映射：官方按年份命名为 ECMAScript 2015，两者指向同一版本。

$$\displaystyle \text{ES6} = \text{ECMAScript 2015}$$

3. 现代基座定位：从这一版起语言每年迭代，现代框架与工具全部以此为地基。

$$\displaystyle \text{ES6} \Rightarrow \text{Modern JS Foundation}$$

户型图看完，小李心里有了底。接下来的每一件收纳工作，都在这张“新版户型图”的框架下展开——先认识新房的隔断和门锁，再谈怎么把旧家具一件件安置妥当。

let与const声明

收纳师带小李参观的第一个设计，是每个房间都装了独立的门和锁。ES5 时代的 var 就像没有隔断的大通铺，变量在函数里到处乱窜，一不小心就互相覆盖；ES6 的 let 和 const 则给变量划定了严格的活动范围——最近的这对花括号 {}，就是它的房间，关上门谁也别想乱跑。

let 和 const 的区别，好比“可以随意换家具的房间”和“不能动结构的承重墙”。let 声明的变量可以重新赋值，适合计数、开关等会变化的量；const 声明的常量绑定后不能再改变，适合配置项、固定引用，写错了会立刻抛错。此外还有“暂时性死区”（TDZ）：变量在声明语句之前被访问会直接报错，不再像 var 那样提着灯笼提前飘上去、给你一个 undefined。

实际开发有一条默认纪律：优先 const，只有确定需要重新赋值时才改用 let。这样读代码的人一眼就能区分“这个值不该变”和“这个值会变”，很多隐藏 bug 在写代码阶段就被拦下来了。

$$\displaystyle \text{let } x = 1;\ x = 2;\ \checkmark \qquad \text{const } y = 2;\ y = 3;\ \times$$

1. let 可重赋值：用 let 声明后，后续可以对变量重新赋值，适合会变化的状态。

$$\displaystyle \text{let } x = 1;\quad x = 2;\quad \checkmark$$

2. const 不可重绑：const 声明后重新赋值会直接抛错，适合固定配置与引用。

$$\displaystyle \text{const } y = 2;\quad y = 3;\quad \times$$

3. 块级作用域边界：let/const 只在最近的一对花括号内有效，括号外自动失效。

$$\displaystyle \{ \text{let } x = 1; \} \Rightarrow \text{块外访问 } x \text{ 报错}$$

有了门和锁，小李的东西再也不会半夜串门了。收纳师顺手拉开行李箱的侧边拉链，掏出第一件法宝——解构赋值。

解构赋值

行李箱摊开，收纳师没有把衣服一件件拎出来翻找，而是直接拉开侧边袋，精准抽出“护照”和“充电器”。解构赋值干的就是这件事：不再通过“对象。属性”一层层凿墙取物，而是把数据结构整体拆开，按清单一次性取出想要的成员。

数组解构看位置：const [a, b] = arr 把第 0、1 个元素分别装进 a、b；配合剩余参数还能写 const [first, ...rest] = arr，剩下的一次收走。对象解构看键名：const { name, age } = user，等价于同时执行 const name = user.name 和 const age = user.age；想换个变量名，写 { name: userName } 即可，像给取出的东西换个更顺手的名字。

解构还有两个实用配件：一是默认值，{ name = '匿名' } = data 在字段缺失时自动兜底；二是嵌套解构，能从 data.a.b.c 这种深层对象里一步到位。最经典的妙用是变量交换——[a, b] = [b, a] 一行完成，从此告别 temp 临时变量。

$$\displaystyle \{ \text{name}, \text{age} \} = \text{user}$$

1. 花括号清单：左侧花括号里列出想一次性取出的字段名。

$$\displaystyle \{ \text{name}, \text{age} \}$$

2. 等号右侧来源：右端是被解构的对象，相当于打开包裹。

$$\displaystyle = \text{user}$$

3. 自动声明变量：解构成功后就地声明 name、age 两个变量并完成赋值。

$$\displaystyle \text{name} = \text{user.name};\quad \text{age} = \text{user.age}$$

小李看着行李箱被拆成一个个小抽屉，直呼过瘾。收纳师提醒：别高兴太早，接下来这件法宝跟它长得一模一样，方向却完全相反。

展开与剩余

如果说解构是把大箱子拆成小抽屉，展开运算符（……）就是把抽屉里的东西哗啦一下全倒出来摊平。[...arr] 在数组字面量中把每个元素拆成独立项；{...obj} 在对象字面量中把每个键值对复制进新对象。合并两个数组、复制一份配置对象，都靠这一招。

展开还能用在函数调用：Math.max(...nums) 把数组拆成一个个参数传进去，等价于把 nums[0]、nums[1]……依次写进括号。而它形影不离的“反面”是剩余参数（rest）：同样三个点，写在函数参数列表里时角色反转——把调用方传来的零散参数收拢成一个数组。function logAll(...args)，调用 logAll(1, 2, 3) 时 args 就是 [1, 2, 3]。

判断口诀只有八个字：输出展开，输入收拢。三个点出现在“输出位置”（函数调用、数组/对象字面量）就是展开，负责拆散；出现在“输入位置”（函数形参、解构左侧）就是剩余，负责聚拢。同一个漏斗，倒出来和装进去方向相反。

$$\displaystyle \text{Math.max}(...\text{nums}) \qquad f(...\text{args})$$

1. 调用处展开：Math.max(……nums) 把数组 nums 拆成多个独立参数传入。

$$\displaystyle \text{Math.max}(...\text{nums}) \equiv \text{Math.max}(n_1,\ n_2,\ n_3)$$

2. 形参处收拢：f(……args) 把调用方传入的所有参数收集进 args 数组。

$$\displaystyle f(...\text{args}) \Rightarrow \text{args} = [a_1,\ a_2,\ a_3]$$

3. 位置决定身份：同样三个点，输出端是展开，输入端是剩余。

$$\displaystyle ...\ \text{在输出端拆散} \quad \text{vs} \quad ...\ \text{在输入端聚拢}$$

小李拿来自己手头的数据练了练，合并列表、复制配置，一行搞定。收纳师接着抽出第二件法宝——模板字符串。

模板字符串

老办法拼接字符串，像做手工标签：先裁纸、再涂胶、贴上去还得担心贴歪。ES6 的模板字符串就是“自带打印功能的预制标签”：用反引号（`）包住整段文字，想插变量直接在 ${} 里写，字面长什么样，结果就是什么样。

它最香的能力有两个。一是变量插值：Hello, ${name}! 里的花括号可以放任意表达式，比如 ${a + b}、${user.name}，甚至套一个模板字符串，做到“标签里还有标签”。二是多行文本：反引号内直接换行，写 HTML 片段、拼 SQL、生成报告时，再不用堆一串 '\n' 和加号。

$$\displaystyle \text{Hello, }\$\{name\}\text{!} \Rightarrow \text{Hello, Alice!}$$

1. 反引号作边界：模板字符串用反引号代替普通引号，反引号内的内容整体视为字符串。

$$\displaystyle \text{0}$$

2. 花括号插值：${} 内写变量或表达式，计算后的值直接拼进字符串。

$$\displaystyle \$\{name\} \Rightarrow \text{value of name}$$

3. 整体求值输出：占位符全部替换后，得到最终的完整字符串。

$$\displaystyle \text{Hello, Alice!}$$

标签纸备好，收纳师开始处理最耗体力的重复劳动——每个柜子都要写样板代码。能不能做把折叠凳，随取随用？于是箭头函数登场了。

箭头函数

箭头函数就是那把折叠凳：平时不占地方，需要时一打开就能坐。对比一下：function(a, b) { return a + b; } 和 (a, b) => a + b，后者把 function、return、大括号全省了，只剩参数、箭头、表达式，一眼看懂。

但折叠凳有一个鲜明特征：朝向固定。普通函数的 this 像活动转椅，谁调用就指谁；箭头函数不创建自己的 this，而是沿作用域链“继承”定义处外层函数的 this。这带来两个后果：回调函数里不再需要 const self = this 的补丁写法；同时箭头函数不能当构造函数、也没有自己的 arguments。

适合箭头函数的场景：短小的回调、无需动态 this 的纯计算函数、数组的 map/filter/reduce。适合普通函数的场景：需要自己绑定 this 的事件监听、需要 arguments、需要 new 的构造函数。折叠凳和转椅各有各的座位。

$$\displaystyle (x,\ y) \Rightarrow x + y$$

1. 参数列表：左边括号里声明形参，只有一个参数时可省略括号。

$$\displaystyle (x,\ y)$$

2. 箭头连接：=> 把参数和函数体连接起来，读作“输入什么、产出什么”。

$$\displaystyle \Rightarrow$$

3. 隐式返回：右侧表达式的结果自动作为返回值，等价于 return。

$$\displaystyle (x,\ y) \Rightarrow x + y \equiv \text{function}(x,\ y)\ \{ \text{return } x + y;\ \}$$

折叠凳收进柜子，最后一项大工程开始了：给整套房子做分区、贴标签，让每件物品都有自己明确的去处——这正是模块化的思路。

模块化

家里东西一旦多了，最怕满屋乱放。模块化就是给屋子划分功能区：厨房归厨房、书房归书房，每个区域一个独立文件，各管各的一摊。ES6 用 export 和 import 两个关键字，为模块之间搭起一座有标签的桥。

export 是“贴出货标签”：把函数、变量、类标记为对外可见。可以单个导出（export const add = ……），也可以在文件末尾统一导出（export { add, sub }），还能用 export default 导出一个默认值，让导入方自己起名字来接。import 是“按标签取货”：import { add } from './math.js' 取命名成员；import add from './math.js' 接默认值。

模块化的价值在于“显式依赖”：谁依赖谁，扫一眼 import 就清楚；作用域相互隔离，再不用靠全局变量传话；配合打包工具还能按需加载，减少首屏体积。如今的工程化项目里，几乎每个文件都是一个模块——组件、工具、配置，各归各柜。

$$\displaystyle \text{export } \{ \text{add}, \text{sub} \} \quad \Rightarrow \quad \text{import } \{ \text{add} \} \text{ from } \text{'./math.js'}$$

1. 导出贴标：export {} 把模块内选中的成员公开出去，供外部取用。

$$\displaystyle \text{export } \{ \text{add}, \text{sub} \}$$

2. 导入取货：import {} from 后面跟文件路径，按名字取出所需成员。

$$\displaystyle \text{import } \{ \text{add} \} \text{ from } \text{'./math.js'}$$

3. 依赖显性化：导出与导入一一对应，模块之间的依赖关系一目了然。

$$\displaystyle \text{export} \leftrightarrow \text{import}$$

房间分区完毕，物品各就各位。收纳师拿出最后一张王牌——户型图纸，让同款房间可以批量施工。

Class类语法

如果每个房间都单独设计家具摆放，神仙也累死。Class 就是一张户型图纸：定义一次，便能批量建造结构相同的实例。class Animal {} 里的 constructor 是施工队，负责搭骨架、初始化属性；其余的方法则是每个房间的统一标配，负责行为。

继承是“在图纸上加盖侧翼”：class Dog extends Animal 之后，Dog 自动拥有 Animal 的属性和方法，还能在自己的 constructor 里先调用 super(……) 复用父类的施工队，再加独家设计。static 修饰的成员则是整栋楼的公共设施——挂在类身上，不归任何一个单间，直接用类名调用，比如 Animal.create()。

本质上 class 是“构造函数 + 原型链”的语法糖，但它让面向对象的意图一眼可辨。在 AI 工程里，用它描述领域模型非常顺手：Dataset、Model、Trainer 各成一个类，继承关系就是模型家族的族谱。

$$\displaystyle \text{class } \text{Dog} \ \text{extends} \ \text{Animal} \ \{ \cdots \}$$

1. 定义类：class 后跟类名，大括号里写构造函数和方法。

$$\displaystyle \text{class } \text{Dog} \ \{ \cdots \}$$

2. 继承扩展：extends 让 Dog 自动拥有 Animal 的全部属性和方法。

$$\displaystyle \text{class } \text{Dog} \ \text{extends} \ \text{Animal}$$

3. 父类施工：子类构造函数中先调用 super(……) 执行父类初始化。

$$\displaystyle \text{super}(\text{name}) \Rightarrow \text{先执行父类的 constructor}$$

四件法宝全部到位。小李站在焕然一新的家里，看着拆好的抽屉、贴好的标签、分区明确的柜子和按图纸批量建成的房间，终于领悟：ES6+ 不是多了几个花哨玩具，而是一套让代码更贴近人类直觉的“收纳哲学”——先想清楚物品该放哪个柜子，再动手写代码。

AI 应用场景

Python 演示

"""Understand ES6 features with equivalent Python patterns."""  def es6_destruct(obj, keys):    """Simulate ES6 object destructuring by key names."""    result = {}    for key in keys:        result[key] = obj.get(key, "default")  # 相当于解构默认值    return result  def spread_merge(*arrays):    """Simulate ES6 spread operator that flattens and merges arrays."""    merged = []    for arr in arrays:        merged.extend(arr)  # extend 相当于 [...arr]    return merged  class Animal:    """Simulate ES6 class with constructor and instance method."""     def __init__(self, name):        self.name = name     def speak(self):        return f"{self.name} makes a sound"  class Dog(Animal):    """Simulate ES6 extends inheritance."""     def speak(self):        return f"{self.name} barks"  def main():    user = {"name": "Alice", "age": 18, "city": "Shanghai"}    picked = es6_destruct(user, ["name", "age"])    print("destruct result:", picked)     nums = spread_merge([1, 2], [3, 4], [5])    print("spread result:", nums)     dog = Dog("Wangcai")    print("class inheritance:", dog.speak())     first, second, *rest = [1, 2, 3, 4, 5]    print(f"array destruct: first={first}, second={second}, rest={rest}")  if __name__ == "__main__":    main()

1. def es6_destruct(obj, keys):函数模拟 ES6 对象解构：传入原始字典和“取件清单” keys。
2. result[key] = obj.get(key, "default")字典的 get 自带默认值，对应解构语法里的默认值兜底。
3. def spread_merge(*arrays):星号参数就是 Python 版剩余参数，把多个传入数组收进一个元组。
4. merged.extend(arr)extend 把数组元素逐个展开追加，等价于 ES6 的 [……] 展开合并。
5. class Dog(Animal):类名后括号写父类即继承，对应 ES6 的 extends 关键字。
6. first, second, *rest = [1, 2, 3, 4, 5]Python 原生支持“解构+rest”，一行完成取首、取次、收余。
7. print(f"array destruct: first={first}, second={second}, rest={rest}")f-string 嵌入表达式，对应模板字符串的 ${} 插值。

常见误区

面试题