ECMAScript 6 简介

# ECMAScript 6 简介

ECMAScript 6.0（简称 ES6）是 JavaScript 语言的下一代标准，于 2015 年 6 月正式发布。ES6 的目标是使 JavaScript 语言能够用于编写复杂的大型应用程序，成为企业级开发语言。

# 1. ECMAScript 和 JavaScript 的关系

ECMAScript 和 JavaScript 之间的关系是一个常见的问题。要理解它们的关系，需要回顾一下历史。1996 年 11 月，JavaScript 的创造者 Netscape 公司将 JavaScript 提交给标准化组织 ECMA，希望这种语言能够成为国际标准。次年，ECMA 发布了 262 号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言命名为 ECMAScript。这一版本就是 1.0 版。

尽管该标准是为 JavaScript 语言制定的，但之所以不直接称其为 JavaScript，有两个原因：首先是商标问题，Java 是 Sun 公司的商标，根据授权协议，只有 Netscape 公司可以合法使用 JavaScript 这个名字，同时 JavaScript 本身也被 Netscape 公司注册为商标；其次是为了体现这门语言的制定者是 ECMA 而非 Netscape，这有助于保证语言的开放性和中立性。

因此，ECMAScript 是 JavaScript 的规格，而 JavaScript 是 ECMAScript 的一种实现（其他 ECMAScript 方言还包括 JScript 和 ActionScript）。在日常场合，ECMAScript 和 JavaScript 这两个词是可以互换使用的。

# 2. ES6 与 ECMAScript 2015 的关系

ECMAScript 2015（简称 ES2015）这个术语也经常出现。它与 ES6 是什么关系呢？

2011 年，ECMAScript 5.1 版发布后，开始制定 6.0 版。因此，ES6 原本指的是 JavaScript 语言的下一个版本。然而，由于这个版本引入的语法功能太多，而且制定过程中有很多组织和个人不断提交新功能，不可能在一个版本中包括所有将要引入的功能。于是，标准制定者决定让标准升级成为常规流程，标准委员会每年 6 月发布一次正式版本，版本号以年份标记。

ES6 的第一个版本在 2015 年 6 月发布，正式名称为《ECMAScript 2015 标准》（简称 ES2015）。2016 年 6 月发布了小幅修订的《ECMAScript 2016 标准》（简称 ES2016），这个版本可以看作是 ES6.1 版，因为两者差异非常小。根据计划，2017 年 6 月发布 ES2017 标准。

因此，ES6 是一个历史名词，也是一个泛指，涵盖了 ES2015、ES2016、ES2017 等等，而 ES2015 是正式名称，特指该年发布的正式版本。本书中提到 ES6 的地方，一般是指 ES2015 标准，但有时也泛指“下一代 JavaScript 语言”。

# 3. 语法提案的批准流程

任何人都可以向标准委员会（TC39 委员会）提案，要求修改语言标准。一种新的语法从提案到变成正式标准，需要经历五个阶段，每个阶段的变动都需要由 TC39 委员会批准。

Stage 0 - Strawman（展示阶段）
Stage 1 - Proposal（征求意见阶段）
Stage 2 - Draft（草案阶段）
Stage 3 - Candidate（候选人阶段）
Stage 4 - Finished（定案阶段）

一个提案只要能进入 Stage 2，就差不多肯定会包括在以后的正式标准里面。ECMAScript 当前的所有提案可以在 TC39 的官方网站 GitHub.com/tc39/ecma262 (opens new window) 查看。

本书的写作目标之一，是跟踪 ECMAScript 语言的最新进展，介绍 5.1 版本以后所有的新语法。

# 4. ECMAScript 的历史

ES6 从开始制定到最后发布，整整用了 15 年。ECMAScript 1.0 于 1997 年发布，接下来的两年，连续发布了 ECMAScript 2.0（1998 年 6 月）和 ECMAScript 3.0（1999 年 12 月）。3.0 版是一个巨大的成功，成为通行标准，奠定了 JavaScript 语言的基本语法。2000 年，ECMAScript 4.0 开始酝酿，但由于版本太激进，导致标准委员会的一些成员不愿意接受，最终中止开发。

2008 年，由于对下一个版本功能的分歧，ECMAScript 4.0 被分为 ECMAScript 3.1 和 Harmony 项目。ECMAScript 3.1 后来改名为 ECMAScript 5，并于 2009 年 12 月正式发布。Harmony 项目则演变成 ECMAScript 6。

2011 年 6 月，ECMAScript 5.1 版发布，并成为 ISO 国际标准（ISO/IEC 16262:2011）。2013 年 3 月，ECMAScript 6 草案冻结，不再添加新功能。2013 年 12 月，ECMAScript 6 草案发布，随后是 12 个月的讨论期。2015 年 6 月，ECMAScript 6 正式通过，成为国际标准。

从 2000 年算起，ECMAScript 6 的制定过程整整用了 15 年。

# 5. 部署进度

各大浏览器的最新版本，对 ES6 的支持情况可以在 kangax.github.io/compat-table/es6/ (opens new window) 查看。随着时间的推移，ES6 的支持度已经越来越高，超过 90% 的 ES6 语法特性已经实现。

Node 是 JavaScript 的服务器运行环境（runtime），对 ES6 的支持度更高。除了那些默认开启的功能外，还有一些语法功能已经实现但默认没有开启。使用下面的命令，可以查看 Node 已经实现的 ES6 特性。

// 在 Linux 和 Mac 环境下，使用以下命令查看 Node 已实现的 ES6 特性
$ node --v8-options | grep harmony

// 在 Windows 环境下，使用以下命令查看 Node 已实现的 ES6 特性
$ node --v8-options | findstr harmony

1
2
3
4
5

我写了一个工具 ES-Checker (opens new window)，用来检查各种运行环境对 ES6 的支持情况。访问 ruanyf.github.io/es-checker (opens new window)，可以看到您的浏览器对 ES6 的支持程度。运行下面的命令，可以查看你正在使用的 Node 环境对 ES6 的支持程度。

// 全局安装 es-checker
$ npm install -g es-checker

// 运行 es-checker 查看 Node 环境对 ES6 的支持情况
$ es-checker

=========================================
Passes 24 feature Detections
Your runtime supports 57% of ECMAScript 6
=========================================

1
2
3
4
5
6
7
8
9
10

# 6. Babel 转码器

Babel (opens new window) 是一个广泛使用的 ES6 转码器，可以将 ES6 代码转为 ES5 代码，从而在现有环境执行。这意味着，你可以用 ES6 的方式编写程序，又不用担心现有环境是否支持。下面是一个例子。

// 转码前：使用箭头函数
input.map(item => item + 1);

// 转码后：Babel 将其转为普通函数
input.map(function (item) {
  return item + 1;
});

1
2
3
4
5
6
7

上面的原始代码用了箭头函数，Babel 将其转为普通函数，就能在不支持箭头函数的 JavaScript 环境执行。

# 安装 Babel

下面的命令在项目目录中，安装 Babel 核心模块。

$ npm install --save-dev @babel/core

# 配置文件 `.babelrc`

Babel 的配置文件是 .babelrc，存放在项目的根目录下。使用 Babel 的第一步，就是配置这个文件。

该文件用来设置转码规则和插件，基本格式如下：

{
  "presets": [],
  "plugins": []
}

1
2
3
4

presets 字段设定转码规则，官方提供以下的规则集，你可以根据需要安装：

# 最新转码规则
$ npm install --save-dev @babel/preset-env

# React 转码规则
$ npm install --save-dev @babel/preset-react

1
2
3
4
5

然后，将这些规则加入 .babelrc：

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": []
}

1
2
3
4
5
6
7

注意，以下所有 Babel 工具和模块的使用，都必须先写好 .babelrc。

# 命令行转码

Babel 提供命令行工具 @babel/cli，用于命令行转码。

安装命令如下：

$ npm install --save-dev @babel/cli

基本用法如下：

# 转码结果输出到标准输出
$ npx babel example.js

# 转码结果写入一个文件
# --out-file 或 -o 参数指定输出文件
$ npx babel example.js --out-file compiled.js
# 或者
$ npx babel example.js -o compiled.js

# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
$ npx babel src --out-dir lib
# 或者
$ npx babel src -d lib

# -s 参数生成 source map 文件
$ npx babel src -d lib -s

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# babel-node

@babel/node 模块的 babel-node 命令，提供一个支持 ES6 的 REPL 环境。它支持 Node 的 REPL 环境的所有功能，而且可以直接运行 ES6 代码。

首先，安装这个模块：

$ npm install --save-dev @babel/node

然后，执行 babel-node 进入 REPL 环境：

$ npx babel-node
> (x => x * 2)(1)
2

1
2
3

babel-node 命令可以直接运行 ES6 脚本。将上面的代码放入脚本文件 es6.js，然后直接运行：

# es6.js 的代码
# console.log((x => x * 2)(1));
$ npx babel-node es6.js
2

1
2
3
4

# @babel/register 模块

@babel/register 模块改写 require 命令，为它加上一个钩子。此后，每当使用 require 加载 .js、.jsx、.es 和 .es6 后缀名的文件，就会先用 Babel 进行转码。

$ npm install --save-dev @babel/register

使用时，必须首先加载 @babel/register：

// index.js
require('@babel/register');
require('./es6.js');

1
2
3

然后，就不需要手动对 index.js 转码了：

$ node index.js
2

1
2

需要注意的是，@babel/register 只会对 require 命令加载的文件转码，而不会对当前文件转码。另外，由于它是实时转码，所以只适合在开发环境使用。

# babel API

如果某些代码需要调用 Babel 的 API 进行转码，就要使用 @babel/core 模块。

var babel = require('@babel/core');

// 字符串转码
babel.transform('code();', options);
// => { code, map, ast }

// 文件转码（异步）
babel.transformFile('filename.js', options, function(err, result) {
  result; // => { code, map, ast }
});

// 文件转码（同步）
babel.transformFileSync('filename.js', options);
// => { code, map, ast }

// Babel AST 转码
babel.transformFromAst(ast, code, options);
// => { code, map, ast }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

配置对象 options 可以参看官方文档 http://babeljs.io/docs/usage/options/ (opens new window)。

下面是一个例子：

var es6Code = 'let x = n => n + 1';
var es5Code = require('@babel/core')
  .transform(es6Code, {
    presets: ['@babel/env']
  })
  .code;

console.log(es5Code);
// '"use strict";\n\nvar x = function x(n) {\n  return n + 1;\n};'

1
2
3
4
5
6
7
8
9

上面代码中，transform 方法的第一个参数是一个字符串，表示需要被转换的 ES6 代码，第二个参数是转换的配置对象。

# @babel/polyfill

Babel 默认只转换新的 JavaScript 句法（syntax），而不转换新的 API，比如 Iterator、Generator、Set、Map、Proxy、Reflect、Symbol、Promise 等全局对象，以及一些定义在全局对象上的方法（比如 Object.assign）都不会转码。

举例来说，ES6 在 Array 对象上新增了 Array.from 方法。Babel 就不会转码这个方法。如果想让这个方法运行，必须使用 @babel/polyfill，为当前环境提供一个垫片。

安装命令如下：

$ npm install --save-dev @babel/polyfill

然后，在脚本头部，加入如下一行代码：

import '@babel/polyfill';
// 或者
require('@babel/polyfill');

1
2
3

Babel 默认不转码的 API 非常多，详细清单可以查看 babel-plugin-transform-runtime 模块的 definitions.js (opens new window) 文件。

# 浏览器环境

Babel 也可以用于浏览器环境，使用 @babel/standalone 模块提供的浏览器版本，将其插入网页。

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
// 你的 ES6 代码
</script>

1
2
3
4

注意，网页实时将 ES6 代码转为 ES5，对性能会有影响。生产环境需要加载已经转码完成的脚本。

Babel 提供一个 REPL 在线编译器 (opens new window)，可以在线将 ES6 代码转为 ES5 代码。转换后的代码，可以直接作为 ES5 代码插入网页运行。

通过这些步骤，你可以在各种环境下使用 Babel，将 ES6 代码转码为 ES5，以便在现有环境中运行。

# 7. Traceur 转码器

Google 公司的 Traceur (opens new window) 转码器，可以将 ES6 代码转为 ES5 代码。

# 直接插入网页

Traceur 允许将 ES6 代码直接插入网页。首先，必须在网页头部加载 Traceur 库文件。

<!-- 加载 Traceur 库文件 -->
<script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script>
<script src="https://google.github.io/traceur-compiler/bin/BrowserSystem.js"></script>
<script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script>
<!-- 加载用户脚本，支持 ES6 语法 -->
<script type="module">
  import './Greeter.js'; // 导入 Greeter.js 模块，可以在该模块中编写 ES6 代码
</script>

1
2
3
4
5
6
7
8

上面代码中，一共有 4 个 script 标签。第一个是加载 Traceur 的库文件，第二个和第三个是将这个库文件用于浏览器环境，第四个则是加载用户脚本，这个脚本里面可以使用 ES6 代码。

注意，第四个 script 标签的 type 属性的值是 module，而不是 text/javascript。这是 Traceur 编译器识别 ES6 代码的标志，编译器会自动将所有 type=module 的代码编译为 ES5，然后再交给浏览器执行。

除了引用外部 ES6 脚本，也可以直接在网页中放置 ES6 代码。

<script type="module">
  class Calc {
    constructor() {
      console.log('Calc constructor'); // 构造函数，打印 'Calc constructor'
    }
    add(a, b) {
      return a + b; // 加法方法，返回 a 和 b 的和
    }
  }

  var c = new Calc(); // 创建 Calc 的实例
  console.log(c.add(4,5)); // 调用 add 方法，打印结果 9
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13

正常情况下，上面代码会在控制台打印出 9。

如果想对 Traceur 的行为有精确控制，可以采用下面参数配置的写法。

<script>
  // 创建 System 对象
  window.System = new traceur.runtime.BrowserTraceurLoader();
  // 设置一些实验性选项
  var metadata = {
    traceurOptions: {
      experimental: true, // 启用实验性功能
      properTailCalls: true, // 启用尾调用优化
      symbols: true, // 启用 Symbol 类型支持
      arrayComprehension: true, // 启用数组推导
      asyncFunctions: true, // 启用异步函数
      asyncGenerators: true, // 启用异步生成器
      forOn: true, // 启用 for-on 循环
      generatorComprehension: true // 启用生成器推导
    }
  };
  // 加载模块
  System.import('./myModule.js', {metadata: metadata}).catch(function(ex) {
    console.error('Import failed', ex.stack || ex); // 捕获加载失败的错误
  });
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

上面代码中，首先生成 Traceur 的全局对象 window.System，然后 System.import 方法可以用来加载 ES6。加载的时候，需要传入一个配置对象 metadata，该对象的 traceurOptions 属性可以配置支持 ES6 功能。如果设为 experimental: true，就表示除了 ES6 以外，还支持一些实验性的新功能。

# 在线转换

Traceur 也提供一个在线编译器 (opens new window)，可以在线将 ES6 代码转为 ES5 代码。转换后的代码，可以直接作为 ES5 代码插入网页运行。

上面的例子转为 ES5 代码运行，就是下面这个样子。

<script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script>
<script src="https://google.github.io/traceur-compiler/bin/BrowserSystem.js"></script>
<script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script>
<script>
$traceurRuntime.ModuleStore.getAnonymousModule(function() {
  "use strict";

  var Calc = function Calc() {
    console.log('Calc constructor'); // 构造函数，打印 'Calc constructor'
  };

  // 定义 Calc 类的 add 方法
  ($traceurRuntime.createClass)(Calc, {
    add: function(a, b) {
      return a + b; // 返回 a 和 b 的和
    }
  }, {});

  var c = new Calc(); // 创建 Calc 的实例
  console.log(c.add(4, 5)); // 调用 add 方法，打印结果 9
  return {};
});
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 命令行转换

作为命令行工具使用时，Traceur 是一个 Node 的模块，首先需要用 npm 安装。

$ npm install -g traceur

安装成功后，就可以在命令行下使用 Traceur 了。

Traceur 直接运行 ES6 脚本文件，会在标准输出显示运行结果，以前面的 calc.js 为例。

$ traceur calc.js
Calc constructor
9

1
2
3

如果要将 ES6 脚本转为 ES5 并保存，要采用下面的写法。

$ traceur --script calc.es6.js --out calc.es5.js

上面代码的 --script 选项表示指定输入文件，--out 选项表示指定输出文件。

为了防止有些特性编译不成功，最好加上 --experimental 选项。

$ traceur --script calc.es6.js --out calc.es5.js --experimental

命令行下转换生成的文件，就可以直接放到浏览器中运行。

# Node 环境的用法

Traceur 的 Node 用法如下（假定已安装 traceur 模块）。

var traceur = require('traceur'); // 引入 traceur 模块
var fs = require('fs'); // 引入 fs 模块，用于文件操作

// 读取 ES6 文件内容，并转换为字符串
var contents = fs.readFileSync('es6-file.js').toString();

// 使用 Traceur 转码
var result = traceur.compile(contents, {
  filename: 'es6-file.js', // 文件名
  sourceMap: true, // 生成 source map
  modules: 'commonjs' // 使用 commonjs 模块系统
});

if (result.error) {
  throw result.error; // 如果转换出错，抛出错误
}

// result 对象的 js 属性是转换后的 ES5 代码
fs.writeFileSync('out.js', result.js); // 将转换后的 ES5 代码写入 out.js 文件
// sourceMap 属性对应生成的 source map 文件
fs.writeFileSync('out.js.map', result.sourceMap); // 将 source map 写入 out.js.map 文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

上面的代码中，首先读取 es6-file.js 文件内容，并将其转换为字符串。然后使用 Traceur 的 compile 方法进行转码。转码后的结果保存在 result 对象的 js 属性中，将其写入 out.js 文件。同时，sourceMap 属性对应生成的 source map 文件，写入 out.js.map 文件。

通过这些步骤，你可以使用 Traceur 将 ES6 代码转换为 ES5 代码，并在不同环境中执行这些转换后的代码。

编辑此页

let 和 const 命令→

ECMAScript 6 简介

# ECMAScript 6 简介

# 1. ECMAScript 和 JavaScript 的关系

# 2. ES6 与 ECMAScript 2015 的关系

# 3. 语法提案的批准流程

# 4. ECMAScript 的历史

# 5. 部署进度

# 6. Babel 转码器

# 安装 Babel

# 配置文件 .babelrc

# 命令行转码

# babel-node

# @babel/register 模块

# babel API

# @babel/polyfill

# 浏览器环境

# 7. Traceur 转码器

# 直接插入网页

# 在线转换

# 命令行转换

# Node 环境的用法

# 配置文件 `.babelrc`