第10章_ES6入门

授课语音

ES6基本语法与使用

ECMAScript 6（简称ES6），也称为ECMAScript 2015，是JavaScript的一个重要版本，引入了许多新特性，极大地增强了语言的功能性和可维护性。ES6使得JavaScript的编程风格更加现代化、简洁且高效。

1. let 和 const 关键字

在ES6之前，JavaScript中只有 var 用于声明变量，但 var 有一些缺点，比如作用域不够清晰。ES6引入了 let 和 const 来解决这个问题。

1.1 let

let 用于声明变量，其作用域是块级作用域，即只在当前代码块内有效。

代码案例：`let` 示例

function example() {
    let x = 10;
    if (true) {
        let x = 20; // 这块作用域内的 x 不会影响外部的 x
        console.log(x); // 输出 20
    }
    console.log(x); // 输出 10
}

example();

示例解析：

let 声明的变量 x 是块级作用域，所以在不同的代码块中声明的 x 互不干扰。

1.2 const

const 用于声明常量，声明后变量的值不能再改变。const 也具有块级作用域。

代码案例：`const` 示例

const PI = 3.14;
PI = 3.14159;  // 这会导致错误，因为 PI 是常量

示例解析：

const 声明的变量不能被重新赋值。

2. 箭头函数（Arrow Functions）

箭头函数是ES6的一项新特性，提供了一种更加简洁的方式来定义函数。箭头函数可以省略 function 关键字，且没有自己的 this 值，this 值由外部作用域决定。

2.1 箭头函数的基本语法

const sum = (a, b) => a + b;
console.log(sum(2, 3));  // 输出 5

示例解析：

箭头函数 sum 的语法比传统的函数表达式更简洁。
如果只有一个参数，可以省略括号。

const square = x => x * x;
console.log(square(4));  // 输出 16

2.2 没有 `this` 绑定

箭头函数没有自己的 this，它继承外部作用域的 this。

function Timer() {
    this.seconds = 0;
    setInterval(() => {
        this.seconds++;
        console.log(this.seconds);  // 输出 1, 2, 3 ...
    }, 1000);
}

const timer = new Timer();

示例解析：

使用箭头函数时，this 绑定到外部作用域（即 Timer 实例），所以它可以正确地访问 this.seconds。

3. 模板字符串（Template Literals）

ES6引入了模板字符串，使得字符串的拼接变得更加简单。模板字符串使用反引号（`）括起来，可以在其中插入变量或表达式。

3.1 基本语法

let name = "Tom";
let greeting = `Hello, ${name}!`;
console.log(greeting);  // 输出 Hello, Tom!

示例解析：

通过 ${} 语法将变量或表达式插入到字符串中，避免了传统的字符串拼接方式。

3.2 多行字符串

模板字符串还可以实现多行字符串。

let message = `这是第一行
这是第二行
这是第三行`;
console.log(message);

示例解析：

多行字符串不需要额外的 \n 或字符串连接符，直接通过换行即可。

4. 解构赋值（Destructuring Assignment）

解构赋值是ES6中提供的一种语法，可以快速提取数组或对象的值，并赋给变量。

4.1 数组解构赋值

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

示例解析：

使用 [a, b] 直接从数组中提取值，并赋给对应的变量。

4.2 对象解构赋值

let person = { name: "Alice", age: 25 };
let { name, age } = person;
console.log(name);  // 输出 Alice
console.log(age);   // 输出 25

示例解析：

使用 { name, age } 直接从对象中提取属性，并赋给对应的变量。

5. 类（Classes）

ES6引入了类的概念，提供了一个更简洁和清晰的面向对象编程方式。ES6的类语法是基于原型的，和传统的面向对象编程语言相似。

5.1 类的定义

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

    speak() {
        console.log(`${this.name} makes a noise.`);
    }
}

let dog = new Animal('Dog');
dog.speak();  // 输出 Dog makes a noise.

示例解析：

使用 class 关键字定义类，构造函数通过 constructor 定义，方法通过类内部直接定义。
实例化类时使用 new 关键字。

5.2 继承

ES6的类支持继承，可以通过 extends 关键字实现继承。

class Dog extends Animal {
    speak() {
        console.log(`${this.name} barks.`);
    }
}

let dog = new Dog('Buddy');
dog.speak();  // 输出 Buddy barks.

示例解析：

通过 extends 继承 Animal 类并重写 speak 方法，实现多态。

6. 模块化（Modules）

ES6引入了模块化机制，可以将代码拆分成多个文件，方便管理和重用。模块可以通过 import 和 export 来导入和导出内容。

6.1 导出（Export）

// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

6.2 导入（Import）

// main.js
import { add, subtract } from './math.js';

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

示例解析：

通过 export 导出模块中的函数，使用 import 在其他文件中引入。

7. Promise

ES6引入了 Promise 对象，用于处理异步操作，避免回调地狱，使代码更加简洁易懂。

7.1 基本语法

let promise = new Promise((resolve, reject) => {
    let success = true;
    if(success) {
        resolve("操作成功");
    } else {
        reject("操作失败");
    }
});

promise.then((message) => {
    console.log(message);  // 输出 操作成功
}).catch((message) => {
    console.log(message);  // 输出 操作失败
});