テンプレート文字列
これは、私がとても気に入っているES6の特徴の1つです。変数と文字列の関係を非常に直感的に反映しています。 ES5では、文字列に変数を追加する場合は、次の記述方法を使用する必要があります。
Animate（box、 'translate（ - ' + itemwidth * num + 'px、0）'、1000、function（）{box.style.transitionduration = ''; box.style.transform = 'translate（-800px、0）'; flag = true;}）;ES6テンプレート文字列を使用して、文字列と変数を直接組み合わせて理解しやすくすることができます。
Animate（box、 `translate（ - $ {itemwidth*num} px、0）`、1000、function（）{box.style.transitionduration = ''; box.style.transform = `翻訳（ - $ {itemwidth*（item.length-2）} pxそれは非常に直感的で便利ですか？上記の2つの簡単な例から、ES6では、文字列がバックテック（ ``）でマークされていることは明らかです。
別の機能があります。テンプレート文字列は、折り畳まれた文字列を出力できます。これは、従来のES5文字列では不可能です。使用する必要があります（/n）、書き込み時にキャリッジリターンを入力するために書き込むことはできません。ただし、ES6文字列テンプレートでは、文字列が出力されたときにキャリッジリターン、スペース、および直接出力を入力するために直接書き込むことができます。これは非常に便利です。
let mystring = `abcdeffff fas`; console.log（mystring）;/*output abcdeffff fas*/
関数の拡張
1.関数のデフォルト値を設定します
関数の拡張では、関数が機能のデフォルト値を設定するように関数が追加されます。これは非常に良いと言えます。 ES5の関数のデフォルト値をどのように設定するかを覚えていますか？
関数テスト（a、b、c）{var a = a || 10; var a = b || 15; var c = c || 20; console.log（a+b+c）;}ここでは、デフォルト値を設定して、1日、A = 0インチを渡すまで、予想される効果を達成します。この時点で、このように書くのは間違っています。プログラムの場合、0はfalseであるため、Aはデフォルト値が10のため、予想される効果を達成できません。しかし、ES6は、デフォルト値を設定する非常に良い方法を提供します。上記のコードは次のように書き換えることができます。
関数テスト（a = 10、b = 15、c = 20）{console.log（a+b+c）;}2。矢印関数
cofficscriptを理解している学生は、cofbicecriptの力がその遍在する矢印機能であることを明らかにする必要があります。現在、ES6は正式にArrow機能を導入しているため、たとえば、プログラムを簡素化できます。
// ES5 var test = function（a、b）の書き込み方法{a+b;} // es6 var test2 = test（a、b）=> a+bの矢印関数。カルーセルを書くときは、グラフが正しい位置に移動できるように、小さなドットの配列オブジェクトの次の小さなドットにマウスを移動する必要があります。 ES5では、現在のオブジェクトに属性を追加する必要があります。これは、書く方が面倒で、書き込み方法は次のとおりです。
var liList = document.queryselectorall（ 'li'）; lilist [i] .addeventlistener（ 'mouseenter'、function（）{console.log（this.index）;}、false）;}this.index属性は、現在のマウスに配置された要素のインデックスであり、このインデックスに基づいて現在の要素が取得されます。ただし、ES6では、矢印関数と新しく導入されたindindexを配列内に直接使用して、現在のアクティブ要素のインデックスを見つけることができます。コードは次のとおりです。
let liList = document.queryselectorall（ 'li'）; let arraylilist = array.form（liList）; lilist [i] .addeventlistener（ 'mouseenter'、function（）{let thisindex = arraylilist.findindex（（n）=> n == this）;}、false）;}上記のコードで取得したthisindexは、現在のマウスに配置されたインデックスです。ここでは、矢印関数のパラメーターnを理解しています。パラメーターnを渡した後、オブジェクトがこれに等しいものを見つけるように配列内のオブジェクトを通過し、インデックスを返します。 array.from（）はここで使用されます。これは、ES6の配列に追加された新しい方法であり、クラス配列を配列に変換できます。
ES6の…ループの
上記のJSコードループは使用しますが、実際には、ES6のループのforに置き換えることができます。これにより、書き込みがより簡潔になります。 JSのループで…forを覚えていますか。このループは、キー価値のペアでキーをループできますが、値をループすることはできません。の出現は、その欠点を補うことです。 for…ofループで使用できる範囲には、配列、セットおよびマップ構造、いくつかの配列のようなオブジェクト（引数オブジェクト、DOMノデリストオブジェクトなど）、ジェネレーターオブジェクト、文字列が含まれます。したがって、このループを使用してforループを置き換えることができますが、ここでは、forのループを直接使用する場合、chrome49の下でエラーが報告されることに注意する必要があります。当局者は、これがChrome49のバグであり、Chrome51で修正されることを確認しました。だから私が書いていたとき、私はarray.from（）を使用してノデリストオブジェクトを配列に変換し、自信を持って動作できるようにしました。コードは次のとおりです。
let liList = document.queryselectorall（ 'li'）; let arraylilist = array.form（lilist）; for（let li of liList）{li.addeventlistener（ 'mouseenter'、function（）{let thisindex = arraylilist.findindex（n）=> n =>>>>>要約します
上記はこの記事のすべての内容です。それは非常に簡潔ではありませんか？この記事を通して、私はこれらのことだけがすでにES6の魅力を感じさせてくれたと感じています。 ES6を学ぶのが誰でも役立つことを願っています。