# 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的語法。