ECMAScript 6簡介- ECMAScript和JavaScript的關(guān)系
- ECMAScript的歷史
- 部署進度
- Babel轉(zhuǎn)碼器
- Traceur轉(zhuǎn)碼器
- ECMAScript 7
ECMAScript 6.0（以下簡稱ES6）是JavaScript語言的下一代標準，已經(jīng)在2015年6月正式發(fā)布了。它的目標，是使得JavaScript語言可以用來編寫復(fù)雜的大型應(yīng)用程序，成為企業(yè)級開發(fā)語言。 標準的制定者有計劃，以后每年發(fā)布一次標準，使用年份作為版本。因為ES6的第一個版本是在2015年發(fā)布的，所以又稱ECMAScript 2015（簡稱ES2015）。 2016年6月，小幅修訂的《ECMAScript 2016 標準》（簡稱 ES2016）如期發(fā)布。由于變動非常?。ㄖ恍略隽藬?shù)組實例的includes方法和指數(shù)運算符），因此 ES2016 與 ES2015 基本上是同一個標準，都被看作是 ES6。根據(jù)計劃，2017年6月將發(fā)布 ES2017。 ECMAScript和JavaScript的關(guān)系一個常見的問題是，ECMAScript和JavaScript到底是什么關(guān)系？ 要講清楚這個問題，需要回顧歷史。1996年11月，JavaScript的創(chuàng)造者Netscape公司，決定將JavaScript提交給國際標準化組織ECMA，希望這種語言能夠成為國際標準。次年，ECMA發(fā)布262號標準文件（ECMA-262）的第一版，規(guī)定了瀏覽器腳本語言的標準，并將這種語言稱為ECMAScript，這個版本就是1.0版。 該標準從一開始就是針對JavaScript語言制定的，但是之所以不叫JavaScript，有兩個原因。一是商標，Java是Sun公司的商標，根據(jù)授權(quán)協(xié)議，只有Netscape公司可以合法地使用JavaScript這個名字，且JavaScript本身也已經(jīng)被Netscape公司注冊為商標。二是想體現(xiàn)這門語言的制定者是ECMA，不是Netscape，這樣有利于保證這門語言的開放性和中立性。 因此，ECMAScript和JavaScript的關(guān)系是，前者是后者的規(guī)格，后者是前者的一種實現(xiàn)（另外的ECMAScript方言還有Jscript和ActionScript）。日常場合，這兩個詞是可以互換的。 ECMAScript的歷史ES6從開始制定到最后發(fā)布，整整用了15年。 前面提到，ECMAScript 1.0是1997年發(fā)布的，接下來的兩年，連續(xù)發(fā)布了ECMAScript 2.0（1998年6月）和ECMAScript 3.0（1999年12月）。3.0版是一個巨大的成功，在業(yè)界得到廣泛支持，成為通行標準，奠定了JavaScript語言的基本語法，以后的版本完全繼承。直到今天，初學者一開始學習JavaScript，其實就是在學3.0版的語法。 2000年，ECMAScript 4.0開始醞釀。這個版本最后沒有通過，但是它的大部分內(nèi)容被ES6繼承了。因此，ES6制定的起點其實是2000年。 為什么ES4沒有通過呢？因為這個版本太激進了，對ES3做了徹底升級，導(dǎo)致標準委員會的一些成員不愿意接受。ECMA的第39號技術(shù)專家委員會（Technical Committee 39，簡稱TC39）負責制訂ECMAScript標準，成員包括Microsoft、Mozilla、Google等大公司。 2007年10月，ECMAScript 4.0版草案發(fā)布，本來預(yù)計次年8月發(fā)布正式版本。但是，各方對于是否通過這個標準，發(fā)生了嚴重分歧。以Yahoo、Microsoft、Google為首的大公司，反對JavaScript的大幅升級，主張小幅改動；以JavaScript創(chuàng)造者Brendan Eich為首的Mozilla公司，則堅持當前的草案。 2008年7月，由于對于下一個版本應(yīng)該包括哪些功能，各方分歧太大，爭論過于激烈，ECMA開會決定，中止ECMAScript 4.0的開發(fā)，將其中涉及現(xiàn)有功能改善的一小部分，發(fā)布為ECMAScript 3.1，而將其他激進的設(shè)想擴大范圍，放入以后的版本，由于會議的氣氛，該版本的項目代號起名為Harmony（和諧）。會后不久，ECMAScript 3.1就改名為ECMAScript 5。 2009年12月，ECMAScript 5.0版正式發(fā)布。Harmony項目則一分為二，一些較為可行的設(shè)想定名為JavaScript.next繼續(xù)開發(fā)，后來演變成ECMAScript 6；一些不是很成熟的設(shè)想，則被視為JavaScript.next.next，在更遠的將來再考慮推出。TC39委員會的總體考慮是，ES5與ES3基本保持兼容，較大的語法修正和新功能加入，將由JavaScript.next完成。當時，JavaScript.next指的是ES6，第六版發(fā)布以后，就指ES7。TC39的判斷是，ES5會在2013年的年中成為JavaScript開發(fā)的主流標準，并在此后五年中一直保持這個位置。 2011年6月，ECMAscript 5.1版發(fā)布，并且成為ISO國際標準（ISO/IEC 16262:2011）。 2013年3月，ECMAScript 6草案凍結(jié)，不再添加新功能。新的功能設(shè)想將被放到ECMAScript 7。 2013年12月，ECMAScript 6草案發(fā)布。然后是12個月的討論期，聽取各方反饋。 2015年6月，ECMAScript 6正式通過，成為國際標準。從2000年算起，這時已經(jīng)過去了15年。 部署進度各大瀏覽器的最新版本，對ES6的支持可以查看kangax./es5-compat-table/es6/。隨著時間的推移，支持度已經(jīng)越來越高了，ES6的大部分特性都實現(xiàn)了。 Node.js是JavaScript語言的服務(wù)器運行環(huán)境，對ES6的支持度比瀏覽器更高。通過Node，可以體驗更多ES6的特性。建議使用版本管理工具nvm，來安裝Node，因為可以自由切換版本。不過，nvm不支持Windows系統(tǒng)，如果你使用Windows系統(tǒng)，下面的操作可以改用nvmw或nvm-windows代替。 安裝nvm需要打開命令行窗口，運行下面的命令。 $ curl -o- https://raw.githubusercontent.com/creationix/nvm/<version number>/install.sh | bash
上面命令的version number處，需要用版本號替換。本節(jié)寫作時的版本號是v0.29.0。該命令運行后，nvm會默認安裝在用戶主目錄的.nvm子目錄。 然后，激活nvm。 $ source ~/.nvm/nvm.sh
激活以后，安裝Node的最新版。 $ nvm install node
安裝完成后，切換到該版本。 $ nvm use node
使用下面的命令，可以查看Node所有已經(jīng)實現(xiàn)的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
上面命令的輸出結(jié)果，會因為版本的不同而有所不同。 我寫了一個ES-Checker模塊，用來檢查各種運行環(huán)境對ES6的支持情況。訪問ruanyf./es-checker，可以看到您的瀏覽器支持ES6的程度。運行下面的命令，可以查看你正在使用的Node環(huán)境對ES6的支持程度。 $ npm install -g es-checker$ es-checker=========================================Passes 24 feature DectationsYour runtime supports 57% of ECMAScript 6=========================================
Babel轉(zhuǎn)碼器Babel是一個廣泛使用的ES6轉(zhuǎn)碼器，可以將ES6代碼轉(zhuǎn)為ES5代碼，從而在現(xiàn)有環(huán)境執(zhí)行。這意味著，你可以用ES6的方式編寫程序，又不用擔心現(xiàn)有環(huán)境是否支持。下面是一個例子。 // 轉(zhuǎn)碼前input.map(item => item + 1);// 轉(zhuǎn)碼后input.map(function (item) { return item + 1;});
上面的原始代碼用了箭頭函數(shù)，這個特性還沒有得到廣泛支持，Babel將其轉(zhuǎn)為普通函數(shù)，就能在現(xiàn)有的JavaScript環(huán)境執(zhí)行了。 配置文件.babelrcBabel的配置文件是.babelrc，存放在項目的根目錄下。使用Babel的第一步，就是配置這個文件。 該文件用來設(shè)置轉(zhuǎn)碼規(guī)則和插件，基本格式如下。 { 'presets': [], 'plugins': []}
presets字段設(shè)定轉(zhuǎn)碼規(guī)則，官方提供以下的規(guī)則集，你可以根據(jù)需要安裝。
# ES2015轉(zhuǎn)碼規(guī)則$ npm install --save-dev babel-preset-es2015# react轉(zhuǎn)碼規(guī)則$ npm install --save-dev babel-preset-react# ES7不同階段語法提案的轉(zhuǎn)碼規(guī)則（共有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
然后，將這些規(guī)則加入.babelrc。 { 'presets': [ 'es2015', 'react', 'stage-2' ], 'plugins': [] }
注意，以下所有Babel工具和模塊的使用，都必須先寫好.babelrc。 命令行轉(zhuǎn)碼babel-cliBabel提供babel-cli工具，用于命令行轉(zhuǎn)碼。 它的安裝命令如下。 $ npm install --global babel-cli
基本用法如下。 # 轉(zhuǎn)碼結(jié)果輸出到標準輸出$ babel example.js# 轉(zhuǎn)碼結(jié)果寫入一個文件# --out-file 或 -o 參數(shù)指定輸出文件$ babel example.js --out-file compiled.js# 或者$ babel example.js -o compiled.js# 整個目錄轉(zhuǎn)碼# --out-dir 或 -d 參數(shù)指定輸出目錄$ babel src --out-dir lib# 或者$ babel src -d lib# -s 參數(shù)生成source map文件$ babel src -d lib -s
上面代碼是在全局環(huán)境下，進行Babel轉(zhuǎn)碼。這意味著，如果項目要運行，全局環(huán)境必須有Babel，也就是說項目產(chǎn)生了對環(huán)境的依賴。另一方面，這樣做也無法支持不同項目使用不同版本的Babel。 一個解決辦法是將babel-cli安裝在項目之中。 # 安裝$ npm install --save-dev babel-cli
然后，改寫package.json。 { // ... 'devDependencies': { 'babel-cli': '^6.0.0' }, 'scripts': { 'build': 'babel src -d lib' },}
轉(zhuǎn)碼的時候，就執(zhí)行下面的命令。 $ npm run build
babel-nodebabel-cli工具自帶一個babel-node命令，提供一個支持ES6的REPL環(huán)境。它支持Node的REPL環(huán)境的所有功能，而且可以直接運行ES6代碼。
它不用單獨安裝，而是隨babel-cli一起安裝。然后，執(zhí)行babel-node就進入REPL環(huán)境。 $ babel-node> (x => x * 2)(1)2
babel-node命令可以直接運行ES6腳本。將上面的代碼放入腳本文件es6.js，然后直接運行。
$ babel-node es6.js2
babel-node也可以安裝在項目中。
$ npm install --save-dev babel-cli
然后，改寫package.json。 { 'scripts': { 'script-name': 'babel-node script.js' }}
上面代碼中，使用babel-node替代node，這樣script.js本身就不用做任何轉(zhuǎn)碼處理。 babel-registerbabel-register模塊改寫require命令，為它加上一個鉤子。此后，每當使用require加載.js、.jsx、.es和.es6后綴名的文件，就會先用Babel進行轉(zhuǎn)碼。
$ npm install --save-dev babel-register
使用時，必須首先加載babel-register。 require('babel-register');require('./index.js');
然后，就不需要手動對index.js轉(zhuǎn)碼了。 需要注意的是，babel-register只會對require命令加載的文件轉(zhuǎn)碼，而不會對當前文件轉(zhuǎn)碼。另外，由于它是實時轉(zhuǎn)碼，所以只適合在開發(fā)環(huán)境使用。 babel-core如果某些代碼需要調(diào)用Babel的API進行轉(zhuǎn)碼，就要使用babel-core模塊。 安裝命令如下。 $ npm install babel-core --save
然后，在項目中就可以調(diào)用babel-core。 var babel = require('babel-core');// 字符串轉(zhuǎn)碼babel.transform('code();', options);// => { code, map, ast }// 文件轉(zhuǎn)碼（異步）babel.transformFile('filename.js', options, function(err, result) { result; // => { code, map, ast }});// 文件轉(zhuǎn)碼（同步）babel.transformFileSync('filename.js', options);// => { code, map, ast }// Babel AST轉(zhuǎn)碼babel.transformFromAst(ast, code, options);// => { code, map, ast }
配置對象options，可以參看官方文檔http:///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方法的第一個參數(shù)是一個字符串，表示需要被轉(zhuǎn)換的ES6代碼，第二個參數(shù)是轉(zhuǎn)換的配置對象。 babel-polyfillBabel默認只轉(zhuǎn)換新的JavaScript句法（syntax），而不轉(zhuǎn)換新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局對象，以及一些定義在全局對象上的方法（比如Object.assign）都不會轉(zhuǎn)碼。 舉例來說，ES6在Array對象上新增了Array.from方法。Babel就不會轉(zhuǎn)碼這個方法。如果想讓這個方法運行，必須使用babel-polyfill，為當前環(huán)境提供一個墊片。 安裝命令如下。 $ npm install --save babel-polyfill
然后，在腳本頭部，加入如下一行代碼。 import 'babel-polyfill';// 或者require('babel-polyfill');
Babel默認不轉(zhuǎn)碼的API非常多，詳細清單可以查看babel-plugin-transform-runtime模塊的definitions.js文件。 瀏覽器環(huán)境Babel也可以用于瀏覽器環(huán)境。但是，從Babel 6.0開始，不再直接提供瀏覽器版本，而是要用構(gòu)建工具構(gòu)建出來。如果你沒有或不想使用構(gòu)建工具，可以通過安裝5.x版本的babel-core模塊獲取。 $ npm install babel-core@5
運行上面的命令以后，就可以在當前目錄的node_modules/babel-core/子目錄里面，找到babel的瀏覽器版本browser.js（未精簡）和browser.min.js（已精簡）。 然后，將下面的代碼插入網(wǎng)頁。
上面代碼中，一共有4個script標簽。第一個是加載Traceur的庫文件，第二個和第三個是將這個庫文件用于瀏覽器環(huán)境，第四個則是加載用戶腳本，這個腳本里面可以使用ES6代碼。 注意，第四個script標簽的type屬性的值是module，而不是text/javascript。這是Traceur編譯器識別ES6代碼的標志，編譯器會自動將所有type=module的代碼編譯為ES5，然后再交給瀏覽器執(zhí)行。 除了引用外部ES6腳本，也可以直接在網(wǎng)頁中放置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的行為有精確控制，可以采用下面參數(shù)配置的寫法。 <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功能。如果設(shè)為experimental: true，就表示除了ES6以外，還支持一些實驗性的新功能。 在線轉(zhuǎn)換Traceur也提供一個在線編譯器，可以在線將ES6代碼轉(zhuǎn)為ES5代碼。轉(zhuǎn)換后的代碼，可以直接作為ES5代碼插入網(wǎng)頁運行。 上面的例子轉(zhuǎn)為ES5代碼運行，就是下面這個樣子。 <script src='https://google./traceur-compiler/bin/traceur.js'></script><script src='https://google./traceur-compiler/bin/BrowserSystem.js'></script><script src='https://google./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>
命令行轉(zhuǎn)換作為命令行工具使用時，Traceur是一個Node的模塊，首先需要用Npm安裝。 $ npm install -g traceur
安裝成功后，就可以在命令行下使用Traceur了。 Traceur直接運行es6腳本文件，會在標準輸出顯示運行結(jié)果，以前面的calc.js為例。 $ traceur calc.jsCalc constructor9
如果要將ES6腳本轉(zhuǎn)為ES5保存，要采用下面的寫法。 $ traceur --script calc.es6.js --out calc.es5.js
上面代碼的--script選項表示指定輸入文件，--out選項表示指定輸出文件。 為了防止有些特性編譯不成功，最好加上--experimental選項。 $ traceur --script calc.es6.js --out calc.es5.js --experimental
命令行下轉(zhuǎn)換生成的文件，就可以直接放到瀏覽器中運行。 Node.js環(huán)境的用法Traceur的Node.js用法如下（假定已安裝traceur模塊）。 var traceur = require('traceur');var fs = require('fs');// 將ES6腳本轉(zhuǎn)為字符串var contents = fs.readFileSync('es6-file.js').toString();var result = traceur.compile(contents, { filename: 'es6-file.js', sourceMap: true, // 其他設(shè)置 modules: 'commonjs'});if (result.error) throw result.error;// result對象的js屬性就是轉(zhuǎn)換后的ES5代碼fs.writeFileSync('out.js', result.js);// sourceMap屬性對應(yīng)map文件fs.writeFileSync('out.js.map', result.sourceMap);
ECMAScript 72013年3月，ES6的草案封閉，不再接受新功能了。新的功能將被加入ES7。 任何人都可以向TC39提案，從提案到變成正式標準，需要經(jīng)歷五個階段。每個階段的變動都需要由TC39委員會批準。 - Stage 0 - Strawman（展示階段）
- Stage 1 - Proposal（征求意見階段）
- Stage 2 - Draft（草案階段）
- Stage 3 - Candidate（候選人階段）
- Stage 4 - Finished（定案階段）
一個提案只要能進入Stage 2，就差不多等于肯定會包括在ES7里面。 本書的寫作目標之一，是跟蹤ECMAScript語言的最新進展。對于那些明確的、或者很有希望列入ES7的功能，尤其是那些Babel已經(jīng)支持的功能，都將予以介紹。 本書介紹的ES7功能清單如下。 Stage 0： - Function Bind Syntax：函數(shù)的綁定運算符
- String.prototype.at：字符串的靜態(tài)方法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參數(shù)和擴展運算符
Stage 3 - SIMD API：“單指令，多數(shù)據(jù)”命令集
- Async Functions：async函數(shù)
- Object.values/Object.entries：Object的靜態(tài)方法values()和entries()
- String padding：字符串長度補全
- Trailing commas in function parameter lists and calls：函數(shù)參數(shù)的尾逗號
- Object.getOwnPropertyDescriptors：Object的靜態(tài)方法getOwnPropertyDescriptors
Stage 4： - Array.prototype.includes：數(shù)組實例的includes方法
- Exponentiation Operator：指數(shù)運算符
ECMAScript當前的所有提案，可以在TC39的官方網(wǎng)站Github.com/tc39/ecma262查看。 Babel轉(zhuǎn)碼器可以通過安裝和使用插件來使用各個stage的語法。 留言
|
