參考鏈接 · ECMAScript 6入門

## 官方文件 * [ECMAScript 6 Language Specification](http://people.mozilla.org/~jorendorff/es6-draft.html): 語言規格草案 * [harmony:proposals](http://wiki.ecmascript.org/doku.php?id=harmony:proposals): ES6的各種提案 * [Draft Specification for ES.next (Ecma-262 Edition 6)](http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts): ES6草案各版本之間的變動 ## 綜合介紹 * Sayanee Basu,?[Use ECMAScript 6 Today](http://net.tutsplus.com/articles/news/ecmascript-6-today/) * Ariya Hidayat,?[Toward Modern Web Apps with ECMAScript 6](http://www.sencha.com/blog/toward-modern-web-apps-with-ecmascript-6/) * Dale Schouten,?[10 Ecmascript-6 tricks you can perform right now](http://html5hub.com/10-ecmascript-6-tricks-you-can-perform-right-now/) * Colin Toh,?[Lightweight ES6 Features That Pack A Punch](http://colintoh.com/blog/lightweight-es6-features): ES6的一些“輕量級”的特性介紹 * Domenic Denicola,?[ES6: The Awesome Parts](http://www.slideshare.net/domenicdenicola/es6-the-awesome-parts) * Nicholas C. Zakas,?[Understanding ECMAScript 6](https://github.com/nzakas/understandinges6) * Justin Drake,?[ECMAScript 6 in Node.JS](https://github.com/JustinDrake/node-es6-examples) * Ryan Dao,?[Summary of ECMAScript 6 major features](http://ryandao.net/portal/content/summary-ecmascript-6-major-features) * Luke Hoban,?[ES6 features](https://github.com/lukehoban/es6features): ES6新語法點的羅列 * Traceur-compiler,?[Language Features](https://github.com/google/traceur-compiler/wiki/LanguageFeatures): Traceur文檔列出的一些ES6例子 * Axel Rauschmayer,?[ECMAScript 6: what’s next for JavaScript?](https://speakerdeck.com/rauschma/ecmascript-6-whats-next-for-javascript-august-2014): 關于ES6新增語法的綜合介紹，有很多例子 * Toby Ho,?[ES6 in io.js](http://davidwalsh.name/es6-io) * Guillermo Rauch,?[ECMAScript 6](http://rauchg.com/2015/ecmascript-6/) * Charles King,?[The power of ECMAScript 6](http://charlesbking.com/power_of_es6/#/) * Benjamin De Cock,?[Frontend Guidelines](https://github.com/bendc/frontend-guidelines): ES6最佳實踐 * Jani Hartikainen,?[ES6: What are the benefits of the new features in practice?](http://codeutopia.net/blog/2015/01/06/es6-what-are-the-benefits-of-the-new-features-in-practice/) ## 語法點 * Kyle Simpson,?[For and against?`let`](http://davidwalsh.name/for-and-against-let): 討論let命令的作用域 * kangax,?[Why?`typeof`?is no longer “safe”](http://es-discourse.com/t/why-typeof-is-no-longer-safe/15): 討論在塊級作用域內，let命令的變量聲明和賦值的行為 * Axel Rauschmayer,?[Variables and scoping in ECMAScript 6](http://www.2ality.com/2015/02/es6-scoping.html): 討論塊級作用域與let和const的行為 * Nick Fitzgerald,?[Destructuring Assignment in ECMAScript 6](http://fitzgeraldnick.com/weblog/50/): 詳細介紹解構賦值的用法 * Nicholas C. Zakas,?[Understanding ECMAScript 6 arrow functions](http://www.nczonline.net/blog/2013/09/10/understanding-ecmascript-6-arrow-functions/) * Jack Franklin,?[Real Life ES6 - Arrow Functions](http://javascriptplayground.com/blog/2014/04/real-life-es6-arrow-fn/) * Axel Rauschmayer,?[Handling required parameters in ECMAScript 6](http://www.2ality.com/2014/04/required-parameters-es6.html) * Axel Rauschmayer,?[ECMAScript 6’s new array methods](http://www.2ality.com/2014/05/es6-array-methods.html): 對ES6新增的數組方法的全面介紹 * Dmitry Soshnikov,?[ES6 Notes: Default values of parameters](http://dmitrysoshnikov.com/ecmascript/es6-notes-default-values-of-parameters/): 介紹參數的默認值 * Ragan Wald,?[Destructuring and Recursion in ES6](http://raganwald.com/2015/02/02/destructuring.html): rest參數和擴展運算符的詳細介紹 ## Collections * Mozilla Developer Network,?[WeakSet](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakSet)：介紹WeakSet數據結構 * Dwayne Charrington,?[What Are Weakmaps In ES6?](http://ilikekillnerds.com/2015/02/what-are-weakmaps-in-es6/): WeakMap數據結構介紹 * Axel Rauschmayer,?[ECMAScript 6: maps and sets](http://www.2ality.com/2015/01/es6-maps-sets.html): Set和Map結構的詳細介紹 * Jason Orendorff,?[ES6 In Depth: Collections](https://hacks.mozilla.org/2015/06/es6-in-depth-collections/)：Set和Map結構的設計思想 ## 字符串 * Mathias Bynens,?[Unicode-aware regular expressions in ES6](https://mathiasbynens.be/notes/es6-unicode-regex): 詳細介紹正則表達式的u修飾符 * Nicholas C. Zakas,?[A critical review of ECMAScript 6 quasi-literals](http://www.nczonline.net/blog/2012/08/01/a-critical-review-of-ecmascript-6-quasi-literals/) * Mozilla Developer Network,?[Template strings](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/template_strings) * Addy Osmani,?[Getting Literal With ES6 Template Strings](http://updates.html5rocks.com/2015/01/ES6-Template-Strings): 模板字符串的介紹 * Blake Winton,?[ES6 Templates](https://weblog.latte.ca/blake/tech/firefox/templates.html): 模板字符串的介紹 ## Object * Nicholas C. Zakas,?[Creating defensive objects with ES6 proxies](http://www.nczonline.net/blog/2014/04/22/creating-defensive-objects-with-es6-proxies/) * Addy Osmani,?[Data-binding Revolutions with Object.observe()](http://www.html5rocks.com/en/tutorials/es7/observe/): 介紹Object.observe()的概念 * Sella Rafaeli,?[Native JavaScript Data-Binding](http://www.sellarafaeli.com/blog/native_javascript_data_binding): 如何使用Object.observe方法，實現數據對象與DOM對象的雙向綁定 * Axel Rauschmayer,?[Meta programming with ECMAScript 6 proxies](http://www.2ality.com/2014/12/es6-proxies.html): Proxy詳解 * Daniel Zautner,?[Meta-programming JavaScript Using Proxies](http://dzautner.com/meta-programming-javascript-using-proxies/): 使用Proxy實現元編程 * Tom Van Cutsem,?[Harmony-reflect](https://github.com/tvcutsem/harmony-reflect/wiki): Reflect對象的設計目的 * Tom Van Cutsem,?[Proxy Traps](https://github.com/tvcutsem/harmony-reflect/blob/master/doc/traps.md)：Proxy攔截操作一覽 * Tom Van Cutsem,?[Reflect API](https://github.com/tvcutsem/harmony-reflect/blob/master/doc/api.md) * Tom Van Cutsem,?[Proxy Handler API](https://github.com/tvcutsem/harmony-reflect/blob/master/doc/handler_api.md) ## Symbol * Axel Rauschmayer,?[Symbols in ECMAScript 6](http://www.2ality.com/2014/12/es6-symbols.html): Symbol簡介 * MDN,?[Symbol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol): Symbol類型的詳細介紹 * Jason Orendorff,?[ES6 In Depth: Symbols](https://hacks.mozilla.org/2015/06/es6-in-depth-symbols/) * Keith Cirkel,?[Metaprogramming in ES6: Symbols and why they're awesome](http://blog.keithcirkel.co.uk/metaprogramming-in-es6-symbols/): Symbol的深入介紹 ## Iterator * Mozilla Developer Network,?[Iterators and generators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators) * Mozilla Developer Network,?[The Iterator protocol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol) * Jason Orendorff,?[ES6 In Depth: Iterators and the for-of loop](https://hacks.mozilla.org/2015/04/es6-in-depth-iterators-and-the-for-of-loop/): 遍歷器與for...of循環的介紹 * Axel Rauschmayer,?[Iterators and generators in ECMAScript 6](http://www.2ality.com/2013/06/iterators-generators.html): 探討Iterator和Generator的設計目的 * Axel Rauschmayer,?[Iterables and iterators in ECMAScript 6](http://www.2ality.com/2015/02/es6-iteration.html): Iterator的詳細介紹 * Kyle Simpson,?[Iterating ES6 Numbers](http://blog.getify.com/iterating-es6-numbers/): 在數值對象上部署遍歷器 * Mahdi Dibaiee,?[ES7 Array and Generator comprehensions](http://dibaiee.ir/es7-array-generator-comprehensions/)：ES7的Generator推導 ## Generator * Matt Baker,?[Replacing callbacks with ES6 Generators](http://flippinawesome.org/2014/02/10/replacing-callbacks-with-es6-generators/) * Steven Sanderson,?[Experiments with Koa and JavaScript Generators](http://blog.stevensanderson.com/2013/12/21/experiments-with-koa-and-javascript-generators/) * jmar777,?[What's the Big Deal with Generators?](http://devsmash.com/blog/whats-the-big-deal-with-generators) * Marc Harter,?[Generators in Node.js: Common Misconceptions and Three Good Use Cases](http://strongloop.com/strongblog/how-to-generators-node-js-yield-use-cases/): 討論Generator函數的作用 * StackOverflow,?[ES6 yield : what happens to the arguments of the first call next()?](http://stackoverflow.com/questions/20977379/es6-yield-what-happens-to-the-arguments-of-the-first-call-next): 第一次使用next方法時不能帶有參數 * Kyle Simpson,?[ES6 Generators: Complete Series](http://davidwalsh.name/es6-generators): 由淺入深探討Generator的系列文章，共四篇 * Gajus Kuizinas,?[The Definitive Guide to the JavaScript Generators](http://gajus.com/blog/2/the-definetive-guide-to-the-javascript-generators): 對Generator的綜合介紹 * Jan Krems,?[Generators Are Like Arrays](https://gist.github.com/jkrems/04a2b34fb9893e4c2b5c): 討論Generator可以被當作數據結構看待 * Harold Cooper,?[Coroutine Event Loops in Javascript](http://syzygy.st/javascript-coroutines/): Generator用于實現狀態機 * Ruslan Ismagilov,?[learn-generators](https://github.com/isRuslan/learn-generators): 編程練習，共6道題 * Steven Sanderson,?[Experiments with Koa and JavaScript Generators](http://blog.stevensanderson.com/2013/12/21/experiments-with-koa-and-javascript-generators/): Generator入門介紹，以Koa框架為例 ## Promise對象 * Jake Archibald,?[JavaScript Promises: There and back again](http://www.html5rocks.com/en/tutorials/es6/promises/) * Tilde,?[rsvp.js](https://github.com/tildeio/rsvp.js) * Sandeep Panda,?[An Overview of JavaScript Promises](http://www.sitepoint.com/overview-javascript-promises/): ES6 Promise入門介紹 * Dave Atchley,?[ES6 Promises](http://www.datchley.name/es6-promises/): Promise的語法介紹 * Jafar Husain,?[Async Generators](https://docs.google.com/file/d/0B4PVbLpUIdzoMDR5dWstRllXblU/view?sle=true): 對async與Generator混合使用的一些討論 * Axel Rauschmayer,?[ECMAScript 6 promises (2/2): the API](http://www.2ality.com/2014/10/es6-promises-api.html): 對ES6 Promise規格和用法的詳細介紹 * Jack Franklin,?[Embracing Promises in JavaScript](http://javascriptplayground.com/blog/2015/02/promises/): catch方法的例子 * Luke Hoban,?[Async Functions for ECMAScript](https://github.com/lukehoban/ecmascript-asyncawait): Async函數的設計思想，與Promise、Gernerator函數的關系 * Jafar Husain,?[Asynchronous Generators for ES7](https://github.com/jhusain/asyncgenerator): Async函數的深入討論 * Nolan Lawson,?[Taming the asynchronous beast with ES7](http://pouchdb.com/2015/03/05/taming-the-async-beast-with-es7.html): async函數通俗的實例講解 ## Class與模塊 * Sebastian Porto,?[ES6 classes and JavaScript prototypes](https://reinteractive.net/posts/235-es6-classes-and-javascript-prototypes): ES6 Class的寫法與ES5 Prototype的寫法對比 * Jack Franklin,?[An introduction to ES6 classes](http://javascriptplayground.com/blog/2014/07/introduction-to-es6-classes-tutorial/): ES6 class的入門介紹 * Axel Rauschmayer,?[ECMAScript 6: new OOP features besides classes](http://www.2ality.com/2014/12/es6-oop.html) * Axel Rauschmayer,?[Classes in ECMAScript 6 (final semantics)](http://www.2ality.com/2015/02/es6-classes-final.html): Class語法的詳細介紹和設計思想分析 * Maximiliano Fierro,?[Declarative vs Imperative](http://elmasse.github.io/js/decorators-bindings-es7.html): Decorators和Mixin介紹 * Addy Osmani,?[Exploring ES2016 Decorators](https://medium.com/google-developers/exploring-es7-decorators-76ecb65fb841): Decorator的深入介紹 * Maximiliano Fierro,?[Traits with ES7 Decorators](http://cocktailjs.github.io/blog/traits-with-es7-decorators.html): Trait的用法介紹 ## 模塊 * Jack Franklin,?[JavaScript Modules the ES6 Way](http://24ways.org/2014/javascript-modules-the-es6-way/): ES6模塊入門 * Axel Rauschmayer,?[ECMAScript 6 modules: the final syntax](http://www.2ality.com/2014/09/es6-modules-final.html): ES6模塊的介紹，以及與CommonJS規格的詳細比較 * Dave Herman,?[Static module resolution](http://calculist.org/blog/2012/06/29/static-module-resolution/): ES6模塊的靜態化設計思想 ## 工具 * Google,?[traceur-compiler](https://github.com/google/traceur-compiler): Traceur編譯器 * Casper Beyer,?[ECMAScript 6 Features and Tools](http://caspervonb.github.io/2014/03/05/ecmascript6-features-and-tools.html) * Stoyan Stefanov,?[Writing ES6 today with jstransform](http://www.phpied.com/writing-es6-today-with-jstransform/) * ES6 Module Loader,?[ES6 Module Loader Polyfill](https://github.com/ModuleLoader/es6-module-loader): 在瀏覽器和node.js加載ES6模塊的一個庫，文檔里對ES6模塊有詳細解釋 * Paul Miller,?[es6-shim](https://github.com/paulmillr/es6-shim): 一個針對老式瀏覽器，模擬ES6部分功能的墊片庫（shim） * army8735,?[Javascript Downcast](https://github.com/army8735/jsdc): 國產的ES6到ES5的轉碼器 * esnext,?[ES6 Module Transpiler](https://github.com/esnext/es6-module-transpiler)：基于node.js的將ES6模塊轉為ES5代碼的命令行工具 * Sebastian McKenzie,?[BabelJS](http://babeljs.io/): ES6轉譯器 * SystemJS,?[SystemJS](https://github.com/systemjs/systemjs): 在瀏覽器中加載AMD、CJS、ES6模塊的一個墊片庫 * Modernizr,?[HTML5 Cross Browser Polyfills](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills#ecmascript-6-harmony): ES6墊片庫清單 * Facebook,?[regenerator](https://github.com/facebook/regenerator): 將Generator函數轉為ES5的轉碼器