ES6教程

简介

ES6（又称 ECMAScript 2015）是 JavaScript 的一个重要的更新版本，引入了很多新的语法特性和 API。

新特性

ES6 引入了许多新的语言特性，包括以下：

let 和 const 命令

let 和 const 命令用来声明变量。let 声明的变量是块级作用域，而 const 声明的是常量。

let a = 1;
const b = 2;

箭头函数

箭头函数是一种更简洁的函数定义方式：

// 普通函数定义方式
function add(a, b) {
  return a + b;
}

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

模板字符串

模板字符串可以使用 ${} 来插入变量。它还可以使用多行字符串。

const name = 'Alice';
const message = `Hello, ${name}!`;

// 多行字符串
const html = `<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Oranges</li>
</ul>`;

解构赋值

解构赋值可以一次性将多个变量赋值为一个对象的属性：

const person = {
  name: 'Alice',
  age: 18,
  gender: 'female',
};

const { name, age } = person;

扩展运算符

扩展运算符可以用来展开数组或对象，使它们的元素可以作为参数传递给函数：

const nums = [1, 2, 3];

const sum = (a, b, c) => a + b + c;
sum(...nums); // 6

const person = {
  name: 'Bob',
  age: 20,
};

const newPerson = { ...person, gender: 'male' };

for...of 循环

for...of 循环可以遍历数组、字符串、Set、Map 等可迭代对象的元素。

const nums = [1, 2, 3];

for (const num of nums) {
  console.log(num);
}

Promise

Promise 是一种处理异步操作的设计模式，可以避免回调地狱。

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data');
    }, 1000);
  });
};

fetchData()
  .then((data) => console.log(data))
  .catch((error) => console.error(error));

async/await

async/await 可以让异步操作更加简洁明了。

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data');
    }, 1000);
  });
};

const getData = async () => {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
};

getData();

更多 ES6 新特性，请参考阮一峰的 ECMAScript 6 入门教程。

总结

ES6 可以让 JavaScript 代码更加简洁、易读、易维护。它的引入是 JavaScript 社区的一大进步。