ES6新特性

ES6（也称为 ECMAScript 2015 或 ES2015）引入了许多新的特性和改进，使得 JavaScript 更加强大、简洁和现代化。以下是 ES6 中一些主要的新特性及其详细解释：

1. 块级作用域变量

let 关键字

let 用于声明块级作用域的变量，避免了 var 变量提升带来的问题。

if (true) {
    let x = 10;
}
console.log(x); // ReferenceError: x is not defined

const 关键字

const 用于声明块级作用域的常量，声明后不能重新赋值。

const y = 20;
y = 30; // TypeError: Assignment to constant variable.

2. 模板字符串

使用反引号（`）定义的字符串，可以包含嵌入的表达式和多行文本。

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

3. 箭头函数

箭头函数提供了更简洁的函数定义语法，并且不会绑定 this。

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

// 使用箭头函数访问外部 `this`
function Timer() {
    this.seconds = 0;
    setInterval(() => {
        this.seconds++;
        console.log(this.seconds);
    }, 1000);
}

const timer = new Timer();

4. 解构赋值

解构赋值允许从数组或对象中提取值，并将其赋值给变量。

数组解构

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

对象解构

let { name, age } = { name: 'Bob', age: 25 };
console.log(name); // 输出: Bob
console.log(age); // 输出: 25

5. 默认参数

可以为函数参数提供默认值。

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

greet(); // 输出: Hello, Guest!
greet('Alice'); // 输出: Hello, Alice!

6. 扩展运算符

扩展运算符 ... 用于数组或对象的展开和收集剩余参数。

数组展开

let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5];
console.log(arr2); // 输出: [1, 2, 3, 4, 5]

剩余参数

function sum(...numbers) {
    return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3)); // 输出: 6

7. 对象字面量增强

ES6 提供了简洁的对象属性和方法定义语法。

let x = 1, y = 2;
let obj = { x, y, sayHello() { console.log('Hello'); } };
console.log(obj.x); // 输出: 1
console.log(obj.y); // 输出: 2
obj.sayHello(); // 输出: Hello

8. 模块化

ES6 引入了模块系统，使用 import 和 export 关键字。

导出模块

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

导入模块

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

9. 类（Classes）

ES6 引入了 class 关键字，用于定义类。

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    
    sayHello() {
        console.log(`Hello, my name is ${this.name}`);
    }
}

let person = new Person('Charlie', 30);
person.sayHello(); // 输出: Hello, my name is Charlie

10. 迭代器和生成器

迭代器

迭代器是一种规范，用于定义对象的遍历行为。

let iterable = {
    [Symbol.iterator]() {
        let step = 0;
        return {
            next() {
                if (step < 3) {
                    return { value: step++, done: false };
                } else {
                    return { done: true };
                }
            }
        };
    }
};

for (let value of iterable) {
    console.log(value); // 输出: 0, 1, 2
}

生成器

生成器函数可以控制函数的执行流程，使用 function* 语法定义。

function* generator() {
    yield 1;
    yield 2;
    yield 3;
}

let gen = generator();
console.log(gen.next().value); // 输出: 1
console.log(gen.next().value); // 输出: 2
console.log(gen.next().value); // 输出: 3

11. Promise

Promise 提供了一种用于处理异步操作的新方式。

let promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('Success!');
    }, 1000);
});

promise.then(result => {
    console.log(result); // 输出: Success!
}).catch(error => {
    console.error(error);
});

12. Symbol

Symbol 是一种新的原始数据类型，表示唯一的标识符。

let sym1 = Symbol('description');
let sym2 = Symbol('description');
console.log(sym1 === sym2); // 输出: false

总结

ES6 引入了许多新特性，使得 JavaScript 更加现代化和功能丰富。这些新特性极大地提高了代码的可读性、可维护性和开发效率。