1. 简介

什么是ES6？

ES6（ECMAScript 2015）是JavaScript的第6个版本，是一种由ECMA国际标准化组织发布的标准。它引入了许多新的语言特性和改进，为JavaScript开发者提供了更强大、更方便的编程功能。

ES6的主要特性

ES6引入了许多新的语言特性和改进，包括块级作用域、箭头函数、类、模块化、解构赋值、Promise对象等。它还对语法和标准库进行了修正和扩展，提供了更好的开发体验和可读性。

2. 变量声明和解构赋值

let和const关键字

在ES6中，可以使用let和const关键字来声明变量。let声明的变量具有块级作用域，而const声明的变量是常量，不可重新赋值。

let x = 5; // 声明一个可变变量
const y = 10; // 声明一个不可变变量
​
x = 15; // 可以重新赋值
y = 20; // 报错，常量不可重新赋值

解构赋值

解构赋值是一种方便的语法，可以从数组或对象中提取值并赋给变量。

// 数组解构赋值
let [a, b, c] = [1, 2, 3];
console.log(a); // 输出 1
console.log(b); // 输出 2
console.log(c); // 输出 3
​
// 对象解构赋值
let { name, age } = { name: "John", age: 30 };
console.log(name); // 输出 "John"
console.log(age); // 输出 30

3. 箭头函数和扩展语法

箭头函数

箭头函数是一种更简洁的函数定义方式，可以使用更短的语法来定义匿名函数。

// 传统函数定义
function sum(a, b) {
    return a + b;
}
​
// 箭头函数定义
let sum = (a, b) => a + b;

箭头函数还具有词法绑定的this，它继承自外部作用域。

扩展语法

ES6引入了扩展语法，可以方便地操作数组和对象。

// 扩展数组
let array = [1, 2, 3];
let newArray = [...array, 4, 5]; // 使用扩展语法添加元素
​
// 扩展对象
let obj1 = { x: 1, y: 2 };
let obj2 = { ...obj1, z: 3 }; // 使用扩展语法添加属性
​
console.log(newArray); // 输出 [1, 2, 3, 4, 5]
console.log(obj2); // 输出 { x: 1, y: 2, z: 3 }

4. 类和模块

类

ES6引入了类的概念，可以更方便地创建对象和实现面向对象的编程。

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
​
    greet() {
        console.log(`Hello, ${this.name}`);
    }
}
​
let person = new Person("John", 30);
person.greet(); // 输出 "Hello, John"

模块化

ES6支持模块化，可以将代码拆分成多个模块，并使用import和export关键字在模块之间进行导入和导出。

// math.js 模块
export function add(a, b) {
    return a + b;
}
​
export function subtract(a, b) {
    return a - b;
}
​
// main.js 模块
import { add, subtract } from './math.js';
​
console.log(add(5, 2)); // 输出 7
console.log(subtract(5, 2)); // 输出 3

5. 异步编程

Promise对象

ES6引入了Promise对象，用于更好地处理异步操作。

function fetchData() {
    return new Promise((resolve, reject) => {
        // 异步操作
        setTimeout(() => {
            if (/* 异步操作成功 */) {
                resolve(data); // 异步操作成功时调用 resolve
            } else {
                reject(error); // 异步操作失败时调用 reject
            }
        }, 1000);
    });
}
​
fetchData()
    .then(data => {
        // 异步操作成功的处理逻辑
    })
    .catch(error => {
        // 异步操作失败的处理逻辑
    });

异步函数

异步函数是使用async关键字定义的函数，可以更简单地编写和处理异步操作。

async function fetchData() {
    try {
        let data = await fetchDataAsync(); // 等待异步操作完成
        // 异步操作成功的处理逻辑
    } catch (error) {
        // 异步操作失败的处理逻辑
    }
}
​
fetchData();

6. 实战案例

待办事项应用

下面是一个简单的待办事项应用，使用ES6的类、模板字符串和箭头函数等特性：

class TodoApp {
    constructor() {
        this.todos = [];
    }
​
    addTodoItem(item) {
        this.todos.push(item);
    }
​
    displayTodoList() {
        this.todos.forEach(item => {
            console.log(`- ${item}`);
        });
    }
}
​
let app = new TodoApp();
app.addTodoItem("Buy groceries");
app.addTodoItem("Do laundry");
app.displayTodoList();

简单的购物车

下面是一个简单的购物车示例，使用ES6的箭头函数和数组扩展语法：

class ShoppingCart {
    constructor() {
        this.items = [];
    }
​
    addItem(name, price) {
        this.items.push({ name, price });
    }
​
    calculateTotal() {
        let total = this.items.reduce((sum, item) => sum + item.price, 0);
        console.log(`Total: $${total.toFixed(2)}`);
    }
}
​
let cart = new ShoppingCart();
cart.addItem("Shirt", 20);
cart.addItem("Pants", 30);
cart.calculateTotal();