350ポイントでのES6の概要。 パート1

24エントリのES6の詳細な一連のメモでは、ES6の構文の変更と革新のほとんどについて説明しています。 この出版物では、以前の記事で上記のすべてを要約し、すべてを一緒にもう一度見る機会を提供します。 また、必要に応じて詳細をすぐに確認できるように、ブログにリンクを追加しました。







箇条書きリストが好きだと聞いたので、ここに数百の要素で構成されるリストを含む記事があります。



まず、何が議論されるかが明確になるように目次を示します。 明らかに、目次も順序付けられていないリストです。 注：このトピックをさらに深く掘り下げたい場合は、一連の記事全体を読み 、ES6コードを個別に「掘り下げて」ください。



内容



●はじめに

●ツールキット

●割り当ての破棄

●スプレッド演算子とレストパラメーター

●矢印機能

●テンプレート文字列

●オブジェクトリテラル

●クラス

●Let and Const

●記号

●イテレータ

●ジェネレーター

●約束

●マップ

●WeakMaps

●セット

●WeakSets

●プロキシ

●リフレクション

●番号

●数学

●配列

●オブジェクト

●文字列とユニコード

●モジュール



このような長い目次でごめんなさい。 始めます。



はじめに



●ES6（Harmony、es-next、ES2015とも呼ばれる）は、最新の最終言語仕様です。

●2015年6月にES6の最終仕様が承認されました（そのためES2015）。

●将来の言語バージョンには、ES [YYYY]パターンに従って名前が付けられます（ES7のES2016など）。

o年次リリースサイクル。不可逆的な変更は次のリリースから機能し始めます。

o ES6はこのソリューションよりも前に登場したため、私たちのほとんどはまだES6と呼んでいます。

o ES2016（ES7）以降では、ESテンプレート[YYYY]を使用して新しいバージョンを参照する必要があります。

oこの命名パターンを使用する主な理由は、ブラウザーの製造元に最新の更新プログラムをできるだけ早く実装するよう圧力をかけることです。



ツールキット



●現在ES6を使用するには、JavaScriptからJavaScriptへのトランスポーターが必要です。

●トランスポーターは次の理由で来ました。

o新しいバージョンの言語のコードを古いバージョンのコードにコンパイルする機能を提供します。

oブラウザのサポートが改善されたら、ES2016およびES2017をES6などに置き換えます。

o改善されたソースマッピング機能が必要です。

o現在、本番環境でES6コードを実行する最も信頼性の高い方法です（ブラウザーがES5をサポートしているという事実にもかかわらず）。

●babel（transpiler）には、人間が読み取れる出力というキラー機能があります。

● babelを使用して、静的ビルド用にES6をES5にパイプします。

● babelifyを使用して、 うなり声 、 gulp 、またはnpm実行ビルドプロセスにbabelを埋め込みます。

●重み4.xx以上のnodejsを使用します-ES6には非常に適切なサポートがあります（v8に感謝）。

●node.jsの任意のバージョンでbabel-nodeを使用します-ES5でモジュールをトランスパイルします。

●Babelには、ES2016といくつかのプラグインを既にサポートしている拡張エコシステムがあります。

● ES6ツーリングの簡単な歴史を読んでください。



割り当ての破壊



●var {foo} = ponyは、var foo = pony.fooと同じです。

●var {foo：baz} = ponyはvar baz = pony.fooと同じです

●デフォルト値を設定できます。var{foo = 'bar'} = bazはfooを返します。baz.fooが未定義の場合、 'bar'になります。

●エイリアスの有無にかかわらず、好きなだけプロパティをドラッグできます。

o var {foo、bar：baz} = {foo：0、bar：1}はfoo：0およびbaz：1。

●さらに進むことができます：var {foo：{bar}} = {foo：{bar： 'baz'}}はbar： 'baz'を与えます。

●これにエイリアスを割り当てることもできます。var{foo：{bar：deep}} = {foo：{bar： 'baz'}}は、deep： 'baz'を提供します。

●見つからなかったプロパティは、未定義の変数{foo} = {}を返します。

●ネストされたプロパティが見つからなかった場合、エラーvar {foo：{bar}} = {}が返されます。

●これは配列に対しても機能し、[a、b] = [0、1]はa：0およびb：1を返します。

●配列の要素[a ,, b] = [0、1、2]をスキップできます。a：0およびb：2を取得します。

●3番目の「aux」変数[a、b] = [b、a]に頼らずに変数を交換できます。

●関数パラメーターで構造化を使用することもできます。

oデフォルト値の割り当てfunction foo（bar = 2）{};

oこれらの値はオブジェクト関数foo（bar = {a：1、b：2}）{};

o barを完全に破壊できます：function foo（{a = 1、b = 2}）{};

o何も渡されなかった場合、デフォルトで空の配列を取得します：function foo（{a = 1、b = 2} = {}）{}。



ES6 JavaScript Destructuring in Depthをお読みください。



スプレッドオペレーターとレストパラメーター



●残りのパラメーターは引数のようなもので、より良いだけです。

oメソッドシグネチャは、関数foo（... everything）{}として宣言されます。

oすべてがfooに渡されるすべてのパラメーターを持つ配列です。

oすべての前にいくつかのパラメーターに名前を付けることができます。たとえば、次のとおりです。function foo（bar、... rest）{};

oこれらのパラメーターは...残りから除外されます。

o ... restはリストの最後のパラメーターである必要があります。

●スプレッド演算子は魔法よりも優れています。また、...構文を使用して示されます。

oメソッドfn（... [1、2、3]）を呼び出すときに適用する必要がなくなります-fn（1、2、3）と同じです。

o単純化された連結：[1、2、... [3、4、5]、6、7];

o配列のような要素またはコレクションを配列にブラインドすることができます[... document.querySelectorAll（ 'img'）];

o [a ,, ... rest] = [1、2、3、4、5]を破棄する場合にも便利です。a：1とrest：[3、4、5];

oは、new + .applyをシンプルで新しい日付にします（... [2015、31、8]）。

● ES6スプレッドとバターを詳しく読む。



矢印関数



●関数param => returnValueを宣言する簡潔な方法。

●関数型プログラミングに有用、[1、2] .map（x => x * 2）。

●それを使用するいくつかの異なる方法があります（習慣を開発するのに時間がかかります）：

○パラメータが1の場合、p1 => exprは優れています。

○p1 => exprにはexprの暗黙的なreturnステートメントがあります。

○暗黙的にオブジェクトを返すには、括弧（）=>（{foo： 'bar'}）で囲む必要があります。そうしないと、エラーが発生します。

○0、2、またはそれ以上のパラメータがある場合は括弧が必要です（）=> exprまたは（p1、p2）=> expr;

○右側の中括弧はコードブロックを表し、複数の命令を含めることができます（）=> {};

○この構文を使用する場合、暗黙の戻り値はありません。記述する必要があります（）=> {return 'foo'}。

●矢印関数に静的に名前を付けることはできませんが、名前のないほとんどのメソッドのパフォーマンステストははるかに優れています。

●矢印関数は語彙環境に関連付けられています。

○これは、親の字句環境と同じコンテキストです。

○これは、.call、.apply、または「リフレクション」タイプの同様のメソッドを使用して変更できません。

● ES6 Arrow Functionsの詳細をお読みください。



パターン文字列



●文字列は、singleおよびdoubleに加えて、バックティック（ `）を使用して宣言できます。

●逆引用符で囲まれた文字列はパターン文字列です。

●テンプレート文字列は複数行にすることができます。

●テンプレート文字列により、評価が変数である「ponyfoo.com is $ {rating}」の中間計算が可能になります。

●有効なjs式を使用して評価できます。たとえば、「$ {2 * 3}」または「$ {foo（）}」です。

●マークされたテンプレートを使用して、中間値を計算するためのロジックを変更できます。

○プレフィックスfnをfn`foo、$ {bar}および$ {baz} `に追加します。

○fnは、テンプレート、...式で1回呼び出されます。

○テンプレートは['foo、'、 'and'、 '']であり、式は[bar、baz]です。

○結果fnはパターン文字列の値になります。

○使用例：不要なデータから入力式を削除する、パラメーターを解析するなど

●テンプレート文字列は、通常、一重引用符または二重引用符で囲まれた文字列よりも優れています。

● ES6テンプレートリテラルの詳細をお読みください。



オブジェクトリテラル



●{foo：foo}の代わりに、単純に{foo}-プロパティを記述するための省略形-値のペアを書くことができます。

●計算されたプロパティ名：{[prefix + 'Foo']： 'bar'}、prefix： 'moz'は{mozFoo： 'bar'}を返します。

●以前の2つの機能を同時に使用することはできません。エントリ{[foo]}は無効です。

●メソッド定義は、{foo（）{}}構文を使用してより簡潔にすることができます。

●「 オブジェクト」セクションも参照してください。

● ES6オブジェクトリテラル機能の詳細をお読みください。



クラス



●「従来の」クラスではなく、プロトタイプの継承メカニズムの上にある構文糖衣。

●構文は、クラスFoo {}オブジェクトの宣言に似ています。

●インスタンスメソッドnew Foo（）。Barは、オブジェクトリテラルクラスFoo {bar（）{}}の簡略化された構文を使用して宣言されます 。

●静的メソッド-Foo.isPonyFoo（）-プレフィックス、静的クラスキーワードFoo {staticisPonyFoo（）{}}が必要です。

●コンストラクターメソッドクラスFoo {constructor（）{/ *インスタンスの初期化* /}。

●簡略化された構文クラスPonyFooを使用したプロトタイプ継承は、Foo {}を拡張します。

● ES6クラスの詳細をお読みください。



Let and Const



●letおよびconstは、変数を宣言するときのvarの代替です。

●letは、親関数に関して、レキシカルスコープではなくブロックスコープを持ちます。

●varが関数の最上部まで上昇している間に、letをブロックの最上部まで上昇させます。

●「一時的なデッドゾーン」または単にVMZ：

○let foo宣言が発生するブロックの先頭から開始します。

○let foo宣言が行われるコード内のポイントで終了します（ここでは「クライム」は重要ではありません）。

○VMZ内でfooにアクセスまたは定義しようとすると（let fooステートメントが実行される前に）エラーが発生します。

○宣言の前に変数の値が変更される謎のバグの数を減らすのに役立ちます。

●constには、「rise」というブロックスコープもあり、VMZのセマンティクスに従います。

●const変数は、const初期化子foo = 'bar'を使用して宣言する必要があります。

●初期化後のconstの定義により、サイレントエラー（またはストリクトモードでは非サイレントエラー）が発生します。

●定数変数は変数を不変にしません：

○const foo = {bar： 'baz'}は、fooが常に式の右側のオブジェクトを参照することを意味します。

○const foo = {bar： 'baz'}; foo.bar = 'boo'は例外をスローしません。

●同じ名前の変数の定義は終了します。

●変数を再定義し、元のオブジェクトへの参照を失った場合のエラーを修正するように設計されています。

●ES6では、関数にはブロックスコープがあります。

○「ポップアップ」メカニズムを介したデータ漏洩の防止{let _foo = 'secret'、bar =（）=> _foo; };

○ほとんどの状況でカスタムコードを壊さないでください。原則として、必要なものです。

● ES6 Let、Const、および「Temporal Dead Zone」（TDZ）を詳しく読んでください。