JavaScriptの矢印機能:あなたがそれらについて知っておく必要があるすべて

矢印関数はJavaScriptの関数を作成する別の形式です.es 6で紹介した.
彼らは名前で行くarrow functions , なぜなら、それらは矢印のシンボルで作られているからです.=> .
矢印関数の主な利点は、コードの読みやすさを増加させる短い構文です.別の関数の引数である関数をすばやく作成する必要があるときには、本当に便利です.
ほとんどの場合、彼らは定期的な機能と互換性があるが、いくつかの違いについて覚えておく必要があります.
矢印関数は匿名関数です.それは、彼らが名前を持つことができないことを意味します.変数に代入して変数名を呼び出すことでバイパスできます.
通常の関数から矢印関数への簡単な変換を見てみましょう.

function add(x, y) {
    return x + y;
}

// we assign an anonymous to a variable
const add = function(x, y) {
    return x + y;
}

// we remove "function" keyword and add an arrow after arguments
const add = (x, y) => {
    return x + y;
}

上記のコード例は、関数を宣言する3つの方法を示しています.最後に私たちは=> . 我々が必要としない通知function キーワードはもう機能を宣言する.また、追加=> 引数のリストの後に.
矢印関数は、さらに短い構文を使用することができます.

// returns x + y
const add = (x, y) => (
    x + y
)

// the same function in one line
const add = (x, y) => x + y

// you can skip parentheses when using only one argument
const add1 = x => x + 1

関数がreturn 短い矢印の関数を使用できます.
あなたは省略できます{ } and return キーワードと表現=> はこの関数から返される値になります.
あなたが追加について覚えておく必要があるオブジェクトを返すとき( ) .

// this won't work
const createUser = (id, name) => {
    id: id,
    name: name
}

この場合、オブジェクトを作成するために使用される巻き括弧は、関数本体を作成するのに使用される巻き括弧と衝突するでしょう.オブジェクトを返すことを保証するために括弧を追加する必要があります.

const createUser = (id, name) => ({
    id: id,
    name: name
})

コードの読みやすさを改善するためのショートフォームの使用
矢印関数の短い形式を使用して、他の関数から関数を返すときにコードの読みやすさを改善する方法を見てみましょう.

function createAddFunction(number) {
    return function(x) {
        return x + number
    }
}

createAddFunction は他の関数を生成する関数です.このパターンをcurrying そして、あなたはそれについてもっと読むことができますWhat is Function Currying in JavaScript and When to Use It . たとえば、数を増やす関数を作成するために使用することができます1 .

const add1 = createAddFunction(1)
add1(5) // 6

の定義createAddFunction 我々はちょうど学んだ矢印機能の機能を使用して短縮することができます.つの線にそれを減らすステップを見てみましょう.

// initial version
function createAddFunction(number) {
    return function(x) {
        return x + number
    }
}

// changing the inner function to arrow function
function createAddFunction(number){
    return x => x + number
}

// changing the outer function to arrow function
const createAddFunction = number => (
    x => x + number
)

// one line version
const createAddFunction = number => x => x + number

規則と矢印関数の違いは何ですか
this 矢印関数
最も重要な違いはthis これらの2つの関数宣言型の中で動作します.
矢印関数は独自に作成しませんthis しかし、定義された場所からその値を使用します.
説明this JavaScriptでは、別のブログ記事が必要ですが、私は違いを示すいくつかの例が表示されます.

const logThisOutside = () => {
    console.log(this)
}

function Button() {
    this.name = 'My Button'
    function logThis() {
        console.log(this)
    }
    const logThisArrow = () => {
        console.log(this)
    }

    logThis() // Window
    logThisArrow() // { name: 'My Button' }
    logThisOutside() // Window
}

new Button()

ご覧の通りlogThisArrow and logThisOutside 値を使用するthis 彼らが定義された場所から.これは、通常の関数に応じて、矢印の関数は、独自の作成されませんが発生しますthis , 外側のスコープから値を使用します.

使用this あなたの利点に矢印機能で

function Button() {
  this.name = 'My Button'

  const that = this
  document.querySelector("button").addEventListener("click", function() {
    console.log('click', this); // Button DOM Element
    console.log('that', that) // { name: 'My Button' }
    this.name = 'Button Clicked' // won't work as expected
    that.name = 'Button Clicked' // name value changed
  });

  document.querySelector("button").addEventListener("click", () => {
    console.log("click arrow", this); // { name: 'My Button' }
    this.name = 'Button Clicked' // name value changed
  });
}

new Button()

つのイベントリスナーを作成しました.つのうちの1つでは、他の関数では、関数と矢印関数を使用しました.
イベントリスナーの通常の機能の場合は、ボタンをクリックするとthis クリックされたDOM要素の値があります.値を変更したい場合this.name まず変数を作成しなければならないconst that = this そして、that.name = 'Button Clicked' . これは一般的なハックを変更するために使用this 外側の範囲から.
前述のように、矢印関数はthis だから、安全に値を変更することができますname そばthis.name = 'Button Clicked .

矢印関数の引数へのアクセス
矢印関数の他の特徴は、特別な変数arguments 関数本体内部.
見ましょうarguments 通常の機能で動作します.

function add() {
    console.log(arguments)
}

add(1, 2, 3) // console: [1, 2, 3]

通常の機能には特別なアクセスがありますarguments 括弧の間に定義されていない場合でも、関数が呼び出されたすべての引数を格納する変数です.
矢印関数は作成しませんarguments 変数が、同じ-残りのパラメータを達成するために使用できる他のソリューションがあります.

const add = (...args) => {
    console.log(args)
}

add(1, 2, 3) // console: [1, 2, 3]

概要
矢印関数は、関数を作成するための短い構文を提供します.彼らは、キーワードを省略しますfunction and return コードの読みやすさを改善します.あまりにも多くのネストされた矢印の機能は、読者のために混乱しているコードを作成することができますので、それを使用してください.
矢印関数は独自に作成しませんthis and arguments 通常の関数との主な違いです.
あなたが他の違いについて読むことを望むならばMDN Arrow function expressions .
私は定期的にウェブ開発に関する私の洞察を発表しています.
考慮するsubscribing to my newsletter .
ブログ一覧にもどるslawkolodziej.com より興味深いコンテンツを見つけるために.
フォローミーオン.