JavaScript ES6+ 新特性完全指南

JavaScript ES6（ECMAScript 2015）带来了许多革命性的新特性，彻底改变了JavaScript的编程方式。本文将详细介绍ES6及更高版本的重要新特性。

1. 箭头函数

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

// 传统函数
function add(a, b) {
    return a + b;
}

// 箭头函数
const add = (a, b) => a + b;

// 单参数可省略括号
const square = x => x * x;
                

2. 解构赋值

解构赋值允许从数组或对象中提取值到变量中：

// 数组解构
const [first, second, ...rest] = [1, 2, 3, 4, 5];

// 对象解构
const { name, age } = { name: 'John', age: 30 };

// 重命名变量
const { name: userName, age: userAge } = user;
                

3. Promise和Async/Await

Promise和Async/Await使异步编程更加优雅：

// 使用Promise
fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error(error));

// 使用Async/Await
async function getData() {
    try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error(error);
    }
}
                

4. 模块化

ES6引入了原生的模块系统：

// 导出
export const PI = 3.14159;
export function calculateArea(radius) {
    return PI * radius * radius;
}
export default class Circle { /* ... */ }

// 导入
import Circle, { PI, calculateArea } from './circle.js';
                

5. 模板字符串

模板字符串提供了更好的字符串插值和多行字符串支持：

const name = 'John';
const age = 30;

// 传统方式
const message = 'Hello, ' + name + '! You are ' + age + ' years old.';

// 模板字符串
const message = `Hello, ${name}! You are ${age} years old.`;

// 多行字符串
const multiLine = `
    This is
    a multi-line
    string
`;