ES6 教程

ES6，也被称为 ECMAScript 2015，是 JavaScript 语言的一次重大更新。本教程将帮助程序员快速掌握 ES6 的重要语法和概念。

目录

1. let 和 const
2. 箭头函数
3. 模板字面量
4. 展开语法
5. 解构赋值
6. 类
7. 模块化

let 和 const

ES6 新增了两个关键字：let 和 const，用于声明变量。与 var 不同，let 和 const 声明的变量有块级作用域。

let 声明变量时可以修改其值，而 const 声明的变量是常量，其值不能修改。

let x = 10;
if (true) {
  let x = 20;
  console.log(x); // 输出 20
}
console.log(x); // 输出 10

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

箭头函数

箭头函数是一种 Lambda 表达式，用于创建匿名函数。箭头函数的语法更加简洁，同时还支持绑定上下文。

// ES5
var multiply = function(x, y) {
  return x * y;
};

// ES6
const multiply = (x, y) => x * y;

console.log(multiply(2, 3)); // 输出 6

模板字面量

模板字面量可以包含嵌入的表达式和变量。使用反引号 (`) 包围的文本即可创建模板字面量。

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

展开语法

展开语法可以将一个数组或对象展开为另一个数组或对象。在展开语法前面使用三个点 (...)。

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

const obj1 = { x: 1, y: 2 };
const obj2 = { z: 3 };
const combined = { ...obj1, ...obj2 };
console.log(combined); // 输出 { x: 1, y: 2, z: 3 }

解构赋值

解构赋值可以从数组和对象中提取值，然后赋给变量。可以用于快速获取和使用复杂数据结构中的值。

const person = { name: 'Bob', age: 30 };
const { name, age } = person;
console.log(name, age); // 输出 "Bob 30"

const numbers = [1, 2, 3, 4, 5];
const [first, second, ...rest] = numbers;
console.log(first, second, rest); // 输出 "1 2 [3, 4, 5]"

类

ES6 引入了类（class）的概念，用于创建对象。类是一种模板，用于创建具有相同属性和方法的对象。

class Rectangle {
  constructor(width, height) {
    this.width = width;
    this.height = height;
  }

  get area() {
    return this.width * this.height;
  }

  get perimeter() {
    return 2 * (this.width + this.height);
  }
}

const rect = new Rectangle(10, 20);
console.log(rect.area); // 输出 200
console.log(rect.perimeter); // 输出 60

模块化

ES6 引入了模块化的概念，用于将代码分割成可重用的模块。可以使用 import 和 export 关键字来创建和使用模块。

// math.js
export function add(x, y) {
  return x + y;
}

export function subtract(x, y) {
  return x - y;
}

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

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

结语

ES6 的语法和概念较多，本教程只是简要介绍了其中的一部分。对于更深入的了解，可以查看 ECMAScript 6 入门 等教程。