ES6 概述

ES6 是 JavaScript 诞生以来最大的一次版本升级。

在它之前，JavaScript 写起来有很多”别扭”的地方；在它之后，JavaScript 正式从一个”脚本语言”走向了”工程语言”。

这篇先搞清三个问题：ES6 是什么、为什么要用、能带来什么。

ES6 是什么

先理清几个名字，后面看文档不会懵：

你可以把 ECMAScript 理解成”考纲”，JavaScript 是”考试”，浏览器和 Node.js 都得按考纲来。

为什么是 2015？其实 2015 年之后 ES 基本每年发布一个新版本（ES2016、ES2017……）。但 ES6 是断层式的大升级，影响最大，所以大家习惯拿”ES6”当现代 JS 的代名词，本系列的实用语法也大多以 ES6 为基础。

一句话：现在的 JavaScript 已经在大量使用 ES6 语法了。

打开任意一个现代前端项目（Vue、React），let、const、箭头函数、解构赋值、Promise、import/export 随处可见。如果你只会 ES5，会面临三个现实问题：

学完 ES6，你会发现自己能”看懂”世界上的主流 JavaScript 代码了。

看看 ES6 之前写 JS 有多别扭，才能真正体会到它的价值。

ES5 里只有 var，它没有”块级作用域”，容易造成变量泄漏和覆盖：

// ES5：var 没有块级作用域，if 里的 i 会"冲出"到大括号外
for (var i = 0; i < 3; i++) {
  // 循环体
}
console.log(i); // 3 —— i 竟然泄漏出来了！

而 ES6 用 let/const 彻底解决了这个问题。

// ES5：多个变量拼接，引号和加号满天飞
var name = '小明';
console.log('你好，' + name + '，欢迎回来！');

ES6 的模板字符串（反引号）直接写成这样：

const name = '小明';
console.log(`你好，${name}，欢迎回来！`);

// ES5：从对象/数组里取数据，得一个变量一行
var user = { name: '小明', age: 18 };
var name = user.name;
var age  = user.age;

ES6 的解构赋值：

const user = { name: '小明', age: 18 };
const { name, age } = user;  // 一行同时取出两个变量

ES5 时代异步只能写回调，逻辑一多就层层嵌套，人称”回调地狱”：

// ES5：嵌套层层加深，读起来很痛苦（示意）
asyncFunc1(function () {
  asyncFunc2(function () {
    asyncFunc3(function () {
      // ...继续嵌套
    });
  });
});

ES6 引入 Promise，后来的 async/await 更是让异步代码像同步一样平直。