Edited at

BabelのLearn ES6を学んでいく(1

More than 3 years have passed since last update.

https://babeljs.io/docs/learn-es6/

Aurelia のチュートリアルで触る機会があり、気になったので勉強していきます。http://www.es6fiddle.net/ で動かせるみたいなんで実際にやりながら見ていきます。


Learn ES6


Introduction

ECMAScript6は次のECMAScriptのスタンダードであり、2015/6に裁可の予定です。2009年のES5以降の大幅なアップデートになります。メジャーなJavascriptエンジンでは実装が進んでいます


ECMAScript 6 Features


Arrows



  • =>はfunctionのショートカットです。

  • C#,JAVA8,CoffeeScriptなどと似ています。

  • 式とステートメントの両方をサポートしています。

  • functionと異なり、thisは定義したオブジェクトと同じになります。

  • 例:http://www.es6fiddle.net/i89eeoyf/


Classes


  • class宣言が用意されました

  • 継承がサポートされsuperが使えます

  • staticメソッドがサポートされます

  • 例:http://www.es6fiddle.net/i89f4ngk/


Enhanced Object Literals


  • Objectリテラルの文法が更新されました

  • プロトタイプ__proto__がサポートされました

  • ショートカットが追加されました


  • foo: foofooのみで定義できます


  • foo: function(){}foo(){}のみで定義できます

  • プロパティ名を[]で囲むことで動的に定義できるようになりました

  • 例:http://www.es6fiddle.net/i89g5jq0/


Template Strings


  • 埋め込み文字がサポートされました

  • バッククォートで文字列を囲みます

  • 改行可能です

  • 変数を埋め込む場合${foo}のようにします

  • 例:http://www.es6fiddle.net/i89gnp7f/


Destructuring


  • 分解代入var [a, , b] = [1,2,3];がサポートされました

  • デフォルト値の指定var [a = 1] = [];が可能です

  • オブジェクトの分解var { op: a, lhs: { op: b }, rhs: c } = getASTNode()も可能です

  • 関数の引数function g({name: x}) {にも適応可能です。

  • 例:http://www.es6fiddle.net/i89h7790/

今回はここまで。全体の3分の1くらいですね。次回