ES6 四大新特性：let/const、箭头函数与解构赋值

可视化演示

let 与块级作用域：给变量一个专属房间

想象你家的杂物房，以前所有东西都堆在里面，不分区域。var 声明的变量就像杂物房里的东西，放在哪个角落似乎不重要，甚至 JavaScript 引擎会在代码执行前先把它们“搬”到房间中央——这就是变量提升。不管你在哪里声明 var，它都会被提到作用域顶部，这容易导致意想不到的 undefined。更糟的是，var 不存在“房间”的概念，一个 if 块、一个 for 循环里声明的变量，在块外面依然能访问到。

let 的出现彻底改变了这个局面。如果用 let 声明变量，它就像被装进一个带有房门的专属房间中，这个房间就是块级作用域。块级作用域指的是 {} 包裹的范围，比如 if、for、while 的花括号。在房间内部可以自由使用变量，但走出房门，变量就不可见了。这从根本上解决了 var 的污染问题。

let 还有一个重要的特性叫暂时性死区（TDZ，即 Temporal Dead Zone）。简单说，在 let 声明之前访问该变量，会直接报错——“暂时性死区”这个名字很有趣，因为它让变量在声明前的这段时间里，连“存在”都算不上。这就像房间还没建好时，你试图去房间里拿东西，只能撞到一堵墙。

1. 声明前访问报错：在 let x 执行前的代码中访问 x，引擎会抛出 ReferenceError，这是 TDZ 的直接体现。

$$\text{ReferenceError: Cannot access 'x' before initialization}$$

2. 声明后正常访问：声明语句执行完毕后，x 进入可访问状态，读取到的是初始化后的值。

$$x = 10 \Rightarrow \text{可读可用}$$

在循环中使用 let 更是如鱼得水。for (let i = 0; i < 5; i++) 里的 i 在每次迭代时都是一个新的绑定，这解决了 var 在循环闭包中的经典问题。以前的代码里，循环内定义函数，函数里引用循环变量，最终拿到的永远是循环结束后的值；现在用 let，每次迭代的 i 都被“锁定”了。这正是“给变量一个专属房间”的威力——每间房间都有自己的居民，互不串门。

if (true) {  let x = 10;  console.log(x); // 10，房间里可以访问}console.log(x); // ReferenceError: x is not defined，走出房间就找不到了

const 与常量绑定：只许看不许换的相框

const 是 let 的姊妹，它声明的是一个“常量绑定”。你可以把它想象成一个固定在墙上的相框：相框的位置不能换，不能说你今天把它挂到客厅、明天移到卧室；但相框里的照片是可以更换的（这个特性到后面讲引用类型时再展开）。const 基本规则是：声明时必须赋初值，之后不能重新赋值。

我们来仔细看一下引用类型的情况。const 禁止的是“重新绑定”，即不能把变量名指向另一个对象；但对象内部的属性是可以修改的。这就像刚说的相框，相框（变量名）不能换成另一个，但照片（内容）随时可以换。

为了解决“内容也能冻结”的需求，可以使用 Object.freeze()，它让对象变为真正不可变——不能新增、删除、修改属性。这相当于把相框连照片一起用玻璃封死了。在真实项目中，Object.freeze 常用于定义配置常量，防止代码在某个角落意外修改全局配置。

那到底什么时候用 let、什么时候用 const？社区约定俗成的准则是：优先用 const，除非你确定需要重新赋值才用 let。因为 const 传达的语义是“这个值不应该被变”，这对代码的可读性和可维护性都有好处。如果你看一个变量从头到尾只被赋值一次，那立即就能判断它是一个常量；如果看到 let，则会注意它在哪些地方被修改了。

const PI = 3.14159;PI = 3; // TypeError: Assignment to constant variable.

const user = { name: 'Alice' };user.name = 'Bob'; // 合法，修改属性不改变引用user = { name: 'Charlie' }; // TypeError，重新赋值报错

箭头函数：简洁到极致的函数写法

箭头函数（Arrow Function）是 ES6 中最具辨识度的语法之一。如果用一句话概括，它就是“把 function 和 {} 都藏起来的函数速写”。回到搬家的比喻中，普通函数像一辆手动挡汽车——你得踩离合、挂档、松手刹，步骤齐全；箭头函数则像自动挡，一脚油门就走，简单直接。

基本的箭头函数语法是这样的：

箭头函数有几个核心简写规则：

1. 当参数只有一个时，括号可以省略：x => x * 2。

2. 当函数体只有一个表达式时，花括号和 return 都可以省略，并且会自动返回这个表达式的值——这就是隐式返回。

3. 没有参数时，括号必须保留：() => Date.now()。

如果函数体有多个语句，就需要写花括号和显式 return。这个规则很好记：能省略的前提是函数体“一眼就能看穿”，多语句时就别硬缩写了。

箭头函数与普通函数还有一个重要区别：它没有自己的 arguments 对象。在普通函数中，arguments 是类数组对象，包含所有传入的参数；而箭头函数中，你需要用剩余参数（rest parameters）来实现类似功能：

// 普通函数function add(a, b) { return a + b; }// 箭头函数const add = (a, b) => a + b;

const double = x => x * 2;const random = () => Math.random();

const logAll = (...args) => console.log(args);logAll(1, 2, 3); // [1, 2, 3]

this 绑定的秘密：箭头函数中的 this 是“包养”的

this 是 JavaScript 中最令人困惑的概念之一。在普通函数中，this 取决于调用方式——谁调用了函数，this 就指向谁，这被称为动态绑定。这就好比一个员工，被哪个部门叫去开会，他的胸牌就换成哪个部门的名字；你永远猜不到下一次他会被叫到哪去。

箭头函数则完全改变了这套规则：它没有自己的 this。箭头函数中的 this 是在定义函数时从外层词法作用域“继承”来的，且一旦确定，就无法改变。

这段对比非常经典。普通函数在 setTimeout 中被调用时，this 变成了全局对象，所以读不到 name；而箭头函数捕获了它定义时所在的 greet 方法中的 this，于是 this.name 正常输出。用一句话总结：箭头函数让 this 变成了“包养的”，不再看调用者的脸色，而是看定义时的环境。

因此，箭头函数不能用作构造函数。因为它没有自己的 this，意味着无法绑定新创建的对象，new 一个箭头函数会直接报错。同理，call()、apply()、bind() 方法也无法改变箭头函数的 this 指向——你试图用这些方法“强行换锁”，但箭头函数根本不吃这一套。

在实际开发中，这个特性在事件回调、定时器、异步请求场景中尤为实用——这些场景下你往往希望 this 稳定地指向外层对象，而不是因调用方式而变化。

const obj = {  name: 'Alice',  greet: function() {    setTimeout(function() {      console.log('Hello, ' + this.name); // undefined，this 指向 window    }, 100);  }}; const obj2 = {  name: 'Bob',  greet: function() {    setTimeout(() => {      console.log('Hello, ' + this.name); // 'Hello, Bob'，this 继承自 greet    }, 100);  }};

数组解构赋值：一次拆箱一整套

解构赋值（Destructuring）就像搬家时的打包拆箱。想象你搬家时用一个个收纳箱把厨房用品装好，到了新家按箱子上的标签逐一拆开，省时省力。解构赋值做的正是这件事：把数组或对象中的值“拆开”，一次性赋给多个变量，不再需要一个一个取。

先看数组解构的基础用法：

这条代码相当于把数组的 colors[0]、colors[1]、colors[2] 依次赋给 first、second、third。解构的精髓在于它可以灵活跳过不需要的元素：

更强大的是，解构支持默认值。如果数组元素是 undefined，默认值就会生效——这就像拆箱时发现某样东西用旧报纸裹着但其实是易碎品，你提前准备了备用方案：

注意，默认值只有在严格等于 undefined 时才生效。如果该位置是 null，默认值不会触发。因为 null 是一个“有意的空值”，而 undefined 才是“未赋值相框”。

数组解构最实用的场景之一是交换变量。以前交换两个变量需要一个临时变量，就像搬家时先把沙发搬到走廊、再把茶几搬进来，最后把沙发搬进屋；现在可以一步到位：

这行代码可读性极强，一眼就看出“交换 x 和 y”。

1. 位置匹配：a 取第 0 项，即 10。解构本质是“按位置取数”。

$$a \leftarrow arr[0] = 10$$

2. 继续匹配：b 取第 1 项，即 20。

$$b \leftarrow arr[1] = 20$$

3. 默认值触发：c 对应第 2 项，但数组只有两项，取到 undefined，所以默认值 30 生效。

$$c \leftarrow arr[2] \equiv undefined \Rightarrow c = 30$$

const colors = ['red', 'green', 'blue'];const [first, second, third] = colors;console.log(first);  // 'red'console.log(second); // 'green'console.log(third);  // 'blue'

const [, , thirdColor] = colors;console.log(thirdColor); // 'blue'

const [a, b, c = 100] = [1, undefined, 3];console.log(b); // undefinedconsole.log(c); // 3，因为 c 的位置是 3，覆盖了默认值 100

let x = 1, y = 2;[x, y] = [y, x];console.log(x, y); // 2, 1

const [a, b, c = 30] = [10, 20];

对象解构赋值：按名牌找东西

对象解构和数组解构逻辑相通，但对象没有“位置”概念，靠的是属性名匹配。回到拆箱比喻中，数组解构是按“第几件”拿东西，对象解构则是按“名牌”拿东西——每个收纳箱上都贴着专属标签，你按标签找物，准确高效。

对象解构的变量名默认是属性名。如果你想换一个变量名，可以使用重命名语法：

这里 name 是匹配的键名，userName 是新变量名。注意系统约定：左边是“从对象里取哪个键”，右边是“赋给哪个变量”。这和数组解构“左边是变量、右边是值”的直觉略有不同，容易混淆。

对象解构支持嵌套：

这就像拆开一个大的收纳箱，里面还有一个小收纳盒，再拆一层。

对象解构最常用的场景之一是函数参数解构——直接在函数签名中把传入对象的属性提取出来，让函数体变得清爽：

配合默认值可以应对参数缺失的情况：

这样设计的好处是：即使调用时不传参数，也不会报错。默认参数从 undefined 兜底，同时 = {} 给整个参数也设了默认空对象，双重保险。

至此，六大分支全部讲完：let 给变量装了隔断墙，const 守护常量绑定，箭头函数将函数“瘦身”并固定 this，数组解构按序取物、对象解构按名牌找物。这四把钥匙，能帮你打开现代 JavaScript 世界的绝大部分房门。

const user = { name: 'Alice', age: 25 };const { name, age } = user;console.log(name); // 'Alice'console.log(age);  // 25

const { name: userName, age: userAge } = user;console.log(userName); // 'Alice'

const person = { name: 'Bob', address: { city: 'Beijing', zip: '100000' } };const { address: { city } } = person;console.log(city); // 'Beijing'

function greet({ name, age }) {  return `Hi, I'm ${name}, ${age} years old.`;}greet({ name: 'Alice', age: 25 }); // "Hi, I'm Alice, 25 years old."

function greet({ name = 'Anonymous', age = 0 } = {}) {  return `Hi, I'm ${name}, ${age} years old.`;}greet(); // "Hi, I'm Anonymous, 0 years old."

AI 应用场景

Python 演示

def demonstrate_const_like_behavior():    """    模拟 JS const 的引用语义：可以修改内部元素，但不可重新绑定。    用 tuple 和 list 对应 const 数组/对象的不同层面。    """    print("=== 模拟 const 绑定 ===")    # list 内部可变，类似 const obj = { ... } 中的属性修改    const_like = [1, 2, 3]    const_like[0] = 100    print(f"list 内部可变: {const_like}")  # [100, 2, 3]     # tuple 不可重新绑定，类似 const 禁止重新赋值    tuple_fixed = (10, 20)    try:        tuple_fixed = (99, 99)  # 在 JS 里这会 TypeError    except TypeError as e:        print(f"元组不可重新绑定: {e}")    return const_like def arrow_function_like_lambda():    """用 Python lambda 演示箭头函数的简洁写法。"""    print("\n=== 箭头函数与 lambda 类比 ===")    double = lambda x: x * 2    print(double(5))  # 10    # 多个参数    add = lambda a, b: a + b    print(add(3, 4))  # 7 def destructuring_like_unpacking():    """用 Python 的解包（unpacking）演示 JS 解构赋值。"""    print("\n=== 解构赋值类比 ===")    arr = [1, 2, 3]    a, b, c = arr    print(a, b, c)  # 1 2 3     # 交换变量    x, y = 10, 20    x, y = y, x    print(x, y)  # 20 10     # 对象解构 -> dict unpack    user = {"name": "Alice", "age": 25}    name, age = user["name"], user["age"]    print(name, age)  # Alice 25 def block_scope_compare():    """对比 Python 的块级作用域感与 JS let/const 差异（概念演示）。"""    print("\n=== 块级作用域类比（Python 无块级作用域） ===")    # 在 Python 中，for 循环内定义的变量在循环后仍可访问    # 这与 var 相似，但与 let/const 不同    for i in range(3):        temp = i * 2    print(f"循环后 temp 仍可访问: {temp}")  # 4    print("JS 中 let 会把 temp 限制在块内") if __name__ == "__main__":    demonstrate_const_like_behavior()    arrow_function_like_lambda()    destructuring_like_unpacking()    block_scope_compare()

1. tuple_fixed = (99, 99)尝试给元组重新绑定，会触发 TypeError，类比 JS 中给 const 重新赋值的报错。
2. double = lambda x: x * 2用匿名函数对应箭头函数的“极简写法”。
3. a, b, c = arr用元组解包对应 JS 数组解构赋值。
4. x, y = y, x一行代码交换变量，与 JS 的 [x, y] = [y, x] 逻辑一致。
5. temp = i * 2演示 Python 中循环变量泄漏，与 JS 的 var 行为类似，反衬 let 的块级作用域价值。
6. name, age = user["name"], user["age"]手动提取 dict 中的字段，对应 JS 对象解构的“按名牌取物”。

常见误区

面试题