ES 6標準Arow Function（矢印関数=>）

ES 6——矢印関数
0.なぜ矢印関数が現れますか？
1.伝統的なjavascript関数文法はいかなる柔軟性を提供していません。毎回関数を定義する必要がある時、function（）{}を入力しなければなりません。少なくとも二つの問題があります。ES 6矢印関数は円満に解決しました。
第一の問題：コードの入力が速いと、funcitonかfunctoinか他のものに負けやすいですが、これはもう間違えたら、ちょっとひどいとしか言えません。
第二の問題：大量のコードを節約して、まず下のES 6コードを管理しないでください。なぜこのような文法が同じ機能を実現できますか？コードの量を直感的に感じます。
ES 5の書き方：

function addFive(num){
   return num+5; 
}
alert(addFive(10));

ES 6書き方：

var addFive = num=>num+5;
alert(addFive(5));

functionがなくて、returnがなくて、ありません。これらは全部浮雲になりました。世界は静かです。
上から見れば、矢印関数を使うと、間違いを避けるだけでなく、コードをなくしてもいいです。もちろん実際の仕事の中では、このコード量よりずっと節約できます。
効果を蓄积するために、一部をなくすと多くなります。コードを节约し、仕事の効率を大幅に高めるシーンもあります。
次に、今日の主役の矢印関数について話します。
ES 6規格には、新しい関数が追加されました。アルロW Function（矢印関数）は、「太い矢印関数」とも呼ばれています。
「矢印」(=>)を使って関数を定義すると、簡単な関数式です。
1、矢印関数文法
ES 5では、和を求める関数を実現します。

var sum = function(x, y) {
  return x + y
}

矢印関数を使用するには、二段階に分けて同じ関数機能を実現できます。
まず、キーワードの代わりに使用します。

var sum = (x, y) => {
  return x + y
}

この特性はとても良いです！！
前に私達はすでにキーワードの代わりにFnctionを使うと言いましたが、間違えないという意味です。これは素晴らしい設計思想です。
次に、関数がステートメントに戻ります。括弧｛｝とreturnキーワードは省略できます。
var sum=(x，y)=>x+y
もう少し誇張してください。パラメータが一つしかない場合は、（）は省略できます。
これは矢印関数の最も簡潔な形式で、フィルタリングのような簡単な処理関数としてよく使われています。

// ES5
var array = ['1', '2345', '567', '89'];
array = array.filter(function (item) {
  return item.length > 2;
});
// ["2345", "567"]


// ES6
let array = ['1', '2345', '567', '89'];
array = array.filter(item => item.length > 2); 
// ["2345", "567"]

矢印関数の主な使用パターンは以下の通りです。

//            
param => expression;//    x => x+2;

//            
(param [, param]) => expression; //   (x,y) => (x + y);

//            
param => {statements;} //   x = > { x++; return x;};

//            
([param] [, param]) => {statements} //    (x,y) => { x++;y++;return x*y;};

//        
() => expression; //  var flag = (() => 2)(); flag  2

() => {statements;} //   var flag = (() => {return 1;})(); flag   1

 //       ，      
([param]) => ({ key: value });
//   var fuc = (x) => ({key:x})
    var object = fuc(1);
    alert(object);//{key:1}

みんなは多くないと思ってください。面倒くさいです。実はこれらは全然複雑ではありません。一度投入して、一生の利益を受ける。保険のような感じがします。一度か二度書いたら、新しい書き方に慣れます。
2、矢印関数のthis
矢印関数内のthis値は、外周作用領域から継承されます。動作時には、まず父の役割のドメインを探します。父の役割のドメインは矢印の関数です。
まず古典的なthisに関する面接問題を見ます。

var name = 'leo';
var teacher = {
  name: "   ",
  showName: function () {
    function showTest() {
      alert(this.name);
    }
    showTest();
  }
};
teacher.showName();//    leo，          ，  this   window，      teacher

ご存知のように、ES 5の中のthisはよく聞きました。「フレキシブル」と言って、よくないということはでたらめで、特に問題が発生しやすいです。しかも面接は試験が大好きです。仕事はもちろんです。よく私達に開発してくれます。

var name = 'leo';
var teacher = {
  name: "   ",
  showName: function () {
    let showTest = ()=>alert(this.name);
    showTest();
  }
};
teacher.showName();

矢印関数のthisは、親レベルのスコープのthisです。矢印関数は、親レベルの変数の品詞作用領域を参照すると、変数の役割が定義されているときに定義されています。このスコープに変数が見つからないときは、親のスコープを探し続けます。
thisは矢印関数において既に品詞作用領域によって結合されていますので、矢印関数をコールまたはapplyで呼び出すと、thisをバインディングできません。すなわち、最初のパラメータは無視されます。

var obj = {
  birth: 1996,
  getAge: function (year) {
    var b = this.birth; // 1996
    var fn = (y) => y - this.birth; // this.birth  1996
    return fn.call({birth:1990}, year);
  }
};
obj.getAge(2018); // 22 （ 2018 - 1996）

thisは語法の面で結合が完了していますので、callまたはapply方法で関数を呼び出すとパラメータが入ってきただけです。thisには影響がありません。したがって、この設計は、開発者がコンテキストバインディングを考える時間を節約する。
3、矢印関数の特性
3.1矢印関数にはargmentsがありません。
矢印関数はthisだけでなく、一般的なargmentsもありません。もしあなたがargmentsを得ることができるなら、それは
父の役割の域から来たに違いない。

function foo() {
 return () => console.log(arguments)
}

foo(1, 2)(3, 4) // 1，2

上記の例では矢印関数がargmentsであれば、出力すべきものは3、4は1、2ではありません。
矢印関数はargmentsを結合しないで、代わりにrestパラメータで解決します。

var foo = (...args) => {
 return args
}

console.log(foo(1,3,56,36,634,6))  // [1, 3, 56, 36, 634, 6]

矢印関数は、類似の純関数の効果を達成するためには、外部の状態を取り除く必要があります。矢印関数は着信パラメータ以外に、本当に一般関数でよく見られるthis、argments、calerは全くないことが分かります。
矢印関数でthis、argmentsまたはパラメータ以外の変数を参照した場合、それらは矢印関数自体ではなく、親レベルのスコープから継承されます。
3.2矢印関数ではnewは使えません。

let Person = (name) => {
  this.name = name;
};
let one = new Person("galler");

このプログラムを実行すると、TypeError:Person is not a constructorが現れます。
3.3矢印関数は変数解と結合して使用できます。

const full = ({ first, last }) => first + ' ' + last;

//    
function full(person) {
 return person.first + ' ' + person.last;
}

 full({first: 1, last: 5}) // '1 5'

3.4矢印関数にはプロトタイプの属性がありません。

var foo = () => {};
console.log(foo.prototype) //undefined

これにより矢印関数にはプロトタイプがないことがわかった。
もう一つのエラーは原型に矢印関数を使っています。

function A() {
 this.foo = 1
}

A.prototype.bar = () => console.log(this.foo)

let a = new A()
a.bar() //undefined

同様に、矢印関数のthisはAを指すのではなく、変数検索規則に基づいて大域作用域に遡ります。同様に、普通の関数を使うと問題がありません。矢印関数ではnewは使用できません。つまり矢印関数はコンストラクタとして使用できません。
3.5矢印関数は改行できません。

var func = ()
      => 1; // SyntaxError: expected expression, got '=>'

確かに開発の一行が決まらないと論理が多くて、{}を加えると、どうやって改行したいですか？

var func = ()=>{
  return '  ！     ！'; // 1. {} 2. return
}

4、矢印関数使用シーン
JavaScriptの中でthisのストーリはすでにとても古いので、すべての関数はすべて自分の文脈があります。
以下の例の目的は、jQueryを使用して、毎秒更新されるクロックを表示することである。

$('.time').each(function () {
 setInterval(function () {
  $(this).text(Date.now());
 }, 1000);
});

setIntervalのフィードバックにthisを使ってDOM要素を引用しようとしたが、残念なことに、私たちが得たのはただのコールバック関数自身だった。
文脈のthis。通常の解決方法は、thatまたはself変数を定義することである。

$('.time').each(function () {
 var self = this;
 setInterval(function () {
  $(self).text(Date.now());
 }, 1000);
});

矢印関数を使うと、この問題はなくなります。それは自分の文脈に属するthisを生まないからです。

$('.time').each(function () {
 setInterval(() => $(this).text(Date.now()), 1000);
});

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

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

//       
[1,2,3].map(x => x * x);

もちろんイベント傍受関数でも使用できます。
Dcument.body.addEvent Listener('click'，event=>consone.log(event，this);
//EventObject、BodyElement
5、まとめ
5.1矢印関数の利点
矢印関数は、=>文法の関数を使って簡略化された形式です。これは文法的にC〓、Java 8、PythonとCoffeeScriptの
相関特性は非常に似ている。
非常に簡潔な文法で、矢印関数を使って、普通の関数より少し少ない動詞、例えば：functionまたはreturn。
()=>{…}/0個のパラメータを()で表します。
x=>{…}/一つのパラメータは省略できます()。
(x，y)=>{…}/マルチパラメータは省略できません()。
一つのreturnだけあれば、{}省略できます。
より直感的な作用領域とthisの結合は、thisの指向問題をうまく処理することができます。矢印関数にletキーワードの使用を加えると、Javascriptコードの上の階層になります。
5.2矢印関数使用シーン
矢印関数は、複雑な論理または副作用のない純粋な関数シーンに適しています。例えば、map、reduce、filterのコールバック関数で定義されます。
の中で、現在vue、react、nodeなどの倉庫は矢印関数をたくさん使って、直接Fnctionを定義することはもう少なくなりました。
皆さんは新しいプロジェクトを書く時、矢印関数の使用場面、特徴を絶えず考えて、矢印関数を使うのが便利で、もっと速く成長できます。
以下は廖雪峰のウェブサイトの補充です。
ES 6規格には、新しい関数が追加されました。矢印関数です。
どうしてアロウFunctionですか？それは矢印で定義されているからです。
x=>x＊x
上の矢印関数は以下の通りです。
function(x){
return x*x;
)
矢印関数を学習し続ける前に、ES 6のArow Functionをサポートするブラウザかどうかをテストしてください。
＜スクリプト＞
'use strict'
var fn=x=>x*x;
consolone.logn('あなたのブラウザはES 6のアルrow Functionをサポートします！')

[Ctrl+A全選注：]
矢印関数は匿名関数に相当し、関数定義を簡略化する。矢印関数には二つの書式があります。一つは上のように、一つの表現だけが含まれています。もう一つは複数の語句が含まれています。このときは「…」と「return」を省略してはいけません。

x => {
 if (x > 0) {
  return x * x;
 }
 else {
  return - x * x;
 }
}

パラメータが一つでない場合は、括弧（）で囲む必要があります。

//     :
(x, y) => x * x + y * y

//    :
() => 3.14

//     :
(x, y, ...rest) => {
 var i, sum = x + y;
 for (i=0; i<rest.length; i++) {
  sum += rest[i];
 }
 return sum;
}

オブジェクトを返すには、単一表現であればエラーが発生します。
//SyntaxError:
x=>{foo:x}
関数の「...」と文法的に衝突していますので、次のように変更します。
//ok:
x=>({foo:x}
this
矢印関数は匿名関数の簡単な書き込みのように見えるが、実際には矢印関数と匿名関数には明確な違いがある。矢印関数内部のthisは語法作用領域であり、文脈で決定される。
前の例を振り返ってみると、JavaScript関数によるthisバインディングのエラー処理のため、以下の例は予想される結果を得ることができません。

var obj = {
 birth: 1990,
 getAge: function () {
  var b = this.birth; // 1990
  var fn = function () {
   return new Date().getFullYear() - this.birth; // this  window undefined
  };
  return fn();
 }
};

現在、矢印関数が完全に修復されたthisの指向は、thisはいつも語法の作用領域、つまり外層調合者objを指しています。

var obj = {
 birth: 1990,
 getAge: function () {
  var b = this.birth; // 1990
  var fn = () => new Date().getFullYear() - this.birth; // this  obj  
  return fn();
 }
};
obj.getAge(); // 25

矢印関数を使うと、以前のようなhackの書き方があります。
var that=this
もういらないです。
thisは矢印関数において既に品詞作用領域によって結合されていますので、call()またはappy()で矢印関数を呼び出した場合、thisをバインドすることができません。すなわち、最初のパラメータは無視されます。

var obj = {
 birth: 1990,
 getAge: function (year) {
  var b = this.birth; // 1990
  var fn = (y) => y - this.birth; // this.birth  1990
  return fn.call({birth:2000}, year);
 }
};
obj.getAge(2015); // 25

練習します
順序付けを簡単にするために矢印関数を使用してください。

<script>
'use strict'
var arr = [10, 20, 1, 2];
arr.sort((x, y) => {
 if (x < y) return -1
 else if (x > y) return 1
 else return 0
});
console.log(arr); // [1, 2, 10, 20]
</script>

 
以上がES 6標準Arrow Function（矢印関数=>）の詳細です。js矢印関数に関する資料は他の関連記事に注目してください。