# ECMAScript 6簡介
ECMAScript 6.0（以下簡稱ES6）是JavaScript語言的下一代標準，已經在2015年6月正式發布了。它的目標，是使得JavaScript語言可以用來編寫復雜的大型應用程序，成為企業級開發語言。
標準的制定者有計劃，以后每年發布一次標準，使用年份作為版本。因為ES6的第一個版本是在2015年發布的，所以又稱ECMAScript 2015（簡稱ES2015）。
2016年6月，小幅修訂的《ECMAScript 2016 標準》（簡稱 ES2016）如期發布。由于變動非常小（只新增了數組實例的`includes`方法和指數運算符），因此 ES2016 與 ES2015 基本上是同一個標準，都被看作是 ES6。根據計劃，2017年6月將發布 ES2017。
## 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的關系是，前者是后者的規格，后者是前者的一種實現（另外的ECMAScript方言還有Jscript和ActionScript）。日常場合，這兩個詞是可以互換的。
## ECMAScript的歷史
ES6從開始制定到最后發布，整整用了15年。
前面提到，ECMAScript 1.0是1997年發布的，接下來的兩年，連續發布了ECMAScript 2.0（1998年6月）和ECMAScript 3.0（1999年12月）。3.0版是一個巨大的成功，在業界得到廣泛支持，成為通行標準，奠定了JavaScript語言的基本語法，以后的版本完全繼承。直到今天，初學者一開始學習JavaScript，其實就是在學3.0版的語法。
2000年，ECMAScript 4.0開始醞釀。這個版本最后沒有通過，但是它的大部分內容被ES6繼承了。因此，ES6制定的起點其實是2000年。
為什么ES4沒有通過呢？因為這個版本太激進了，對ES3做了徹底升級，導致標準委員會的一些成員不愿意接受。ECMA的第39號技術專家委員會（Technical Committee 39，簡稱TC39）負責制訂ECMAScript標準，成員包括Microsoft、Mozilla、Google等大公司。
2007年10月，ECMAScript 4.0版草案發布，本來預計次年8月發布正式版本。但是，各方對于是否通過這個標準，發生了嚴重分歧。以Yahoo、Microsoft、Google為首的大公司，反對JavaScript的大幅升級，主張小幅改動；以JavaScript創造者Brendan Eich為首的Mozilla公司，則堅持當前的草案。
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，在更遠的將來再考慮推出。TC39委員會的總體考慮是，ES5與ES3基本保持兼容，較大的語法修正和新功能加入，將由JavaScript.next完成。當時，JavaScript.next指的是ES6，第六版發布以后，就指ES7。TC39的判斷是，ES5會在2013年的年中成為JavaScript開發的主流標準，并在此后五年中一直保持這個位置。
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年。
## 部署進度
各大瀏覽器的最新版本，對ES6的支持可以查看[kangax.github.io/es5-compat-table/es6/](http://kangax.github.io/es5-compat-table/es6/)。隨著時間的推移，支持度已經越來越高了，ES6的大部分特性都實現了。
Node.js是JavaScript語言的服務器運行環境，對ES6的支持度比瀏覽器更高。通過Node，可以體驗更多ES6的特性。建議使用版本管理工具[nvm](https://github.com/creationix/nvm)，來安裝Node，因為可以自由切換版本。不過，`nvm`不支持Windows系統，如果你使用Windows系統，下面的操作可以改用[nvmw](https://github.com/hakobera/nvmw)或[nvm-windows](https://github.com/coreybutler/nvm-windows)代替。
安裝nvm需要打開命令行窗口，運行下面的命令。
~~~
$ curl -o- https://raw.githubusercontent.com/creationix/nvm/<version number>/install.sh | bash
~~~
上面命令的`version number`處，需要用版本號替換。本節寫作時的版本號是`v0.29.0`。該命令運行后，`nvm`會默認安裝在用戶主目錄的`.nvm`子目錄。
然后，激活`nvm`。
~~~
$ source ~/.nvm/nvm.sh
~~~
激活以后，安裝Node的最新版。
~~~
$ nvm install node
~~~
安裝完成后，切換到該版本。
~~~
$ nvm use node
~~~
使用下面的命令，可以查看Node所有已經實現的ES6特性。
~~~
$ node --v8-options | grep harmony
--harmony_typeof
--harmony_scoping
--harmony_modules
--harmony_symbols
--harmony_proxies
--harmony_collections
--harmony_observation
--harmony_generators
--harmony_iteration
--harmony_numeric_literals
--harmony_strings
--harmony_arrays
--harmony_maths
--harmony
~~~
上面命令的輸出結果，會因為版本的不同而有所不同。
我寫了一個[ES-Checker](https://github.com/ruanyf/es-checker)模塊，用來檢查各種運行環境對ES6的支持情況。訪問[ruanyf.github.io/es-checker](http://ruanyf.github.io/es-checker)，可以看到您的瀏覽器支持ES6的程度。運行下面的命令，可以查看你正在使用的Node環境對ES6的支持程度。
~~~
$ npm install -g es-checker
$ es-checker
=========================================
Passes 24 feature Dectations
Your runtime supports 57% of ECMAScript 6
=========================================
~~~
## Babel轉碼器
[Babel](https://babeljs.io/)是一個廣泛使用的ES6轉碼器，可以將ES6代碼轉為ES5代碼，從而在現有環境執行。這意味著，你可以用ES6的方式編寫程序，又不用擔心現有環境是否支持。下面是一個例子。
~~~
// 轉碼前
input.map(item => item + 1);
// 轉碼后
input.map(function (item) {
return item + 1;
});
~~~
上面的原始代碼用了箭頭函數，這個特性還沒有得到廣泛支持，Babel將其轉為普通函數，就能在現有的JavaScript環境執行了。
### 配置文件`.babelrc`
Babel的配置文件是`.babelrc`，存放在項目的根目錄下。使用Babel的第一步，就是配置這個文件。
該文件用來設置轉碼規則和插件，基本格式如下。
~~~
{
"presets": [],
"plugins": []
}
~~~
`presets`字段設定轉碼規則，官方提供以下的規則集，你可以根據需要安裝。
~~~
# ES2015轉碼規則
$ npm install --save-dev babel-preset-es2015
# react轉碼規則
$ npm install --save-dev babel-preset-react
# ES7不同階段語法提案的轉碼規則（共有4個階段），選裝一個
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3
~~~
然后，將這些規則加入`.babelrc`。
~~~
{
"presets": [
"es2015",
"react",
"stage-2"
],
"plugins": []
}
~~~
注意，以下所有Babel工具和模塊的使用，都必須先寫好`.babelrc`。
### 命令行轉碼`babel-cli`
Babel提供`babel-cli`工具，用于命令行轉碼。
它的安裝命令如下。
~~~
$ npm install --global babel-cli
~~~
基本用法如下。
~~~
# 轉碼結果輸出到標準輸出
$ babel example.js
# 轉碼結果寫入一個文件
# --out-file 或 -o 參數指定輸出文件
$ babel example.js --out-file compiled.js
# 或者
$ babel example.js -o compiled.js
# 整個目錄轉碼
# --out-dir 或 -d 參數指定輸出目錄
$ babel src --out-dir lib
# 或者
$ babel src -d lib
# -s 參數生成source map文件
$ babel src -d lib -s
~~~
上面代碼是在全局環境下，進行Babel轉碼。這意味著，如果項目要運行，全局環境必須有Babel，也就是說項目產生了對環境的依賴。另一方面，這樣做也無法支持不同項目使用不同版本的Babel。
一個解決辦法是將`babel-cli`安裝在項目之中。
~~~
# 安裝
$ npm install --save-dev babel-cli
~~~
然后，改寫`package.json`。
~~~
{
// ...
"devDependencies": {
"babel-cli": "^6.0.0"
},
"scripts": {
"build": "babel src -d lib"
},
}
~~~
轉碼的時候，就執行下面的命令。
~~~
$ npm run build
~~~
### babel-node
`babel-cli`工具自帶一個`babel-node`命令，提供一個支持ES6的REPL環境。它支持Node的REPL環境的所有功能，而且可以直接運行ES6代碼。
它不用單獨安裝，而是隨`babel-cli`一起安裝。然后，執行`babel-node`就進入REPL環境。
~~~
$ babel-node
> (x => x * 2)(1)
2
~~~
`babel-node`命令可以直接運行ES6腳本。將上面的代碼放入腳本文件`es6.js`，然后直接運行。
~~~
$ babel-node es6.js
2
~~~
`babel-node`也可以安裝在項目中。
~~~
$ npm install --save-dev babel-cli
~~~
然后，改寫`package.json`。
~~~
{
"scripts": {
"script-name": "babel-node script.js"
}
}
~~~
上面代碼中，使用`babel-node`替代`node`，這樣`script.js`本身就不用做任何轉碼處理。
### babel-register
`babel-register`模塊改寫`require`命令，為它加上一個鉤子。此后，每當使用`require`加載`.js`、`.jsx`、`.es`和`.es6`后綴名的文件，就會先用Babel進行轉碼。
~~~
$ npm install --save-dev babel-register
~~~
使用時，必須首先加載`babel-register`。
~~~
require("babel-register");
require("./index.js");
~~~
然后，就不需要手動對`index.js`轉碼了。
需要注意的是，`babel-register`只會對`require`命令加載的文件轉碼，而不會對當前文件轉碼。另外，由于它是實時轉碼，所以只適合在開發環境使用。
### babel-core
如果某些代碼需要調用Babel的API進行轉碼，就要使用`babel-core`模塊。
安裝命令如下。
~~~
$ npm install babel-core --save
~~~
然后，在項目中就可以調用`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 }
~~~
配置對象`options`，可以參看官方文檔[http://babeljs.io/docs/usage/options/](http://babeljs.io/docs/usage/options/)。
下面是一個例子。
~~~
var es6Code = 'let x = n => n + 1';
var es5Code = require('babel-core')
.transform(es6Code, {
presets: ['es2015']
})
.code;
// '"use strict";\n\nvar x = function x(n) {\n return n + 1;\n};'
~~~
上面代碼中，`transform`方法的第一個參數是一個字符串，表示需要被轉換的ES6代碼，第二個參數是轉換的配置對象。
### babel-polyfill
Babel默認只轉換新的JavaScript句法（syntax），而不轉換新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局對象，以及一些定義在全局對象上的方法（比如`Object.assign`）都不會轉碼。
舉例來說，ES6在`Array`對象上新增了`Array.from`方法。Babel就不會轉碼這個方法。如果想讓這個方法運行，必須使用`babel-polyfill`，為當前環境提供一個墊片。
安裝命令如下。
~~~
$ npm install --save babel-polyfill
~~~
然后，在腳本頭部，加入如下一行代碼。
~~~
import 'babel-polyfill';
// 或者
require('babel-polyfill');
~~~
Babel默認不轉碼的API非常多，詳細清單可以查看`babel-plugin-transform-runtime`模塊的[definitions.js](https://github.com/babel/babel/blob/master/packages/babel-plugin-transform-runtime/src/definitions.js)文件。
### 瀏覽器環境
Babel也可以用于瀏覽器環境。但是，從Babel 6.0開始，不再直接提供瀏覽器版本，而是要用構建工具構建出來。如果你沒有或不想使用構建工具，可以通過安裝5.x版本的`babel-core`模塊獲取。
~~~
$ npm install babel-core@5
~~~
運行上面的命令以后，就可以在當前目錄的`node_modules/babel-core/`子目錄里面，找到`babel`的瀏覽器版本`browser.js`（未精簡）和`browser.min.js`（已精簡）。
然后，將下面的代碼插入網頁。
~~~
<script src="node_modules/babel-core/browser.js"></script>
<script type="text/babel">
// Your ES6 code
</script>
~~~
上面代碼中，`browser.js`是Babel提供的轉換器腳本，可以在瀏覽器運行。用戶的ES6腳本放在`script`標簽之中，但是要注明`type="text/babel"`。
另一種方法是使用[babel-standalone](https://github.com/Daniel15/babel-standalone)模塊提供的瀏覽器版本，將其插入網頁。
~~~
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.4.4/babel.min.js"></script>
<script type="text/babel">
// Your ES6 code
</script>
~~~
注意，網頁中實時將ES6代碼轉為ES5，對性能會有影響。生產環境需要加載已經轉碼完成的腳本。
下面是如何將代碼打包成瀏覽器可以使用的腳本，以`Babel`配合`Browserify`為例。首先，安裝`babelify`模塊。
~~~
$ npm install --save-dev babelify babel-preset-es2015
~~~
然后，再用命令行轉換ES6腳本。
~~~
$ browserify script.js -o bundle.js \
-t [ babelify --presets [ es2015 ] ]
~~~
上面代碼將ES6腳本`script.js`，轉為`bundle.js`，瀏覽器直接加載后者就可以了。
在`package.json`設置下面的代碼，就不用每次命令行都輸入參數了。
~~~
{
"browserify": {
"transform": [["babelify", { "presets": ["es2015"] }]]
}
}
~~~
### 在線轉換
Babel提供一個[REPL在線編譯器](https://babeljs.io/repl/)，可以在線將ES6代碼轉為ES5代碼。轉換后的代碼，可以直接作為ES5代碼插入網頁運行。
### 與其他工具的配合
許多工具需要Babel進行前置轉碼，這里舉兩個例子：ESLint和Mocha。
ESLint用于靜態檢查代碼的語法和風格，安裝命令如下。
~~~
$ npm install --save-dev eslint babel-eslint
~~~
然后，在項目根目錄下，新建一個配置文件`.eslintrc`，在其中加入`parser`字段。
~~~
{
"parser": "babel-eslint",
"rules": {
...
}
}
~~~
再在`package.json`之中，加入相應的`scripts`腳本。
~~~
{
"name": "my-module",
"scripts": {
"lint": "eslint my-files.js"
},
"devDependencies": {
"babel-eslint": "...",
"eslint": "..."
}
}
~~~
Mocha則是一個測試框架，如果需要執行使用ES6語法的測試腳本，可以修改`package.json`的`scripts.test`。
~~~
"scripts": {
"test": "mocha --ui qunit --compilers js:babel-core/register"
}
~~~
上面命令中，`--compilers`參數指定腳本的轉碼器，規定后綴名為`js`的文件，都需要使用`babel-core/register`先轉碼。
## Traceur轉碼器
Google公司的[Traceur](https://github.com/google/traceur-compiler)轉碼器，也可以將ES6代碼轉為ES5代碼。
### 直接插入網頁
Traceur允許將ES6代碼直接插入網頁。首先，必須在網頁頭部加載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>
<script type="module">
import './Greeter.js';
</script>
~~~
上面代碼中，一共有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');
}
add(a, b){
return a + b;
}
}
var c = new Calc();
console.log(c.add(4,5));
</script>
~~~
正常情況下，上面代碼會在控制臺打印出9。
如果想對Traceur的行為有精確控制，可以采用下面參數配置的寫法。
~~~
<script>
// Create the System object
window.System = new traceur.runtime.BrowserTraceurLoader();
// Set some experimental options
var metadata = {
traceurOptions: {
experimental: true,
properTailCalls: true,
symbols: true,
arrayComprehension: true,
asyncFunctions: true,
asyncGenerators: exponentiation,
forOn: true,
generatorComprehension: true
}
};
// Load your module
System.import('./myModule.js', {metadata: metadata}).catch(function(ex) {
console.error('Import failed', ex.stack || ex);
});
</script>
~~~
上面代碼中，首先生成Traceur的全局對象`window.System`，然后`System.import`方法可以用來加載ES6模塊。加載的時候，需要傳入一個配置對象`metadata`，該對象的`traceurOptions`屬性可以配置支持ES6功能。如果設為`experimental: true`，就表示除了ES6以外，還支持一些實驗性的新功能。
### 在線轉換
Traceur也提供一個[在線編譯器](http://google.github.io/traceur-compiler/demo/repl.html)，可以在線將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');
};
($traceurRuntime.createClass)(Calc, {add: function(a, b) {
return a + b;
}}, {});
var c = new Calc();
console.log(c.add(4, 5));
return {};
});
</script>
~~~
### 命令行轉換
作為命令行工具使用時，Traceur是一個Node的模塊，首先需要用Npm安裝。
~~~
$ npm install -g traceur
~~~
安裝成功后，就可以在命令行下使用Traceur了。
Traceur直接運行es6腳本文件，會在標準輸出顯示運行結果，以前面的`calc.js`為例。
~~~
$ traceur calc.js
Calc constructor
9
~~~
如果要將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.js環境的用法
Traceur的Node.js用法如下（假定已安裝traceur模塊）。
~~~
var traceur = require('traceur');
var fs = require('fs');
// 將ES6腳本轉為字符串
var contents = fs.readFileSync('es6-file.js').toString();
var result = traceur.compile(contents, {
filename: 'es6-file.js',
sourceMap: true,
// 其他設置
modules: 'commonjs'
});
if (result.error)
throw result.error;
// result對象的js屬性就是轉換后的ES5代碼
fs.writeFileSync('out.js', result.js);
// sourceMap屬性對應map文件
fs.writeFileSync('out.js.map', result.sourceMap);
~~~
## ECMAScript 7
2013年3月，ES6的草案封閉，不再接受新功能了。新的功能將被加入ES7。
任何人都可以向TC39提案，從提案到變成正式標準，需要經歷五個階段。每個階段的變動都需要由TC39委員會批準。
* Stage 0 - Strawman（展示階段）
* Stage 1 - Proposal（征求意見階段）
* Stage 2 - Draft（草案階段）
* Stage 3 - Candidate（候選人階段）
* Stage 4 - Finished（定案階段）
一個提案只要能進入Stage 2，就差不多等于肯定會包括在ES7里面。
本書的寫作目標之一，是跟蹤ECMAScript語言的最新進展。對于那些明確的、或者很有希望列入ES7的功能，尤其是那些Babel已經支持的功能，都將予以介紹。
本書介紹的ES7功能清單如下。
**Stage 0**：
* Function Bind Syntax：函數的綁定運算符
* String.prototype.at：字符串的靜態方法at
**Stage 1**：
* Class and Property Decorators：Class的修飾器
* Class Property Declarations：Class的屬性聲明
* Additional export-from Statements：export的寫法改進
* String.prototype.{trimLeft,trimRight}：字符串刪除頭尾空格的方法
**Stage 2**：
* Rest/Spread Properties：對象的Rest參數和擴展運算符
**Stage 3**
* SIMD API：“單指令，多數據”命令集
* Async Functions：async函數
* Object.values/Object.entries：Object的靜態方法values()和entries()
* String padding：字符串長度補全
* Trailing commas in function parameter lists and calls：函數參數的尾逗號
* Object.getOwnPropertyDescriptors：Object的靜態方法getOwnPropertyDescriptors
**Stage 4**：
* Array.prototype.includes：數組實例的includes方法
* Exponentiation Operator：指數運算符
ECMAScript當前的所有提案，可以在TC39的官方網站[Github.com/tc39/ecma262](https://github.com/tc39/ecma262)查看。
Babel轉碼器可以通過安裝和使用插件來使用各個stage的語法。
