Help us understand the problem. What is going on with this article?

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

More than 5 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くらいですね。次回

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away