30分ES 6

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公式サイトで調べられます.
最も一般的なES 6の特性
let、const、class、extens、super、arrow functions、template string、destructring、default、ret argmentsこれらはES 6の最も常用するいくつかの文法で、基本的にそれらをマスターして、私達は天下を歩き回ることができてすべて恐くありません!一番分かりやすい言葉と例で説明します.読めばわかるという保証があります.let,const
この二つの用途はvarと似ています.いずれも変数を宣言するために使われていますが、実際の運用にはそれぞれの特殊な用途があります.まず次の例を見ます.

var name = 'zach'

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

console.log(name)  //obama

varを使用した二回の出力はすべてオーブであり、これはES 5が大域作用域と関数作用域のみであり、ブロックレベル作用領域がないため、多くの不合理なシーンをもたらしている.第一のシーンは、現在見られている内層変数が外層変数をカバーします.letは実際にJavaScriptのブロックレベルのスコープを追加しました.その宣言した変数は、letコマンドがあるコードブロック内でのみ有効です.

let name = 'zach'

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

console.log(name)  //zach

もう一つの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')

クラス、extens、super
この三つの特性はES 5の中で最も頭が痛いいくつかの部分に関連しています.プロトタイプ、コンストラクター、継承…あなたはまだそれらの複雑で分かりにくい文法に悩んでいますか?まだ針がどこを指しているのか悩んでいますか?
ES 6があります.もう悩みません.
ES 6は伝統言語に近い書き方を提供し、クラスという概念を導入しました.新しいクラスの書き方は対象の原型の書き方をはっきりさせ、対象に向けてプログラミングされた文法のようにも分かりやすいです.

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

上のコードはまずクラスで「クラス」を定義しています.中にはコンストラクションの方法があります.これは構造方法です.簡単に言えば、constructor内で定義されている方法と属性はインスタンスオブジェクト自身のものであり、constructor以外で定義されている方法と属性は全ての実力オブジェクトが共有できるものである.
Class間はextensのキーワードによって継承が可能であり、これはES 5のプロトタイプチェーンを修正することによって継承が可能であり、より明確で便利である.上では、1つのCatクラスを定義しています.このクラスは、extensキーワードを通じて、Animalクラスのすべての属性と方法を継承しています.
superキーワードとは、親タイプの例(すなわち、親タイプのthisオブジェクト)を意味します.サブクラスはconstructorメソッドでsuperメソッドを呼び出す必要があります.そうでないと、新しいインスタンスを作成する時にエラーが発生します.これは、子類が自分のthisの対象ではなく、父類のthisの対象を継承して加工しているからです.superメソッドを起動しないと、サブクラスはthisオブジェクトを得られません.
ES 6の継承メカニズムは、実質的には、親タイプのインスタンスオブジェクトthisを作成し(従って、最初にsuperメソッドを呼び出す必要があります)、その後、サブクラスの構造関数でthisを修正します.
P.Sがreactを書いていると、上記の3つのものが最新版Reactにたくさん出てきます.作成した各componentはReact.Componentのクラスを継承しています.
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}

もっと簡潔に見える以外に、アロウフュージョンにはスーパー無敵の機能があります.長い間、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つあります.

第一は、thisをselfに伝え、selfでthis

を指す.

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

第二の方法は、ビッド、すなわち

を用いることである.

 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}

destructuring
ES 6は、一定のパターンに従って、配列とオブジェクトから値を抽出し、変数に値を割り当てることができます.
次の例を見てください.

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||catを加えてデフォルト値を指定します.

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

ES 6を使うなら、直接こう書きます.

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

最後のレストの文法も簡単です.直接例を見ます.

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