ES6标准入门(一)之ECMAScript 6简介

1,462 阅读2分钟

ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准,已于2015年6月正式发布。它的目标是使JavaScript语言可以用于编写复杂的大型应用程序,称为企业级开发语言。

1.1 ECMAScript 和 JavaScript 的关系

ECMAScript和JavaScript的关系是,前者是后者的规格,后者是前者的一种实现(零购物的ECMAScript方言还有JScript和ActionScript)。在日常场合,这两个词是可以互换的。

1.2 ES6 与 ECMAScript2015 的关系

ECMAScript2015(简称ES2015)这个词也经常看到,那么它与ES6是什么关系呢? 2011年,ECMAScript5.1版本发布后,6.0版本便开始制定了。因此,ES6这个词原意就是指JavaScript语言的下一个版本。
ES6既是一个历史名词,也是一个泛指,含义是5.1版本以后的JavaScript的下一代标准,涵盖了ES2015、ES2016、ES2017等,而ES2015是正式名称,特制当年发布的正式版本的语言标准。

1.3 语法提案的批准流程

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

  • Stage 0:Strawman(展示阶段)
  • Stage 1:Proposal(征求意见阶段)
  • Stage 2:Draft(草案阶段)
  • Stage 3:Candidate(候选阶段)
  • Stage 4:Finished(定案阶段) 一个提案只要能进入 Stage 2,就基本认为其会包括在以后的正式标准里面。
    当前的所有提案都可以在TC39的官网 Github.com/tc39/ecma26… 中查看。

1.4 ECMAScript 的历史

ES6 从开始制定到最后发布,整整用了 15 年。

1.5 Babel转码器

Babel 是一个广泛使用的ES6转码器,它的作用是将ES6代码转为ES5,使得一些不支持ES6的浏览器也能执行相应代码。
以下是 BabelES6 语法进行的一个转码,使代码在不支持箭头函数的 JavaScript 环境可运行:

// 转码前
input.map(item => item + 1);

// 转码后
input.map(function (item) {
  return item + 1;
});

下面的命令在项目目录中,安装 Babel

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

1.6 polyfill

Babel 默认只转换新的 JavaScript 句法(syntax),而不转换新的 API,比如IteratorGeneratorSetMapProxyReflectSymbolPromise等全局对象,以及一些定义在全局对象上的方法(比如Object.assign)都不会转码。

举例来说,ES6 在Array对象上新增了Array.from方法。Babel 就不会转码这个方法。如果想让这个方法运行,可以使用core-jsregenerator-runtime(后者提供generator函数的转码),为当前环境提供一个垫片。 安装命令:

$ npm install --save-dev core-js regenerator-runtime

然后在脚本头部加入:

import 'core-js';
import 'regenerator-runtime/runtime';
// 或者
require('core-js');
require('regenerator-runtime/runtime');

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

浏览器环境

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

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
// Your ES6 code
</script>

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

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