ES 6入門:矢印関数

1907 ワード

JavaScriptで矢印関数を使用します.
基本タイプを返します
多くの近代的なプログラミング言語は矢印関数の文法をサポートしています.例えば、C〓、Swift、ES 6も矢印関数をJavaScriptの文法に加えています.私たちは元のJSに匿名関数を持っていますが、より簡潔な表現は書きやすいだけでなく、直感的な表現の意味ももっと分かります.
引数が一つしかなく、結果が表式である場合、構文は以下のようになります.

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

ES 5を使うと、彼はこうなります.

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

パラメータが必要ではない場合、または2つ以上のパラメータを導入するには、これらのパラメータを含めて(なくても)使わなければなりません.

[1,2,3,4].map((num,index) => num*2+index)
//

もちろん、多くの場合は単一の表現だけでなく、論理文も書きます.これらの語句は私達が{}に書いています.

[1,2,3,4].map(num => {
    var multiplier = 2+num;
    return multiplier*num;
})
//

複数のパラメータの場合にも同様に適用されます.

[1,2,3,4].map((num,index) => {
    var multiplier = 2+index;
    return multiplier*num;
})
//

オブジェクトを返す
矢印関数を使ってオブジェクトを返すときは、このオブジェクトを含む()を使う必要があります.でないと、文法エラーが発生します.例1では、コンパイラはnumber:nを関数の文(number解析はラベル、nは式として解析しますが、これは合法的ではありません)に解析しましたが、return文がありませんので、mapの戻り値はundefinedです.例2では、something:'else'はコンパイラにとって何の意味もないので、文法エラーを投げました.

[1, 2, 3].map(n => { number: n })
// [undefined, undefined, undefined]
[1, 2, 3].map(n => { number: n, something: 'else' })
//  ({ number: n }))
//  ({ number: n, something: 'else' }))
/*

関数の作用範囲
矢印関数の作用範囲は、スコープと結合されています.つまり、関数の内部深層に関数がネストされている場合、var self=thisまたは.bindによってコンテキストを維持する必要はありません.

function Timer () {
  this.seconds = 0
  setInterval(() => this.seconds++, 1000)
}
var timer = new Timer()
setTimeout(() => console.log(timer.seconds), 3100)
//

注目すべきことは、ES 6の矢印関数がthisをバインディングし、callとapplyが関数の文脈を変えられなくなることを意味する.
結論
いくつかの表現を返すために匿名関数が必要な場合、矢印関数は簡潔であり、ある程度コードをより簡単にします.しかし、何の場合でも、矢印関数を使うのに適しています.パラメータが多すぎて、関数の論理が複雑な場合、ネーミング関数はあなたのプログラムをより読みやすくします.矢印関数の優越性は関数式プログラミングの場合に現れます.map,filter,または.reduce.同様に、非同期プロセス制御において、矢印関数は大量のcalback関数による読書障害を解消し、優れた選択となる.

「JavaScript高級プログラム設計」読書ノート(17):事件