深入理解You Don't Know JS：ES6及更高版本中的语法特性

平均冠Zachary

于 2025-06-05 09:01:31 发布

阅读量393

点赞数 4

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00161/article/details/148440170

深入理解You Don't Know JS：ES6及更高版本中的语法特性

you-dont-know-js-ru :books: Russian translation of "You Don't Know JS" book series 项目地址: https://gitcode.com/gh_mirrors/yo/you-dont-know-js-ru

前言

JavaScript作为一门动态语言，其语法特性一直在不断演进。ES6（ECMAScript 2015）带来了许多革命性的语法改进，这些改进不仅提高了代码的可读性和可维护性，还解决了许多长期存在的痛点问题。本文将深入探讨ES6中最重要的语法特性，帮助开发者更好地理解和使用这些新特性。

块级作用域声明

传统作用域的问题

在ES5及之前版本中，JavaScript只有函数作用域和全局作用域，这导致了许多意料之外的行为。开发者通常使用IIFE（立即调用函数表达式）来模拟块级作用域：

var a = 2;

(function IIFE(){
    var a = 3;
    console.log(a);  // 3
})();

console.log(a);  // 2

let声明

ES6引入了let关键字，允许我们创建真正的块级作用域变量：

var a = 2;

{
    let a = 3;
    console.log(a);  // 3
}

console.log(a);  // 2

最佳实践是将所有let声明放在块的最顶部，这样可以避免TDZ（暂时性死区）问题：

{  
    let a = 2, b, c;
    // ...
}

暂时性死区（TDZ）

let声明的变量在声明前不可访问，这种现象称为暂时性死区：

{
    console.log(a);  // undefined
    console.log(b);  // ReferenceError
    
    var a;
    let b;
}

let在循环中的特殊行为

let在for循环中会为每次迭代创建一个新的绑定：

var funcs = [];

for (let i = 0; i < 5; i++) {
    funcs.push(function(){
        console.log(i);
    });
}

funcs[3]();  // 3

这与使用var的行为完全不同，后者会导致所有闭包共享同一个变量。

const声明

const用于声明常量，其值在初始化后不能被重新赋值：

{
    const a = 2;
    console.log(a);  // 2
    
    a = 3;  // TypeError!
}

需要注意的是，const保证的是变量引用的不变性，而不是值的不变性：

{
    const a = [1,2,3];
    a.push(4);  // 允许
    console.log(a);  // [1,2,3,4]
    
    a = 42;  // TypeError!
}

const使用建议

建议仅在确实需要不变性时使用const，而不是盲目地将所有变量声明为const。const应该作为一种表达意图的工具，而不是强制不变性的机制。

块级作用域函数

ES6中，函数声明在块内也具有块级作用域：

{
    foo();  // 可以调用
    
    function foo() {
        // ...
    }
}

foo();  // ReferenceError

这与ES5的行为不同，在ES5中函数声明会被提升到包含函数或全局作用域的顶部。

扩展/收集运算符

...运算符有两种主要用法：扩展和收集。

扩展运算符

将可迭代对象展开为单独的元素：

function foo(x, y, z) {
    console.log(x, y, z);
}

foo(...[1, 2, 3]);  // 1 2 3

也可以用于数组字面量：

var a = [2,3,4];
var b = [1, ...a, 5];

console.log(b);  // [1,2,3,4,5]

收集运算符（剩余参数）

将剩余参数收集到一个数组中：

function foo(x, y, ...z) {
    console.log(x, y, z);
}

foo(1, 2, 3, 4, 5);  // 1 2 [3,4,5]

这比传统的arguments对象更加直观和方便。

默认参数值

ES6引入了直接的默认参数语法：

function foo(x = 11, y = 31) {
    console.log(x + y);
}

foo();  // 42
foo(5, 6);  // 11
foo(0, 42);  // 42

这种方式比传统的||操作符更加可靠，因为它能正确处理假值（如0、null等）。

默认参数表达式

默认值可以是任意表达式，甚至是函数调用：

function bar(val) {
    console.log("bar called");
    return y + val;
}

function foo(x = y + 3, z = bar(x)) {
    console.log(x, z);
}

var y = 5;
foo();  // 8 13

解构赋值

解构赋值是一种从数组或对象中提取值的简洁语法。

数组解构

var [a, b, c] = [1, 2, 3];
console.log(a, b, c);  // 1 2 3

可以跳过元素：

var [a, , b] = [1, 2, 3];
console.log(a, b);  // 1 3

对象解构

var {x, y} = {x: 1, y: 2};
console.log(x, y);  // 1 2

可以重命名属性：

var {x: a, y: b} = {x: 1, y: 2};
console.log(a, b);  // 1 2

解构默认值

可以结合默认值使用：

var [a = 1, b = 2] = [3];
console.log(a, b);  // 3 2

var {x = 1, y = 2} = {x: 3};
console.log(x, y);  // 3 2

模板字符串

模板字符串提供了创建多行字符串和字符串插值的便捷语法：

var name = "Kyle";
var greeting = `Hello ${name}!`;

console.log(greeting);  // Hello Kyle!
console.log(typeof greeting);  // string
console.log(greeting.length);  // 12

标签模板

模板字符串可以配合标签函数使用，实现自定义插值行为：

function foo(strings, ...values) {
    console.log(strings);
    console.log(values);
}

var desc = "awesome";
foo`Everything is ${desc}!`;
// ["Everything is ", "!"]
// ["awesome"]

箭头函数

箭头函数提供了更简洁的函数语法，并且自动绑定this：

var f1 = () => 12;
var f2 = x => x * 2;
var f3 = (x, y) => {
    var z = x * 2 + y;
    y++;
    x *= 3;
    return (x + y + z) / 2;
};

箭头函数的this绑定是词法的，而不是动态的：

var obj = {
    id: "awesome",
    cool: function coolFn() {
        console.log(this.id);
    }
};

var id = "not awesome";
obj.cool();  // awesome

setTimeout(obj.cool, 100);  // not awesome

使用箭头函数可以解决这个问题：

var obj = {
    count: 0,
    cool: function coolFn() {
        setTimeout(() => {
            this.count++;
            console.log("awesome?");
        }, 100);
    }
};

obj.cool();  // awesome?