❤ ES6-1【ECMAScript 6简介】

1、ECMAScript 6简介

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准, 2015 年 6 月正式发布,使 JavaScript（简称JS）可以用来编写复杂的大型应用程序，从而迈向企业级开发语言。

ECMAScript 和 JS 的关系

1996 年 JS 的创造者 Netscape （也就是网景）公司，决定将 JS 提交给标准化组织 ECMA，希望这种语言能够成为国际标准。

次年，ECMA 就发布了 262 号标准文件第一版，规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript，这个版本就是 1.0 版。

• 不叫 JavaScript，有两个原因。

一是商标，Java 是 Sun 公司的商标，JavaScript 本身也已经被 Netscape 公司注册为商标，只有 Netscape 公司可以合法地使用 JavaScript 这个名字 。

二是 想体现这门语言的制定者是 ECMA，不是 Netscape，这样有利于保证这门语言的开放性和中立性。

ECMAScript 和 JS 的关系是

• ECMAScript 是JS 的规格

• JS 是ECMAScript的一种实现

ES6 与 ECMAScript 2015 的关系

ECMAScript 2015（简称 ES2015）

ES6 这个词的原意指 JavaScript 语言的下一个版本,但ES6是一个历史名词，也是一个泛指，含义是5.1版以后的JavaScript的下一代标准，而ES2015则是正式名称，特指该年发布的正式版本的语言标准。

因为版本引入的语法功能太多，还有很多组织和个人不断提交新功能。不可能在一个版本里面包括所有将要引入的功能，标准的制定者采用：任何人在任何时候，都可以向标准委员会提交新语法的提案，然后标准委员会每个月开一次会评估这些提案是否可以接受，需要哪些改进。

在每年的 6 月份正式发布一次，作为当年的正式版本

接下来就在这个版本的基础上做改动直到下一年的 6 月份

ES6 的第一个版本在 2015 年 6 月发布了，正式名称就是《ECMAScript 2015 标准》（简称 ES2015）。

2016 年 6 月，小幅修订的《ECMAScript 2016 标准》（简称 ES2016）发布，这个版本可以看作是 ES6.1

语法提案的批准流程

任何人都可以向标准委员会（又称 TC39 委员会）提案，要求修改语言标准。、

而 ECMA 的第 39 号技术专家委员会（Technical Committee 39，简称 TC39）负责制订 ECMAScript 标准，成员包括 Microsoft、Mozilla、Google 等大公司。

一种新的语法从提案到变成正式标准，需要经历五个阶段。每个阶段的变动都由 TC39 委员会批准。

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

ECMAScript 的历史

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

ECMAScript 1.0 ，1997 年发布 ECMAScript 2.0，1998 年 6 月 ECMAScript 3.0，1999 年 12 月

3.0 版成功在业界得到广泛支持，成为通行标准，奠定了 JavaScript 语言的基本语法，以后的版本完全继承。初学者一开始学习 JS，其实就是在学 3.0 版的语法。

2000 年，ECMAScript 4.0 酝酿但未通过，ES6 制定的起点其实是 2000 年,因为这个版本太激进了，对 ES3 做了彻底升级，导致标准委员会的一些成员不愿意接受。

个人看法就是应该迭代而不是推倒彻底升级

2007 年 10 月，ECMAScript 4.0 版草案发布

2008 年 7 月，由于下一个版本各方分歧太大，争论过于激烈，ECMA 开会决定，中止 ECMAScript 4.0 的开发，将其中涉及现有功能改善的一小部分，发布为 ECMAScript 3.1

其他激进的设想放入以后的版本，版本代号起名为 Harmony（和谐）。不久，ECMAScript 3.1 就改名为 ECMAScript 5。

2009 年 12 月，ECMAScript 5.0 版正式发布。

Harmony 项目则一分为二，一些较为可行的设想定名为 JavaScript.next 继续开发，演变成 ECMAScript 6

一些不是很成熟的设想，则被视为 JavaScript.next.next

2011 年 6 月，ECMAScript 5.1 版发布，并且成为 ISO 国际标准（ISO/IEC 16262:2011）。 2013 年 3 月，ECMAScript 6 草案冻结，不再添加新功能。新的功能设想将被放到 ECMAScript 7。 2013 年 12 月，ECMAScript 6 草案发布。然后是 12 个月的讨论期，听取各方反馈。 2015 年 6 月，ECMAScript 6 正式通过，成为国际标准。从 2000 年算起，这时已经过去了 15 年。

Node.js 是 JavaScript 的服务器运行环境（runtime）。对 ES6 的支持度高。

查看 Node.js 默认没有打开的 ES6 实验性语法。

    // Linux & Mac
    $ node --v8-options | grep harmony
    ​
    // Windows
    $ node --v8-options | findstr harmony

承担ES6 翻译官的角色

比较通用的工具有：

babel、jsx、traceur、es6-shim 等。

Babel 转码器

Babel 是一个广泛使用的 ES6 转码器，可以将 ES6 代码转为 ES5 代码，

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

上述将箭头函数其转为普通函数，就能在不支持箭头函数的 JavaScript 环境执行了。

• 安装 Babel。

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

配置文件.babelrc

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

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

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

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

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

将这些规则加入.babelrc。

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

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

命令行转码

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

它的安装命令如下。

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

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

@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');

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

$ node index.js
2

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

polyfill

Babel 默认只转换新的 JavaScript 句法（syntax），而不转换新的 API

ES6 在Array对象上新增了Array.from方法，Babel 就不会转码这个方法。

如果想让这个方法运行，可以使用core-js和regenerator-runtime(后者提供generator函数的转码)，为当前环境提供一个垫片。

浏览器环境

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

注意，网页实时将 ES6 代码转为 ES5，对性能会有影响

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