JavaScript ES6 新特性

1. let 和 const 声明

1.1 let 关键字

let 用于声明局部变量，作用域限制在块级内部。相比 var，它不会提升到函数或全局作用域顶部。

let x = 10;
if (x > 5) {
    let y = x + 5;
    console.log(y); // 15
}
console.log(y); // ReferenceError: y is not defined

1.2 const 关键字

const 声明一个常量，一旦赋值后不能再更改。它也具有块级作用域。

const pi = 3.14;
pi = 3.14159; // TypeError: Assignment to constant variable.

2. 箭头函数（Arrow Functions）

箭头函数使用简洁的语法来创建函数，并且不绑定 this 值。适合回调函数、数组方法中的简短函数。

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

如果只有一个参数，甚至可以省略括号：

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

箭头函数中的 this 绑定

箭头函数没有自己的 this，它会捕获定义时所在上下文的 this 值，因此可以避免 this 绑定问题。

function Counter() {
    this.count = 0;
    setInterval(() => {
        this.count++;
        console.log(this.count);
    }, 1000);
}

let counter = new Counter(); 

3. 模板字符串（Template Strings）

模板字符串使用反引号（`）表示，允许在字符串中嵌入表达式，并支持多行字符串。

const name = "Alice";
const greeting = `Hello, ${name}!`;
console.log(greeting); // Hello, Alice!

多行字符串

const message = `这是一个
多行字符串`;
console.log(message);

4. 解构赋值（Destructuring Assignment）

解构赋值可以从数组或对象中提取值，并将其赋值给变量，使代码更简洁。

数组解构

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

对象解构

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

5. 默认参数（Default Parameters）

默认参数允许在函数定义时为参数指定默认值，在未传入参数或参数为 undefined 时使用默认值。

function greet(name = "Guest") {
    console.log(`Hello, ${name}!`);
}
greet(); // Hello, Guest!

6. 展开运算符（Spread Operator）和剩余参数（Rest Parameters）

展开运算符（Spread）

展开运算符 ... 用于数组和对象，可以展开元素或属性。它在组合、复制数组或对象时特别有用。

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];
console.log(arr2); // [1, 2, 3, 4, 5]

剩余参数（Rest）

剩余参数允许我们将不定数量的参数收集到一个数组中。

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

7. 对象字面量增强（Enhanced Object Literals）

ES6 对象字面量增强包括属性简写、方法简写、计算属性名称等功能，使对象定义更加简洁。

属性简写

const name = "Alice";
const person = { name }; // 等同于 { name: name }

方法简写

const person = {
    sayHello() {
        console.log("Hello!");
    }
};

计算属性名称

const key = "name";
const person = {
    [key]: "Alice"
};

8. 模块化（Modules）

ES6 引入了模块系统，通过 import 和 export 关键字在模块间导入导出功能。我们可以将代码分割为独立的模块，便于复用和维护。

导出模块

// math.js
export function add(a, b) {
    return a + b;
}

导入模块

// main.js
import { add } from './math.js';
console.log(add(2, 3)); // 5

9. Promise 和 异步编程

Promise 是处理异步操作的一种方式，提供了 .then()、.catch() 和 .finally() 方法。

const promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("成功！"), 1000);
});

promise
    .then(result => console.log(result))
    .catch(error => console.log(error));

10. class 和 面向对象编程

ES6 引入了 class 关键字，提供了面向对象编程的语法糖，简化了构造函数和继承。

class Person {
    constructor(name) {
        this.name = name;
    }
    
    greet() {
        console.log(`Hello, ${this.name}`);
    }
}

const alice = new Person("Alice");
alice.greet(); // Hello, Alice

继承

可以使用 extends 关键字继承父类，重用父类的方法和属性。

class Student extends Person {
    constructor(name, grade) {
        super(name); // 调用父类构造函数
        this.grade = grade;
    }
}

const student = new Student("Alice", "A");
console.log(student.name); // Alice
console.log(student.grade); // A