ECMAScript 6 - 10素晴らしい新機能
JavaScriptが（JScriptおよびActionScriptと共に）ECMAScriptと呼ばれる汎用のクライアントサイドスクリプト言語仕様の実装であることをご存知ですか？この厄介な定義をもう少し魅力的にするために、ECMAScript（または正式にはECMA-262）は JavaScriptの使用方法と達成できる内容を定義する標準 それと.
言語の最新の第6版、ECMAScript 2015（またはES6）は、1997年の最初のバージョン以来のおそらく最も重要なアップデートです。最新リリースの主な目的は、より大きなアプリケーションとライブラリを作成するためのより良いサポートを提供することです。これは、より成熟した構文、コーディングを容易にするための新しいショートカット、そして新しいメソッド、キーワード、データ型、その他多くの機能強化を意味します。.
ES6のドキュメントは充実しています。読みたい場合は、ECMA InternationalのWebサイトから仕様全体をダウンロードできます。この記事では、ES6にはもっと多くの機能が提供されていますが、厳選された10の機能について説明します。それを試してみたいのであれば、ES6 Fiddleがそれを行うのに最適な場所です。また、そこにいくつかのサンプルコードスニペットもあります。.
ECMAScript 6のサポート
ブラウザのベンダーは、ECMAScript 6の機能に対するサポートを徐々に追加しています。新しい機能に対するブラウザおよびコンパイラのサポートについては、こちらのすばらしい互換表をご覧ください。.
Node.jsでのES6サポートに興味があるなら、こちらのドキュメントをチェックしてください。.
現在すべての機能がサポートされているわけではありませんが、Babelのようなtranspilerを使ってES6コードをES5に変換することができます。 Babel用のクールなGruntプラグイン、Grunt用の素晴らしいES6プラグイン、そして素晴らしいGulp-Babelプラグインがあるので、幸運にもたくさんの選択肢があります。.
これにより、互換性の問題について心配する必要はありませんが、強化された構文と機能を使い始めることができます。それでは、機能を見てみましょう.
1.新しい させて キーワード
ES6は新しいを紹介します させて ステートメント、式、（n inner）関数など、ブロックの範囲内でローカル変数を宣言できるようにするキーワード。例えば、 にとって 次のようにループしてから、同じ変数名を再利用します（スコープは にとって 次の中のループ） もし ステートメント：
（（i = 0; iとする） < myArray.length; i++) // Do something inside the block if (x > 0 && x！= y）// "i"を再利用しますi = x * y
を使う させて キーワードを使用すると、よりクリーンで使いやすいコードになります。違いは させて そして var たとえば、で定義されたローカル変数です。 var keywordは囲み関数全体で使用できますが、変数は次のように定義されます。 させて 自分自身の（サブ）ブロックでのみ動作する. みましょう グローバルに使用することもでき、この場合それは同じように振る舞います var. もちろん、ES6ではまだ使用できます var 欲しいなら.
2.新しい const キーワード
新しい const keywordは、不変変数とも呼ばれる定数を宣言することを可能にします。これに対して、後で新しいコンテンツを再割り当てすることはできません。.
const MY_CONST = 12; console.log（MY_CONST）; // 12 MY_CONST = 16; //新しい値を定数に再割り当てすることはできないので、サイレントエラー
不変変数はECMAScript 6では必ずしも完全に不変というわけではありませんが、定数がオブジェクトを保持している場合は、後でそのプロパティとメソッドの値を変更することができます。配列の要素についても同じことが言えます。.
const MY_CONSTANT = myProperty：6; console.log（MY_CONSTANT.myProperty）; // 6 MY_CONSTANT.myProperty = 18; console.log（MY_CONSTANT.myProperty）; // 18 const OTHER_CONSTANT = [12、14、16]; console.log（OTHER_CONSTANT [0]）; // 12 OTHER_CONSTANT [0] = 22; console.log（OTHER_CONSTANT [0]）; // 22
上記のコードスニペットでMY_CONSTANTオブジェクトに新しい値を直接再割り当てすることはまだできません。つまり、プロパティやメソッドの名前を変更することはできず、新しいものを追加したり既存のものを削除することもできません。次のこと：
MY_CONSTANT = newProperty：18; console.log（MY_CONSTANT.newProperty）; //エラー
3.矢印機能
ECMAScript 6は私たちが書く方法を容易にします 無名関数, 我々は完全に省略することができますように 関数 キーワード。新しい構文を使うだけでいいのです。 矢印機能, =>矢印記号（太い矢印）にちなんで名付けられました。.
// 1. ES6の1つのパラメータで、sum =（a、b）=> a + bとします。 // ES5ではvar sum = function（a、b）a + bを返す。 ; // 2. ES6にパラメータがない場合は、randomNum =（）=> Math.random（）;とします。 // ES5では、var randomNum = function（）Math.random（）を返します。 ; // 3. ES6に戻らずにmessage =（name）=> alert（ "Hi" + name + "！"）とします。 // ES5では、var message = function（yourName）alert（ "こんにちは" + yourName + "！"）; ;
通常の機能と矢印機能には大きな違いがあります。つまり、矢印機能には この で定義された関数のように自動的に値 関数 キーワードdo。矢印機能 語彙的にバインドする の この 現在のスコープに対する値。これは私達が容易に再使用できることを意味します この 内部関数のキーワードES5では、それは次のハックによってのみ可能です。
// ES5内部関数でthisキーワードを使用しない…addAll：function addAll（pieces）var self = this; _.each（piece、function（piece）self.add（piece）;）; 、… // ES6同じ内部関数が独自の "this"を使用できるようになりました。…addAll：function addAll（pieces）_.each（pieces、piece => this.add（piece））; …、……
上記のコードはMozilla Hacksのものです。
4.新しい 広がる オペレーター
新しい 広がる operatorは3つのドット（…）でマークされており、複数の予期される項目の場所に署名するためにそれを使用することができます。 spread演算子の最も一般的な使用例の1つは、配列の要素を別の配列に挿入することです。
myArray = [1、2、3]とします。 newArray = […myArray、4、5、6];とします。 console.log（newArray）; // 1、2、3、4、5、6
私達はまたのてこ作用を利用することができます 広がる 配列から引数を渡したい関数呼び出しのoperator：
myArray = [1、2、3]とします。関数sum（a、b、c）a + b + cを返す。 console.log（sum（…myArray））; // 6
の 広がる operatorは、同じ配列または関数呼び出しで複数回使用できるため、非常に柔軟です。.
5.パラメータのデフォルト値と新しい休息パラメータ
幸いなことに、ECMAScript 6では関数のパラメータにデフォルト値を追加することができます。つまり、関数呼び出しの後半で引数を渡さないと、デフォルトのパラメータが使用されます。 ES5では、パラメータのデフォルト値は常にに設定されています。 未定義, だから私たちが望むものにそれらを設定する新しい可能性は間違いなく言語の大きな強化です。.
関数sum（a = 2、b = 4）a + bを返す。 console.log（sum（））; // 6 console.log（sum（3、6））; // 9
ES6では、新しい種類のパラメータ、 休憩パラメータ. それらはスプレッド演算子に似た外観と動作をします。関数呼び出しの後半で渡される引数の数がわからない場合は便利です。 Arrayオブジェクトのプロパティとメソッドをrestパラメータに使用できます。
function putInAlphabet（…args）let sorted = args.sort（）;ソート済みを返します。 console.log（putInAlphabet（ "e"、 "c"、 "m"、 "a"、 "s"、 "c"、 "r"、 "i"、 "p"、 "t"））; // a、c、c、e、i、m、p、r、s、t
6.新しい の ステートメント
新しいの助けを借りて の ループすることで、配列や他の繰り返し可能なオブジェクトを簡単に繰り返すことができます。新しいと一緒に の ECMAScript 6では、2つの新しい反復可能オブジェクトも導入されています。キー/値マップ用のMap、およびプリミティブ値とオブジェクト参照になる可能性がある一意の値のコレクション用のSetです。使うときは の ステートメント、ブロック内のコードは反復可能オブジェクトの各要素に対して実行されます。.
myArray = [1、2、3、4、5]とします。 sum = 0とする。 for（myArrayのiとする）sum + = i; console.log（sum）; // 15（= 1 + 2 + 3 + 4 + 5）
テンプレートリテラル
ECMAScript 6は文字列連結の新しい選択肢を提供します。. テンプレートリテラル 私達が私達が私達が望むあらゆる点に異なる値を埋め込むことができるテンプレートを簡単に作成することを可能にします。そうするために私達は使用する必要があります $ … 次のようにして、変数、配列、またはオブジェクトから渡すことができるデータを挿入したい場所に構文を使用します。
顧客= タイトル： 'Ms'、名： 'Jane'、姓： 'Doe'、年齢： '34'とします。 let template = '親愛なる$ customer.title $ customer.firstname $ customer.surname！ $ customer.age歳の誕生日おめでとう！ console.log（テンプレート）。 //親愛なるMs Jane Doeさん。 34歳の誕生日おめでとう!
8.クラス
ES6では、既存のプロトタイプベースの継承に基づいて構築されたJavaScriptクラスが導入されました。新しい構文により、オブジェクトの作成、継承の活用、およびコードの再利用がより簡単になります。 JavaScriptがどのように機能するのかを他のプログラミング言語から学ぶ初心者にも理解しやすくなります。.
ES6では、クラスは新しいクラスで宣言されています。 クラス キーワード、そして持っている必要があります コンストラクタ（） 新しいオブジェクトがインスタンス化されたときに呼び出されるメソッド new myClass（） 構文。新しいクラスを拡張することも可能です。 クラスChildはParentを継承します PHPのような他のオブジェクト指向言語からなじみのある構文。関数宣言や変数宣言とは異なり、クラス宣言はECMAScript 6では使用されないことを知っておくことも重要です。.
class Polygon constructor（height、width）//クラスコンストラクタthis.name = 'Polygon'; this.height =高さ。 this.width = width; sayName（）//クラスメソッドconsole.log（ 'こんにちは、私はです'、this.name + '。'）; myPolygon = new Polygon（5、6）;とします。 console.log（myPolygon.sayName（））; //こんにちは、私はPolygonです.
ES6フィドルの例からの上記のコード, .
9.モジュール
JavaScriptがモジュール式であるとしたらどれほどクールなのか疑問に思ったことはありますか？もちろん、その前にCommonJS（Node.jsで使用）やAMD（Asynchronous Module Definition）（RequireJSで使用）などの回避策がありましたが、ES6ではネイティブ機能としてモジュールが導入されています。.
各モジュールをそれぞれ独自のファイルに定義してから、 輸出する 変数と関数をエクスポートするためのキーワード に 他のファイル インポート それらをインポートするためのキーワード から 次の構文に従って他のファイルを作成します。
// functions.js function cube（a）aを返す* a * a;関数cubeRoot（a）戻りMath.cbrt（a）; export cube、cubeRoot //またはexport cube as cb、cubeRoot as cr // app.js cube、cubeRootを 'functions'からインポートします。 console.log（キューブ（4））。 // 64 console.log（cubeRoot（125））; // 5
モジュールに格納されたコードは外部からは見えないので、この解決策は素晴らしいです。他のファイルからアクセスしたい部分だけをエクスポートする必要があります。私たちはES6モジュールでもっと驚くべきことをすることができます、ここであなたはそれらについての素晴らしいそして詳細な説明を見つけることができます.
10.新しい方法の負荷
ECMAScript 6では、既存の文字列プロトタイプ、配列オブジェクト、配列プロトタイプ、および数学オブジェクトのための多くの新しいメソッドが導入されました。新しいメソッドは、これらのエンティティを操作する方法を大幅に向上させることができます。 Mozilla Devには、新しい追加の優れたコード例があります。時間をかけて徹底的に検討する価値があります。.
それらが本当にクールであることを示すためだけに、ここに私のお気に入りがあります：Arrayプロトタイプのfindメソッド。各要素に対してコールバック関数を実行し、それから最初の要素を返すことで配列の要素に対する特定の基準をテストできます戻る 本当の.
関数isPrime（要素、インデックス、配列）var start = 2;間（開始 <= Math.sqrt(element)) if (element % start++ < 1) return false; return element > 1; console.log（[4、6、8、12] .find（isPrime））; //未定義、見つかりませんconsole.log（[4、5、8、12] .find（isPrime））; // 5
上記のコード：Mozilla Dev
