es 6関数の矢印関数の使い方の例を詳しく説明します。

本論文の実例は、es 6関数の矢印関数の使用法を述べている。皆さんに参考にしてあげます。具体的には以下の通りです。
s 6は、「矢印」(=>)を使用して関数を定義することができます。

var f = v => v
//    
var f = function(v) {
 return v
}

矢印関数にパラメータが必要でない場合や複数のパラメータが必要である場合は、丸括弧を使ってパラメータ部分を表します。

var f = () => 5
//    
var f = function() {
 return 5
}

var sum = (num1, num2) => num1 + num2
//    
var sum = function(num1, num2) {
 return num1 + num2
}

矢印関数のコードブロック部分が文より多い場合、大かっこでそれらをまとめ、return文で返します。

var sum = (num1, num2) => {return num1 + num2}

大かっこはコードブロックとして解釈されていますので、矢印関数が直接オブジェクトに戻る場合、対象外に括弧を付けなければなりません。そうでなければ、エラーが発生します。

//   
let getTempItem = id => {id: id, name: "Temp"}
//    
let getTempItem = id => ({id: id, name: "Temp"})

以下は特殊な状況です。運行は可能ですが、エラーの結果が出ます。

let foo = () => {a: 1}

上のコードでは、元の意図は一つのオブジェクトに戻ることです。しかし、エンジンは大括弧がコードブロックと考えられているため、行の文a：1が実行されています。この場合、aは文のラベルとして認識されますので、実際に文を実行して1です。そして関数は終了し、戻り値がありません。
矢印関数が1行の文だけで、戻り値が必要でない場合は、次のような書き方をしてもいいです。

let fn = () => void doesNotReturn()

矢印関数は変数解と結合して使用できます。

const full = ({first, last}) => first + ' ' + last
//    
function full(person) {
 return person.first + ' ' + person.last
}

矢印関数は表現をより簡潔に使います。

const isEven = n => n % 2 === 0
const square = n => n * n

矢印関数の1つの用途は、コールバック関数を簡略化することである。

//       
[1, 2, 3].map(function(x) {
 return x * x
})
//       
[1, 2, 3].map(x => x * x)

次に、ステップパラメータと矢印関数を組み合わせた例を示します。

const numbers = (...nums) => nums

numbers(1, 2, 3, 4, 5)

const headAndTail = (head, ...tail) => [head, tail]

headAndTail(1, 2, 3, 4, 5)

使用上の注意点
1）関数の中のthisオブジェクトは、使用時のオブジェクトではなく、使用時のオブジェクトを定義します。
2）構造関数としてはいけません。つまり、newコマンドを使ってはいけません。そうでないと、エラーが発生します。
3）アーグメンントオブジェクトを使用してはいけません。このオブジェクトは関数の中に存在しません。使うなら、restパラメータで代替できます。
4）yieldコマンドは使用できませんので、矢印関数はGenerator関数として使用できません。

function foo () {
 setTimeout(() => {
 console.log('id: ', this.id)
 }, 100)
}

var id = 21

foo.call({id: 42})

上のコードにおいて、setTimeoutのパラメータは矢印関数であり、この矢印関数の定義が有効になるのはfoo関数が生成される時であり、その実行は本当に100 ms後になる。普通の関数であれば、実行時にthisはグローバルオブジェクトwindowを指すべきであり、このとき出力21が必要である。しかし、矢印関数によって、thisは常に関数定義が有効になった時にあるオブジェクトを指しています。出力は42です。
矢印関数にはもともと自分のthisがありません。内部のthisは外層コードブロックのthisです。thisがないから、構造関数としても使えません。
this以外にも、次の3つの変数は矢印関数にも存在しません。
argments、super、new.target
また、矢印関数は自分のthisがないので、もちろんcall()やappy()、bind()などでthisの方向を変えることはできません。

(function() {
 return [
 (() => this.x).bind({x: 'inner'})()
 ]
}).call({x: 'outer'})

適用されない場合
矢印関数によって、「動的」から「静的」になるため、次の2つの場合は矢印関数を使用するべきではない。
最初の場合は関数を定義する方法であり、この方法の内部にはthisが含まれている。

window.lives = 100
var cat = {
 lives: 9,
 jumps: () => { this.lives--; console.log(this.lives)}
}

// 99

上のコードの中で、cat.jummps()の方法は矢印関数です。これは間違っています。cat.jump()を呼び出した場合、通常関数であれば、この方法の内部のthisはcatを指す。上記のような矢印関数を作成すると、thisは全体のオブジェクトに向けられます。
二つ目の場合はダイナミックthis（イベントモニター）が必要な場合も、矢印関数を使うべきではありません。

var button = document.getElementById('press');
button.addEventListener('click', () => {
 this.classList.toggle('on');
});

上のコードが実行されている場合、ボタンを押すとエラーが発生します。普通の関数に変更すると、ボタンのオブジェクトを動的に指します。
興味のある友達はオンラインHTML/CSS/JavaScriptコードを使ってツールを実行できます。http://tools.jb51.net/code/HtmlJsRun上記コードの運行効果をテストします。
もっと多くのJavaScriptに関する内容は当駅のテーマを調べられます。「JavaScript常用関数技術のまとめ」、「javascript対象向け入門教程」、「JavaScriptエラーとデバッグテクニックのまとめ」、「JavaScriptデータ構造とアルゴリズム技術のまとめ」及び「JavaScript数学演算の使い方のまとめ」
本論文で述べたように、JavaScriptプログラムの設計に役に立ちます。