探索 ES6 基础：开启 JavaScript 新篇章

文章目录

[一、ES6 简介与重要性](#一、ES6 简介与重要性)
二、变量声明新方式
- [（一）let 关键字](#（一）let 关键字)
- [（二）const 关键字](#（二）const 关键字)
三、模板字符串
四、箭头函数
五、函数参数默认值
[六、Spread / Rest 操作符](#六、Spread / Rest 操作符)
- [（一）Spread 操作符](#（一）Spread 操作符)
- [（二）Rest 操作符](#（二）Rest 操作符)
七、解构赋值
- （一）数组解构
- （二）对象解构
八、对象超类与类
- （一）对象超类
- （二）类的定义与使用
[九、ES6 其他特性概览](#九、ES6 其他特性概览)
十、总结与展望

一、ES6 简介与重要性

ES6，全称为 ECMAScript 6，它是 JavaScript 语言的一次重大革新，在 JavaScript 的发展历程中具有举足轻重的地位。在 ES6 出现之前，JavaScript 已经经历了多个版本的演进，但 ES6 带来的变化和提升是前所未有的。它于 2015 年正式发布，从这一版开始，JavaScript 语言在语法、功能和编程风格上都有了质的飞跃。

在前端开发领域，ES6 已经成为不可或缺的基础。现代前端开发日益复杂，对代码的质量、可维护性和开发效率都提出了更高要求。ES6 的诸多新特性很好地满足了这些需求，例如，通过模板字符串可以更方便地处理字符串拼接与插值，使代码更加简洁直观；解构赋值让数据提取和赋值变得高效；箭头函数简化了函数的定义方式，并且解决了 this 指向模糊的问题；模块化的支持使得代码组织更加合理，便于管理和复用。无论是流行的 Vue、React 还是 Angular 框架，都已全面拥抱 ES6，其相关的构建工具也对 ES6 提供了极为友好的支持。可以说，掌握 ES6 是前端开发者跟上时代步伐、提升自身竞争力的必备技能。

二、变量声明新方式

（一）let 关键字

在 ES6 之前，JavaScript 主要使用 var 关键字来声明变量。var 声明的变量存在一些局限性，例如其作用域为函数级，容易导致变量提升等问题，可能引发意想不到的错误。而 ES6 引入的 let 关键字则在很大程度上解决了这些问题。

let 声明的变量具有块级作用域。这意味着在一个代码块（如由花括号 {} 包围的部分）内使用 let 声明的变量，只在该代码块内有效，在代码块外部无法访问。例如：

bash 复制代码

{
    let x = 10;
    console.log(x);  // 输出 10
}
console.log(x);  // 报错，x 未定义

在上述代码中，变量 x 在花括号内声明，在花括号外尝试访问 x 会导致错误，因为 x 的作用域仅限于花括号内部。

let 不存在变量提升。与 var 不同，使用 let 声明的变量必须先声明后使用，否则会抛出 ReferenceError 错误。例如：

bash 复制代码

console.log(y);  // 报错，ReferenceError: y is not defined
let y = 20;

这种特性有助于避免因变量未声明就使用而产生的潜在错误，使代码的执行逻辑更加清晰和可预测。

let 不允许在同一作用域内重复声明变量。例如：

bash 复制代码

let z = 30;
let z = 40;  // 报错，SyntaxError: Identifier 'z' has already been declared

这可以防止因不小心重复声明变量而导致的逻辑混乱和错误覆盖问题，提高代码的健壮性。

在循环中使用 let 可以更好地控制循环变量的作用域。例如：

bash 复制代码

for (let i = 0; i < 5; i++) {
    setTimeout(() => {
        console.log(i);  // 分别输出 0, 1, 2, 3, 4
    }, 1000);
}

在上述代码中，每次循环都会创建一个新的 i 变量，其值在每次循环中独立，而不是像使用 var 那样共享同一个全局变量。

（二）const 关键字

const 关键字用于声明常量，其具有以下特点：

声明必须赋初始值：使用 const 声明常量时，必须在声明的同时进行初始化，否则会报错。例如：

bash 复制代码

const PI;  // 报错，Uncaught SyntaxError: Missing initializer in const declaration
const PI = 3.14159;

值不允许修改：一旦使用 const 声明并初始化了一个常量，其值在后续代码中不能被重新赋值。例如：

bash 复制代码

const MAX_COUNT = 100;
MAX_COUNT = 200;  // 报错，Uncaught TypeError: Assignment to constant variable.

块级作用域：与 let 类似，const 声明的常量也具有块级作用域。例如：

bash 复制代码

{
    const COLOR = "red";
    console.log(COLOR);  // 输出 red
}
console.log(COLOR);  // 报错，COLOR 未定义

需要注意的是，虽然 const 声明的常量本身不能被重新赋值，但如果常量是一个对象或数组，其内部的属性或元素是可以被修改的。例如：

bash 复制代码

const person = {
    name: "John",
    age: 30
};
person.age = 31;  // 合法，修改对象的属性值
console.log(person);  // { name: "John", age: 31 }

const numbers = [1, 2, 3];
numbers.push(4);  // 合法，向数组中添加元素
console.log(numbers);  // [1, 2, 3, 4]

在上述例子中，虽然 person 和 numbers 常量本身不能被重新赋值为其他对象或数组，但可以修改它们内部的属性和元素。这是因为 const 实际上保证的是变量指向的那个地址保存的数据不得改动，而对于对象和数组，变量指向的内存地址保存的只是一个指向实际数据的指针，所以其内部结构可以被修改。

三、模板字符串

在 ES6 中，模板字符串是一种非常实用的特性，它为字符串的处理带来了极大的便利。模板字符串使用反引号 (`) 来包裹字符串内容，而不是传统的单引号 (') 或双引号 (")。例如：

bash 复制代码

let greeting = `Hello, World!`;
console.log(greeting);  // 输出: Hello, World!

模板字符串的强大之处在于它能够通过 ${} 语法来插入变量、表达式甚至函数调用。这使得字符串拼接和插值变得更加直观和简洁。比如：

bash 复制代码

let name = "Alice";
let age = 25;
let message = `My name is ${name} and I'm ${age} years old.`;
console.log(message); 
// 输出: My name is Alice and I'm 25 years old.

在上述代码中，变量 name 和 age 被顺利地嵌入到模板字符串中，无需像传统方式那样使用大量的加号 (+) 进行字符串拼接。

我们还可以在 ${} 中插入表达式，例如：

bash 复制代码

let a = 5;
let b = 3;
let result = `The sum of ${a} and ${b} is ${a + b}.`;
console.log(result); 
// 输出: The sum of 5 and 3 is 8.

甚至可以调用函数：

bash 复制代码

function getFullName(firstName, lastName) {
    return firstName + " " + lastName;
}
let firstName = "Bob";
let lastName = "Smith";
let fullName = `My full name is ${getFullName(firstName, lastName)}.`;
console.log(fullName); 
// 输出: My full name is Bob Smith.

与传统的字符串拼接相比，模板字符串的优势明显。传统方式在拼接多个变量或表达式时，代码往往显得冗长且容易出错，尤其是在处理复杂的逻辑时。例如：

bash 复制代码

let city = "New York";
let country = "USA";
let location = "I live in " + city + ", " + country + ".";
console.log(location); 
// 输出: I live in New York, USA.

而模板字符串则让代码更加清晰可读，减少了因拼接字符串而产生的错误，提高了代码的开发效率和可维护性。

四、箭头函数

箭头函数是 ES6 中一种简洁的函数定义方式，其语法结构为 (参数列表) => {函数体}。例如，一个简单的加法箭头函数可以写成 (a, b) => a + b。当函数体只有一条语句时，还可以省略花括号，若该语句有返回值，也可省略 return 关键字，像上面的加法函数也可写成 (a, b) => a + b。

箭头函数对于 this 关键字的处理方式与普通函数有很大区别。在普通函数中，this 的指向在函数被调用时动态确定，取决于函数的调用方式，这使得 this 的指向有时难以捉摸。而箭头函数本身没有自己的 this，它会继承外层作用域的 this。

例如，在对象的方法中使用箭头函数：

bash 复制代码

const obj = {
    name: 'John',
    sayHello: () => {
        console.log(`Hello, my name is ${this.name}`);
    }
};
obj.sayHello(); 
// 输出：Hello, my name is undefined

这里由于箭头函数的 this 继承自外层作用域（全局作用域），而全局作用域中没有 name 变量，所以输出 undefined。

若使用普通函数：

bash 复制代码

const obj = {
    name: 'John',
    sayHello: function() {
        console.log(`Hello, my name is ${this.name}`);
    }
};
obj.sayHello(); 
// 输出：Hello, my name is John

普通函数的 this 指向调用它的对象 obj，所以能正确输出对象的 name 属性。

在定时器中使用箭头函数：

bash 复制代码

const person = {
    name: 'Alice',
    greetAfterDelay: function() {
        setTimeout(() => {
            console.log(`Hello, my name is ${this.name}`);
        }, 1000);
    }
};
person.greetAfterDelay(); 
// 1 秒后输出：Hello, my name is Alice

这里箭头函数在定时器中继承了外层 greetAfterDelay 方法的 this，从而能访问到 person 对象的 name 属性。若将定时器中的箭头函数换成普通函数，this 的指向会在定时器回调函数被调用时发生改变，无法正确访问 person 对象的属性。

总之，箭头函数在简化函数定义的同时，因其独特的 this 指向机制，在很多场景下能让代码更简洁且逻辑更清晰，但也需要开发者清楚其与普通函数在 this 处理上的差异，以便合理选择使用。

五、函数参数默认值

在 ES6 中，为函数参数设置默认值变得十分便捷。其基本规则是，形参附初始值时，一般位置靠后。当形参有初始值，而实参没值（也就是传入值为 undefined）时，就会使用形参的初始值；若形参有初始值，实参也有值，这时使用的就是实参的值。

例如下面这个函数：

bash 复制代码

function add(a, b = 10) {
    return a + b;
}
console.log(add(1, 2)); // 不传入第三个参数就用方法默认的初始值，这里输出3
console.log(add(1)); // 只传入一个参数，b会使用默认值10，输出11

默认值还可以与解构赋值结合使用，在解构赋值的时候给参数附默认值。如果解构赋值没值，就用默认值；解构赋值有值就用解构得到的值。比如：

bash 复制代码

function connect({host = "127.0.0.1", username, age}) {
    console.log(host, username, age);
}
connect({username: "张三", age: 18, host: "196.1.1.0"});

我们再来对比一下 ES5 中实现参数默认值的方式。在 ES5 中，通常会采用如下方法：

bash 复制代码

function example(a, b) {
    a = a || 1; // 设置参数a的默认值为1
    b = b || 2; // 设置参数b的默认值为2
    return a + b;
}

或者：

bash 复制代码

function example(name, age) {
    name = name || '貂蝉';
    age = age || 21;
    alert('你好！我是' + name + '，今年' + age + '岁。');
}

不过这种方式存在一个缺点，就是当参数赋值了，但赋值后其对应的布尔值为 false 时（比如传入 0、null、false、'' 等），赋值就不起作用了，会使用默认值。

而 ES6 的方式更加严谨和简洁，只有在参数全等于 undefined 时，才会取默认值，避免了上述 ES5 方式中可能出现的问题。

另外，在 ES6 使用默认参数时，还有一些需要注意的点：

参数变量是默认声明的，所以不能用 let 或 const 再次声明，如下这样会报错：

bash 复制代码

function foo(x = 5) {
    let x = 4; // Error
    const x = 3; // Error
}

使用默认参数时，函数不能再有同名参数，像下面这样是不允许的：

bash 复制代码

function fn(x = 2, x, y) {
    console.log(x);
}

参数默认值不是传值的，而是每次都重新计算默认值表达式的值，也就是参数默认值是惰性求值的。例如：

bash 复制代码

let x = 99;
function fn(y = x + 1) {
    console.log(y);
}
fn(); // 100
x = 100;
fn(); // 101

同时，设置了默认参数后，函数的 length 属性表示的是没有设置默认参数的参数的个数，比如：

bash 复制代码

function (a) {}.length // 1
function (a = 5) {}.length // 0
function (a, b, c = 5) {}.length // 2

总之，ES6 中函数参数默认值的特性为我们编写函数提供了更多便利，也让代码逻辑更加清晰，减少了很多处理参数默认情况的冗余代码，在实际开发中非常实用。

六、Spread / Rest 操作符

（一）Spread 操作符

Spread 操作符用三个点（...）表示，它可以将可迭代对象（如数组、对象、字符串等）的元素或属性 "展开" 到不同的语法结构中。

在数组展开方面，它能够把数组中的元素展开为独立的值。例如：

bash 复制代码

const arr = [1, 2, 3];
console.log(...arr); // 输出：1 2 3

在合并数组时，Spread 操作符非常方便。比如：

bash 复制代码

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const mergedArr = [...arr1,...arr2];
console.log(mergedArr); // 输出：[1, 2, 3, 4, 5, 6]

与函数调用结合时，它可以将数组元素展开作为函数的参数。例如：

bash 复制代码

function add(a, b, c) {
    return a + b + c;
}
const numbers = [1, 2, 3];
console.log(add(...numbers)); // 输出：6

（二）Rest 操作符

Rest 操作符同样用三个点（...）表示，但它主要用于函数定义中，用于收集剩余的参数。当不确定函数将接收多少个参数时，可以使用 Rest 操作符来收集所有剩余的参数，并将它们作为一个数组进行处理。例如：

bash 复制代码

function sum(...numbers) {
    return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3, 4, 5)); // 输出：15

Rest 操作符必须作为函数的最后一个参数。例如，以下代码会报错：

bash 复制代码

function invalidFunction(a,...rest, b) {} // 报错：Rest element must be last element

它还可以与数组的解构一起使用，以便将复杂的结构分解为更简单的部分。例如：

bash 复制代码

function example([first,...rest]) {
    console.log(first); // 输出数组的第一个元素
    console.log(rest);  // 输出数组的剩余部分
}
example([1, 2, 3, 4, 5]); // 分别输出 1 和 [2, 3, 4, 5]

七、解构赋值

（一）数组解构

在 ES6 中，数组解构赋值是一种非常便捷的从数组中提取值并赋值给变量的方式。它基于模式匹配的原理，只要等号两边的模式相同，左边的变量就会被赋予右边对应的值。

例如，传统的赋值方式可能是这样：

bash 复制代码

let a = 1, b = 2, c = 3;

而使用解构赋值，就可以写成：

bash 复制代码

let [a, b, c] = [1, 2, 3];

这里变量a、b、c就分别被赋值为数组中对应位置的元素 1、2、3。

数组解构还支持嵌套的情况，比如：

bash 复制代码

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

也可以选择忽略某些位置的值，像这样：

bash 复制代码

let [,, c] = [1, 2, 3];
console.log(c); // 3

当解构不成功时，也就是左边变量对应的位置在右边数组中没有值，那么该变量的值就会是undefined，例如：

bash 复制代码

let [foo] = [];
console.log(foo); // undefined
let [bar, foo] = [1];
console.log(bar); // 1
console.log(foo); // undefined

此外，解构赋值允许设定默认值。不过要注意的是，ES6 内部使用严格相等运算符（===）来判断一个位置是否有值，只有当一个数组成员严格等于undefined时，默认值才会生效。比如：

bash 复制代码

let [a = 1, b = 2, c = a] = ['one', null];
console.log(a); // 'one'
console.log(b); // null
console.log(c); // 'one'

在上述代码中，a在右边是可以取到值'one'的，所以a的默认值并不生效；b在右边的值是null，在 JavaScript 中null和undefined是不严格相等的，所以b设置的默认值也不生效；而c在右边对应的值没有，也就是undefined，所以此时c取到了默认值a，也就是'one'。

数组解构赋值在处理数组数据时有着明显的优势。它可以让代码更加简洁明了，尤其是在处理复杂的数组结构或者需要从数组中提取特定位置元素进行赋值的场景下，能够避免大量繁琐的按索引取值再赋值的操作，提高代码的可读性和可维护性。

（二）对象解构

对象解构赋值与数组解构赋值有所不同。对象的属性是没有顺序之分的，变量名必须和属性名相同才能取到正确的值。

基本的对象解构赋值语法如下：

bash 复制代码

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

需要注意的是，在对象解构赋值中，真正被赋值的是属性名后面的变量，而不是属性名本身。例如：

bash 复制代码

let {a: x, b: y} = {a: 1, b: 2};
console.log(x); // 1
console.log(y); // 2
console.log(a); // 报错，a is not defined

对象解构同样支持嵌套的应用场景，比如有这样一个复杂的对象：

bash 复制代码

let person = {
    name: {
        firstName: 'xiao',
        lastName: 'ming'
    },
    age: 10,
    sex: 'male',
    friends: {
        xiaofang: {
            age: 12
        },
        xiaogang: {
            sex: 'male'
        }
    }
};
let {name, friends: {xiaofang: {age}}, friends: {xiaogang}} = person;
console.log(name); // {firstName: "xiao", lastName: "ming"}
console.log(age); // 12
console.log(xiaogang); // {sex: "male"}

当变量名与属性名不一致时，需要通过上述提到的属性名在前，变量名在后（用冒号隔开）的方式来明确对应关系进行取值。

另外，如果提前声明了变量，在进行对象解构赋值时需要用小括号括起来，否则会报错，示例如下：

bash 复制代码

let a;
{a} = {a: 2}; // 报错
({a} = {a: 2});
console.log(a); // 2

对象解构赋值在实际开发中也非常实用，比如在处理从接口返回的 JSON 数据对象，想要提取其中特定的属性值赋给变量时，使用对象解构赋值可以一行代码就完成，使代码更加简洁高效，提升开发效率，增强代码的可读性。

八、对象超类与类

（一）对象超类

在 ES6 的面向对象编程体系中，存在一个特殊的对象超类。所有的对象都默认继承自这个超类，它为对象提供了一些基础的、通用的属性和方法。其中，super方法是一个非常关键的特性，它主要用于在子类中调用父类的方法。

例如，我们创建一个简单的类Shape，然后定义一个子类Rectangle继承自Shape。在Rectangle类中，我们可以使用super方法来调用Shape类中的方法。

bash 复制代码

class Shape {
    constructor() {
        this.name = "Shape";
    }

    draw() {
        console.log(`Drawing a ${this.name}`);
    }
}

class Rectangle extends Shape {
    constructor() {
        super(); // 调用父类Shape的构造函数
        this.name = "Rectangle";
    }

    draw() {
        super.draw(); // 调用父类Shape的draw方法
        console.log(`Drawing a rectangle with specific properties.`);
    }
}

const rectangle = new Rectangle();
rectangle.draw();
// 输出:
// Drawing a Rectangle
// Drawing a rectangle with specific properties.

在上述代码中，Rectangle类的构造函数中首先调用super()，这一步是必不可少的，它确保了父类Shape的构造函数被执行，从而正确地初始化了name属性。在Rectangle类的draw方法中，super.draw()调用了父类Shape的draw方法，然后再执行子类特有的绘制矩形的逻辑。这样的设计模式使得代码的复用性大大提高，子类可以在继承父类的基础上，灵活地扩展和定制自己的功能。

（二）类的定义与使用

ES6 中引入了class关键字来定义类，使得 JavaScript 的面向对象编程更加接近传统的面向对象语言。类的定义包含构造函数、实例方法和静态方法等部分。

构造函数是类的默认方法，通过new命令生成对象实例时自动调用。例如：

bash 复制代码

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
}

const person = new Person("Alice", 25);
console.log(person.name); // 输出: Alice
console.log(person.age); // 输出: 25

在上述代码中，Person类的构造函数接受name和age两个参数，并将它们赋值给对象的属性。

实例方法是定义在类中的普通方法，可以通过类的实例来调用。例如：

bash 复制代码

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    sayHello() {
        console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
    }
}

const person = new Person("Bob", 30);
person.sayHello(); 
// 输出: Hello, my name is Bob and I'm 30 years old.

这里的sayHello方法就是一个实例方法，它可以访问实例的属性name和age。

静态方法是通过在方法前加上static关键字来定义的，它只能通过类本身来调用，而不能通过实例调用。例如：

bash 复制代码

class MathUtils {
    static add(a, b) {
        return a + b;
    }
}

console.log(MathUtils.add(2, 3)); // 输出: 5

在这个例子中，add方法是MathUtils类的静态方法，用于计算两个数的和。

类的继承是面向对象编程中的重要特性，ES6 中通过extends关键字实现。子类可以继承父类的属性和方法，并且可以根据需要重写父类的方法或添加新的方法。例如：

bash 复制代码

class Animal {
    constructor(name) {
        this.name = name;
    }

    makeSound() {
        console.log(`${this.name} makes a sound.`);
    }
}

class Dog extends Animal {
    constructor(name, breed) {
        super(name); // 调用父类Animal的构造函数
        this.breed = breed;
    }

    makeSound() {
        super.makeSound(); // 调用父类Animal的makeSound方法
        console.log(`${this.name} is a ${this.breed} and barks.`);
    }
}

const dog = new Dog("Max", "Labrador");
dog.makeSound();
// 输出:
// Max makes a sound.
// Max is a Labrador and barks.

在Dog类中，通过extends关键字继承了Animal类。在Dog类的构造函数中，首先调用super(name)来初始化父类的name属性，然后再初始化自己特有的breed属性。Dog类重写了makeSound方法，在其中先调用父类的makeSound方法，然后再输出Dog类特有的信息，展示了类的继承和方法重写的用法。

九、ES6 其他特性概览

ES6 还包含其他一些实用特性。例如，二进制和八进制字面量的引入，使开发者能更方便地处理特定数值需求。在循环方面，for...of 可用于遍历可迭代对象（如数组、字符串、Set、Map 等），能直接获取对象中的元素值；而 for...in 主要用于遍历对象的可枚举属性，两者在不同场景下发挥着重要作用。此外，ES6 新增了 Set 和 Map 数据结构，Set 用于存储不重复的值，Map 则以键值对形式存储数据，它们为数据处理提供了更高效、便捷的方式。

十、总结与展望

ES6 作为 JavaScript 语言的重要演进版本，其基础特性在前端开发领域具有不可替代的重要性和广泛的应用价值。通过 let 和 const 关键字，我们能够更加严谨地控制变量的作用域和可变性，减少因变量声明问题导致的错误。模板字符串极大地简化了字符串的处理，使代码更加简洁美观且易于维护。

箭头函数的引入不仅优化了函数的定义方式，还解决了长期以来困扰开发者的 this 指向模糊问题，让函数内部的逻辑更加清晰和可预测。函数参数默认值特性使函数的参数处理更加灵活和健壮，减少了大量冗余的参数判断代码。Spread / Rest 操作符为数组和函数参数的处理提供了便捷的手段，无论是数组的合并、展开还是不定参数函数的定义，都变得轻松自如。解构赋值则让数据的提取和赋值变得更加高效和直观，无论是数组还是对象，都能通过简洁的语法快速获取所需数据。对象超类与类的相关特性进一步完善了 JavaScript 的面向对象编程体系，使代码的复用性和扩展性得到了极大提升。

展望未来，随着前端技术的不断发展，ES6 后续的更多特性以及相关生态也将不断完善和扩展。我们应持续深入学习 ES6 及其后续版本的新特性，不断探索其在前端开发中的更多应用场景，将其与各种前端框架和工具深度融合，进一步提升前端开发的效率和质量，构建出更加高效、稳定和用户友好的前端应用程序。