ES 6/ES 2015のコアコンテンツを30分で把握

原文住所:http://www.jianshu.com/p/ebfeb687eb70
ES 6/ES 2015のコアコンテンツを30分で把握
 
作成者
Zachary_Wang 
に注目
2016.01.25 22:48* 
文字数2453
34399を読む
コメント45
好きです

ECMAScript 6(以下、ES 6と略す)は、JavaScript言語の次世代標準である.現在のバージョンのES 6は2015年にリリースされているため、ECMAScript 2015とも呼ばれています.
つまり、ES 6はES 2015です.
現在、すべてのブラウザがES 6のすべての特性を互換性があるわけではありませんが、実際のプロジェクトでES 6を使用するプログラマーが増えています.だからあなたは今ES 6を使うつもりはありませんが、他の人のあなたを理解するためにES 6の文法を理解しなければなりません...
ES 6の文法を正式に説明する前に、Babelを理解しなければなりません.Babel
Babelは広く使用されているES 6トランスコーダであり、ES 6コードをES 5コードに変換して既存の環境で実行することができる.Babelを使用するには、自分の慣れたツールを選択することができます.具体的な手順は、Babelの公式サイトで直接確認することができます.

https://babeljs.io/docs/setup/
最も一般的なES 6特性let, const, class, extends, super, arrow functions, template string, destructuring, default, rest argumentsこれらはES 6で最もよく使われるいくつかの文法で、基本的にそれらをマスターすれば、私たちは天下を歩き回ることができます.私は最も分かりやすい言語と例でそれらを説明して、一目でわかることを保証して、勉強するとできます.
let, const
この2つの用途はvarと類似しており、変数を宣言するために使用されているが、実際の運用では2人ともそれぞれ特殊な用途がある.まず、次の例を見てみましょう.

var name = 'zach'

while (true) {
    var name = 'obama'
    console.log(name)  //obama
    break
}

console.log(name)  //obama

varを用いた2回の出力はいずれもobamaである.これは、ES 5がグローバル役割ドメインと関数役割ドメインのみであり、ブロックレベルの役割ドメインがないため、多くの不合理なシーンをもたらす.1つ目のシーンは、現在見ている内層変数が外層変数を上書きすることです.letは実際にJavaScriptにブロックレベルの役割ドメインを追加した.宣言された変数は、letコマンドが存在するコードブロック内でのみ有効です.

let name = 'zach'

while (true) {
    let name = 'obama'
    console.log(name)  //obama
    break
}

console.log(name)  //zach

もう1つのvarがもたらす不合理なシーンは、カウントするためのループ変数がグローバル変数に漏洩することであり、次の例を参照してください.

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 10

上記のコードでは、変数iはvar宣言であり、グローバル範囲で有効です.したがって、ループのたびに、新しいi値は古い値を上書きし、最後に最後のラウンドのiの値が出力されます.letを使用するとこの問題は発生しません.

var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6

もっと一般的な例を見て、ES 6を使わずに閉パッケージでこの問題をどのように解決するかを理解します.

var clickBoxs = document.querySelectorAll('.clickBox')
for (var i = 0; i < clickBoxs.length; i++){
    clickBoxs[i].onclick = function(){
        console.log(i)
    }
}

私たちはもともと異なるclickBoxをクリックして、異なるiを表示することを望んでいたが、事実は私たちがどのclickBoxをクリックしても、出力は5だった.では、閉パッケージでどのように解決するかを見てみましょう.

function iteratorFactory(i){
    var onclick = function(e){
        console.log(i)
    }
    return onclick;
}
var clickBoxs = document.querySelectorAll('.clickBox')
for (var i = 0; i < clickBoxs.length; i++){
    clickBoxs[i].onclick = iteratorFactory(i)
}

constは変数を宣言するためにも使用されますが、定数を宣言します.宣言すると定数の値は変更できません.

const PI = Math.PI

PI = 23 //Module build failed: SyntaxError: /es6/app.js: "PI" is read-only

constで宣言された定数を変更しようとすると、ブラウザがエラーを報告します.constには、サードパーティ製ライブラリを参照するときに宣言される変数があります.constで宣言すると、将来うっかり名前を変更してバグが発生しないようにすることができます.

const monent = require('moment')

class, extends, super
この3つの特性はES 5の中で最も悩ましいいくつかの部分に関連しています:プロトタイプ、構造関数、継承...複雑で分かりにくい文法に悩んでいますか?あなたはまだ針がどこを指しているのか悩んでいますか?
ES 6があればもう悩まない!
ES 6は伝統的な言語に近い書き方を提供し,Class(クラス)という概念を導入した.新しいclassの書き方は、オブジェクトの原型の書き方をより明確にし、オブジェクト向けのプログラミングの文法のようにし、より分かりやすくします.

class Animal {
    constructor(){
        this.type = 'animal'
    }
    says(say){
        console.log(this.type + ' says ' + say)
    }
}

let animal = new Animal()
animal.says('hello') //animal says hello

class Cat extends Animal {
    constructor(){
        super()
        this.type = 'cat'
    }
}

let cat = new Cat()
cat.says('hello') //cat says hello

上記のコードはまずclassで「クラス」を定義し、constructorのメソッドが構造メソッドであり、thisのキーワードはインスタンスオブジェクトを表す.簡単に言えば、constructor内で定義された方法および属性は、インスタンスオブジェクト自体であり、constructor外で定義された方法および属性は、すべての実力オブジェクトが共有できる.
Class間ではextendsキーワードで継承が可能であり,ES 5のプロトタイプチェーンの修正による継承よりも明確で便利である.上記のCatクラスはextendsキーワードでAnimalクラスのすべての属性とメソッドを継承しています.superキーワード.親のインスタンス(親のthisオブジェクト)を指します.サブクラスは、constructorメソッドでsuperメソッドを呼び出さなければなりません.そうしないと、インスタンスを新規作成するとエラーが発生します.これは、子が自分のthisオブジェクトを持たず、親のthisオブジェクトを継承して加工するためである.superメソッドを呼び出さないと、サブクラスはthisオブジェクトを得ることができません.
ES 6の継承メカニズムは、実質的に親クラスのインスタンスオブジェクトthisを作成し(superメソッドを呼び出す必要がある)、次にサブクラスの構造関数でthisを変更する.
P.S reactを書くと、以上の3つのものが最新版Reactにたくさん登場していることがわかります.作成された各componentは、React.Componentを継承するクラスです.詳細はreactドキュメントを参照
arrow function
これはおそらくES 6で最もよく使われる新しい特性で、functionを書くのは元の書き方よりずっと簡潔ではっきりしています.

function(i){ return i + 1; } //ES5
(i) => i + 1 //ES6

まるで簡単で話にならないでしょう...方程式が複雑な場合は、{}でコードをパッケージする必要があります.

function(x, y) { 
    x++;
    y--;
    return x + y;
}
(x, y) => {x++; y--; return x+y}

より簡潔に見えるほか、arrow functionには超無敵の機能があります!長い間、JavaScript言語のthisのオブジェクトは頭が痛い問題であり、オブジェクトメソッドでthisを使用するには、非常に注意しなければならない.例:

class Animal {
    constructor(){
        this.type = 'animal'
    }
    says(say){
        setTimeout(function(){
            console.log(this.type + ' says ' + say)
        }, 1000)
    }
}

 var animal = new Animal()
 animal.says('hi')  //undefined says hi

setTimeoutのthisがグローバルオブジェクトを指しているため、上記のコードを実行するとエラーが発生します.従来の解決策は、正しく動作するために2つあります.
1つ目は、thisをselfに渡し、selfでthis

 says(say){
     var self = this;
     setTimeout(function(){
         console.log(self.type + ' says ' + say)
     }, 1000)

を指す.2つ目の方法はbind(this)、すなわち

 says(say){
     setTimeout(function(){
         console.log(self.type + ' says ' + say)
     }.bind(this), 1000)

ですが、矢印関数があれば、そんなに面倒なことはありません.

class Animal {
    constructor(){
        this.type = 'animal'
    }
    says(say){
        setTimeout( () => {
            console.log(this.type + ' says ' + say)
        }, 1000)
    }
}
 var animal = new Animal()
 animal.says('hi')  //animal says hi

矢印関数を使用すると、関数内のthisオブジェクトは、使用時に存在するオブジェクトではなく、定義時に存在するオブジェクトです.矢印関数の内部にthisをバインドするメカニズムがあるわけではありませんが、実際には矢印関数には独自のthisがありません.このthisは外部を継承しているので、内部のthisは外層コードブロックのthisです.
template string
これも非常に役に立ち、大きなhtmlコンテンツをドキュメントに挿入する場合、従来の書き方は非常に面倒なので、以前はmustacheなどのテンプレートツールライブラリを引用していました.
次のコードを見てみましょう.

$("#result").append(
  "There are " + basket.count + " " +
  "items in your basket, " +
  "" + basket.onSale +
  " are on sale!"
);

テキストと変数を接続するために'+'番号の山を使用しますが、ES 6の新しいプロパティテンプレート文字列``を使用すると、直接このように書くことができます.

$("#result").append(`
  There are ${basket.count} items
   in your basket, ${basket.onSale}
  are on sale!
`);

開始を逆引用符（`）で識別し、${}で変数を参照し、すべてのスペースとインデントが出力に残されているのは、とても爽やかではないでしょうか.
React Routerは、バージョン1.0.3からES 6構文も使用されています.たとえば、この例:{taco.name} React Router
destructuring
ES 6は、一定のパターンに従って配列およびオブジェクトから値を抽出し、変数に値を付与することを可能にし、これをDestructuring(Destructuring)と呼ぶ.
次の例を見てください.

let cat = 'ken'
let dog = 'lili'
let zoo = {cat: cat, dog: dog}
console.log(zoo)  //Object {cat: "ken", dog: "lili"}

ES 6では、以下のように書くことができます.

let cat = 'ken'
let dog = 'lili'
let zoo = {cat, dog}
console.log(zoo)  //Object {cat: "ken", dog: "lili"}

逆にこう書くことができます.

let dog = {type: 'animal', many: 2}
let { type, many} = dog
console.log(type, many)   //animal 2

default, rest
defaultは簡単で、デフォルト値を意味します.次の例を見ると、animal()メソッドを呼び出すときにパラメータを渡すのを忘れてしまいます.従来の方法は、このtype = type || 'cat'を加えてデフォルト値を指定することです.

function animal(type){
    type = type || 'cat'  
    console.log(type)
}
animal()

ES 6を使えば私たちは直接こう書きます.

function animal(type = 'cat'){
    console.log(type)
}
animal()

最後のrest文法も簡単で、例を直接見ます.

function animals(...types){
    console.log(types)
}
animals('cat', 'dog', 'fish') //["cat", "dog", "fish"]

ES 6を使わなければ、ES 5のargumentsを使わなければなりません.
まとめ
以上がES 6で最もよく使われる文法です.この20%の文法は、ES 6の日常的な使用の中で80%を占めています.