JavaScriptの矢印機能：FATおよび簡潔な構文

JavaScript矢印関数の詳細な理解。 ES6 Arrow構文の使用方法と、コードで矢印関数を使用する際に注意するためのいくつかの一般的な間違いを示します。それがどのように機能するかを示す多くの例を見るでしょう。

ECMAScript 2015（ES6とも呼ばれる）のリリース後、JavaScript Arrow関数が表示されました。簡潔な構文と

キーワードの処理方法のおかげで、矢印関数はすぐに開発者のお気に入りの機能の1つになりました。 this

キーポイント

矢印関数は、1つの式が1つしかない場合、
• キーワード、curlyブレースfunction、{}キーワードを排除することにより、JavaScriptの簡潔な構文を提供します。 return
単一パラメーター関数の場合、矢印関数パラメーターの括弧は省略できますが、ノンパラメーターまたはマルチパラメーター関数の場合、デフォルトパラメーターを使用する場合は、ブラケットを使用する必要があります。
矢印関数は本質的に匿名です。つまり、名前識別子がないことを意味しますが、変数に割り当てられた場合、関数名はデバッグのために変数から推測できます。
矢印関数のキーワードは、その値をキャプチャして、矢印関数の閉じたコンテキストをカスタマイズします。コンテキスト条件。
• this矢印関数は、特にオブジェクトのメソッドまたはthisコンストラクターを使用する場合、すべてのケースに適していません
バインディングがあり、
• オブジェクトが欠落しているためです。 function this arguments、
、
• 、.map()、.sort()、.forEach()、.filter()、.reduce()、
などの配列メソッドを使用して矢印関数を使用する場合、読みやすさとシンプルさを強化できます。 、しかし、特定のコンテキストでこの仕事に適したツールであることを確認するために注意する必要があります。

矢印関数の構文：通常の関数を書き直し

関数は、アクションの実行や値の返却など、プログラムで必要なことを達成するために有用な指示を保存できるレシピのようなものです。関数を呼び出すことにより、レシピに含まれる手順を実行できます。レシピを何度も書き直さずに、関数を呼び出すたびにこれを行うことができます。

以下は、関数を宣言し、JavaScriptで呼び出す標準的な方法です。

// 函数声明
function sayHiStranger() {
  return 'Hi, stranger!'
}

// 调用函数
sayHiStranger()

次のように関数式と同じ関数を記述することもできます。

const sayHiStranger = function () {
  return 'Hi, stranger!'
}

javaScript矢印関数は常に式です。脂肪矢印表記を使用して上記の関数を矢印関数式として書き換える方法は次のとおりです。

利点には次のものが含まれます

• コードの1行のみ
• いいえfunctionキーワード
• いいえreturnキーワード
• 巻き毛のブレースはありません{}

javascriptでは、関数は「ファーストクラスの市民」です。関数を変数に保存し、引数として他の関数に渡し、他の関数から値として返すことができます。 JavaScript Arrow関数でこれらすべてを実行できます。

bracket no syntax

上記の例では、関数にはパラメーターがありません。この場合、太った矢印（=＆gt;）シンボルの前に空の括弧（）のセットを追加する必要があります。これは、複数のパラメーターを持つ関数を作成する場合にも当てはまります。

// 函数声明
function sayHiStranger() {
  return 'Hi, stranger!'
}

// 调用函数
sayHiStranger()

ただし、パラメーターが1つしかない場合、ブラケットを省略できます（これを行う必要はありませんが、できます）：

const sayHiStranger = function () {
  return 'Hi, stranger!'
}

しかし、注意してください。たとえば、デフォルトのパラメーターを使用することにした場合、括弧で囲む必要があります。

できるからといって、それはあなたがすべきであるという意味ではありません。気楽で心の優しい風刺により、カイル・シンプソン（「You Do n't Know JS」の著者）は、このフローチャートにブラケットを省略することについて彼の考えを置きました。 （フローチャートはここに挿入する必要がありますが、写真を直接挿入できないため、ここで省略されています）

const sayHiStranger = () => 'Hi, stranger'

暗黙のリターン

関数本体に1つの式がある場合、ES6矢印構文をより簡潔にすることができます。すべてを1行に配置し、巻き毛のブレースを削除し、

キーワードを削除できます。

return上記の例で、これらのきちんとしたコードの行がどのように機能するかを見たばかりです。参照のみの別の例を挙げましょう。 Orderbylikes（）関数の関数はその名前です。

これはクールですが、コードの読みやすさには注意してください - 特に、この例のように、コードの行と非分岐点ES6矢印構文を使用して矢印関数の束を並べ替える場合は次のとおりです。

そこで何が起こったのですか？通常の関数の構文を使用してみてください：

const getNetflixSeries = (seriesName, releaseDate) => `The ${seriesName} series was released in ${releaseDate}`
// 调用函数
console.log(getNetflixSeries('Bridgerton', '2020') )
// 输出：The Bridgerton series was released in 2020

これで、外部関数Greeterがパラメーターの挨拶をし、匿名関数を返す方法をすばやく理解できます。次に、この内部関数には名前という名前のパラメーターがあり、挨拶と名前の値を使用して文字列を返します。これが関数を呼び出す方法です：

const favoriteSeries = seriesName => seriesName === "Bridgerton" ? "Let's watch it" : "Let's go out"
// 调用函数
console.log(favoriteSeries("Bridgerton"))
// 输出："Let's watch it"

これらの暗黙の返品エラー

// 使用括号：正确
const bestNetflixSeries = (seriesName = "Bridgerton") => `${seriesName} is the best`
// 输出："Bridgerton is the best"
console.log(bestNetflixSeries())

// 没有括号：错误
const bestNetflixSeries = seriesName = "Bridgerton" => `${seriesName} is the best`
// Uncaught SyntaxError: invalid arrow-function arguments (parentheses around the arrow-function may help)

に注意してください

JavaScript Arrow関数に複数のステートメントが含まれている場合、すべてのステートメントをCurly Bracesに囲み、

キーワードを使用する必要があります。

// 使用JS sort()函数按点赞数降序排列标题（点赞数越多，排名越高，点赞数越少，排名越低）
const orderByLikes = netflixSeries.sort( (a, b) => b.likes - a.likes )

// 调用函数
// 输出：按降序排列的标题和点赞数
console.log(orderByLikes)

次のコードでは、この関数はいくつかのNetflixシリーズのタイトルと要約を含むオブジェクトを構築します（NetflixコメントはRotten Tomato Webサイトからのものです）：

return

関数の矢印関数は、一連のステートメントを通じて拡張され、最終的にオブジェクトを返します。これにより、関数本体の周りに巻き毛の装具を使用することは避けられません。

また、巻き毛の装具を使用しているため、暗黙のリターンは選択肢ではありません。

キーワードを使用する必要があります。

const greeter = greeting => name => `${greeting}, ${name}!`

関数暗黙の返品を使用してリテラルをリテラルに戻す場合、括弧内にオブジェクトを囲む必要があります。 JavaScriptエンジンがオブジェクトのブレースを文字通り関数のブレースに誤って解析するため、そうしないとエラーが発生します。上記で気づいたように、矢印関数で巻き毛のブレースを使用する場合、キーワードを省略することはできません。 return

前のコードの短いバージョンは、この構文を示しています：

// 函数声明
function sayHiStranger() {
  return 'Hi, stranger!'
}

// 调用函数
sayHiStranger()

矢印関数に名前を付けることはできません

キーワードとパラメーターリストの間に名前識別子がない関数は、

匿名関数functionと呼ばれます。通常の匿名関数式がどのように見えるかは次のとおりです。 矢印関数はすべて匿名関数です：

const sayHiStranger = function () {
  return 'Hi, stranger!'
}

ES6から開始すると、変数とメソッドは、

属性を使用して、構文位置に基づいて匿名関数の名前を推測できます。これにより、その値をチェックしたり、エラーを報告したりするときに関数を認識できます。

const sayHiStranger = () => 'Hi, stranger'

anonymousarrowfuncで確認：

name 上記の例に示すように、匿名関数が変数に割り当てられている場合にのみ、これが推測される

属性が存在することに注意してください。匿名関数をコールバック関数として使用すると、この実用的な関数は失われます。これは、次のデモンストレーションによって示されています。ここでは、

メソッドの匿名関数が

属性を使用できません：

const getNetflixSeries = (seriesName, releaseDate) => `The ${seriesName} series was released in ${releaseDate}`
// 调用函数
console.log(getNetflixSeries('Bridgerton', '2020') )
// 输出：The Bridgerton series was released in 2020

nameそしてそれ以上。この推定された.setInterval()プロパティは、再帰、バインディングイベントなど、関数内から関数を参照できる適切な識別子として使用することはできません。 name

矢印関数の本質的な匿名性は、カイル・シンプソンが次のように彼の意見を表現するように導きます。

const favoriteSeries = seriesName => seriesName === "Bridgerton" ? "Let's watch it" : "Let's go out"
// 调用函数
console.log(favoriteSeries("Bridgerton"))
// 输出："Let's watch it"

匿名関数はプログラムで頻繁に使用するのに適していないと思うので、=＆gt;矢印関数形式を使用するのは好きではありません。 - 「あなたはjsを知らない」name

このキーワードを処理する方法

矢印関数の最も重要なことは、

キーワードをどのように処理するかを覚えておくことです。特に、矢印関数内の

キーワードはリベンドされません。

これが何を意味するのかを説明するために、次のデモをチェックしてください。（コードペンをここに挿入する必要がありますが、コードペンを直接挿入できないため、ここで省略されています）

これはボタンです。ボタンをクリックすると、ボタン自体に表示される5から1の逆カウンターがトリガーされます。

this this

メソッドのイベントハンドラーは、矢印関数ではなく、通常の匿名関数式であることに注意してください。なぜ？関数をログインすると、

では、リスナーが添付されたボタン要素を参照していることがわかります。

Firefox Developer Tools Consoleでは、次のように見えます（ここに画像を挿入する必要がありますが、画像は直接挿入できないため、ここで省略されています）

// 使用括号：正确
const bestNetflixSeries = (seriesName = "Bridgerton") => `${seriesName} is the best`
// 输出："Bridgerton is the best"
console.log(bestNetflixSeries())

// 没有括号：错误
const bestNetflixSeries = seriesName = "Bridgerton" => `${seriesName} is the best`
// Uncaught SyntaxError: invalid arrow-function arguments (parentheses around the arrow-function may help)

ただし、次のように、通常の関数を矢印関数に置き換えてみてください。

// 函数声明
function sayHiStranger() {
  return 'Hi, stranger!'
}

// 调用函数
sayHiStranger()

さて、thisボタンを引用しなくなりました。代わりに、ウィンドウオブジェクトを参照してください：（ここに画像を挿入する必要がありますが、画像は直接挿入できないため、ここで省略されています）

これは、次の例に示すように、ボタンをクリックした後、ボタンをクリックした後に

を使用してボタンにクラスを追加する場合、次のようにコードが機能しないことを意味します。 this

コンソールのエラーメッセージは次のとおりです。（ここに写真を挿入する必要がありますが、写真は直接挿入できないため、ここで省略されています）

const sayHiStranger = function () {
  return 'Hi, stranger!'
}

javaScriptで矢印関数を使用する場合、

キーワードの値は再生されません。親の範囲から継承します（これは語彙スコープと呼ばれます）。この特定のケースでは、問題の矢印関数は、グローバルな範囲にある

メソッドの引数として渡されます。したがって、関数ハンドラーでは、グローバルスコープ、つまりウィンドウオブジェクトにもバインドされています。 this startBtn.addEventListener()したがって、プログラムのスタートボタンを参照したい場合は、正しい方法は、矢印関数ではなく通常の関数を使用することです。 this

匿名の矢印関数

this次に注意すべきことは、上記のデモの

メソッドのコードです。ここでは、匿名関数も見つかりますが、今回は矢印関数です。なぜ？

通常の関数を使用する場合、

の値は何ですか：.setInterval()

それはボタン要素になりますか？全くない。ウィンドウオブジェクトになります！ （写真はここに挿入する必要がありますが、写真は直接挿入できないため、ここで省略されています）this

実際には、

const sayHiStranger = () => 'Hi, stranger'

は現在、

の引数として渡されるバウンドまたはグローバルな関数にあるため、コンテキストが変更されました。したがって、キーワードの値も変化します。これは、グローバルな範囲に縛られているために変更されます。

この場合、一般的なトリックは、別の変数を含めて

キーワードの値を保存して、予想される要素を引き続き参照するようにすることです。 this .setInterval()この問題を解決するためにthisを使用することもできます。

矢印関数を使用して、問題は完全に消えました。矢印関数を使用する場合のthisの値は次のとおりです。

const getNetflixSeries = (seriesName, releaseDate) => `The ${seriesName} series was released in ${releaseDate}`
// 调用函数
console.log(getNetflixSeries('Bridgerton', '2020') )
// 输出：The Bridgerton series was released in 2020

（ここに写真を挿入する必要がありますが、写真を直接挿入できないため、ここでは省略されています）

.bind()今回、コンソールはボタンを記録しました。これが私たちが望んでいたものです。実際、プログラムはボタンのテキストを変更するため、ボタン要素を参照するには

が必要です。

const favoriteSeries = seriesName => seriesName === "Bridgerton" ? "Let's watch it" : "Let's go out"
// 调用函数
console.log(favoriteSeries("Bridgerton"))
// 输出："Let's watch it"

矢印関数thisは独自の

コンテキスト

// 使用括号：正确
const bestNetflixSeries = (seriesName = "Bridgerton") => `${seriesName} is the best`
// 输出："Bridgerton is the best"
console.log(bestNetflixSeries())

// 没有括号：错误
const bestNetflixSeries = seriesName = "Bridgerton" => `${seriesName} is the best`
// Uncaught SyntaxError: invalid arrow-function arguments (parentheses around the arrow-function may help)

を持っていません。彼らは親の値から継承しており、この機能のために、上記の状況で優れた選択肢になります。

javaScript矢印関数は常に正しいツールではありません

矢印関数は、JavaScript関数を書き込むだけの新しい方法ではありません。彼らには独自の制限があります。つまり、場合によっては使用したくない場合があります。前のデモンストレーションのクリックハンドラーは例ですが、これだけではありません。もう少しチェックしましょう。

矢印はオブジェクトメソッドとして機能します

矢印関数はオブジェクトメソッドとして使用されません。これが例です。

このNetflixSeriesオブジェクトを検討してください。このオブジェクトには、プロパティといくつかの方法があります。 console.log(netflixSeries.getLikes())は、現在のいいね！console.log(netflixSeries.addLike())を含むメッセージを1つずつ増やし、コンソールに新しい値と感謝のメッセージを印刷する必要があります。

対照的に、

// 函数声明
function sayHiStranger() {
  return 'Hi, stranger!'
}

// 调用函数
sayHiStranger()

メソッドを呼び出す「未定義のnan nan wike」を返し、「nan wikeがあります」と呼びます。したがって、

および.getLikes()は、それぞれオブジェクト.addLike()とthis.titleのプロパティを参照できません。 this.likes title同じ問題は、矢印関数の語彙範囲にあります。 likesオブジェクトメソッドでは、親の範囲を参照しています。この場合、それは親オブジェクト自体ではなく、ウィンドウオブジェクトです。つまり、NetflixSeriesオブジェクトではありません。

もちろん、解決策は通常の関数を使用することです。 this

サードパーティライブラリの矢印関数を使用します

注意すべきもう1つのことは、サードパーティライブラリが通常、メソッド呼び出しをバインドして、

const sayHiStranger = function () {
  return 'Hi, stranger!'
}

値が有用なコンテンツを指すようにすることです。

たとえば、

jqueryイベントハンドラーでは、

でバインドハンドラーのDOM要素にアクセスできます。 this

ただし、矢印関数を使用する場合 - これまで見てきたように、独自のコンテキストがありません - 予期しない結果が得られます：

this

ここにvueを使用するさらなる例があります：

const sayHiStranger = () => 'Hi, stranger'

thisフックでは、

vueインスタンスに結合するので、「hello、world！」が表示されます。

const getNetflixSeries = (seriesName, releaseDate) => `The ${seriesName} series was released in ${releaseDate}`
// 调用函数
console.log(getNetflixSeries('Bridgerton', '2020') )
// 输出：The Bridgerton series was released in 2020

ただし、

矢印関数を使用する場合、

は親の範囲を指しますが、

const favoriteSeries = seriesName => seriesName === "Bridgerton" ? "Let's watch it" : "Let's go out"
// 调用函数
console.log(favoriteSeries("Bridgerton"))
// 输出："Let's watch it"

属性はありません：

created this矢印関数には引数はありません

不確実な数のパラメーターで関数を作成する必要がある場合があります。たとえば、好みの順にお気に入りのNetflixシリーズをリストする関数を作成するとします。ただし、含めるシリーズの数がわかりません。 JavaScriptはthisオブジェクトを提供します。これは、呼び出されたときに渡された値を格納するアレイのようなオブジェクト（完全な配列ではありません）です。 message

矢印関数を使用してこの関数を実装してみてください：

// 使用括号：正确
const bestNetflixSeries = (seriesName = "Bridgerton") => `${seriesName} is the best`
// 输出："Bridgerton is the best"
console.log(bestNetflixSeries())

// 没有括号：错误
const bestNetflixSeries = seriesName = "Bridgerton" => `${seriesName} is the best`
// Uncaught SyntaxError: invalid arrow-function arguments (parentheses around the arrow-function may help)

// 函数声明
function sayHiStranger() {
  return 'Hi, stranger!'
}

// 调用函数
sayHiStranger()

関数を呼び出すと、次のエラーメッセージが表示されます。これは、argumentsオブジェクトが矢印関数で使用できないことを意味します。実際、矢印関数を通常の関数に置き換えると、問題が解決できます。

したがって、

const sayHiStranger = function () {
  return 'Hi, stranger!'
}

オブジェクトが必要な場合は、矢印関数を使用できません。 arguments

しかし、

矢印関数を使用して同じ関数をコピーしたい場合はどうなりますか？できることの1つは、ES6（...）の残りのパラメーターを使用することです。機能を書き直す方法は次のとおりです

結論

const sayHiStranger = () => 'Hi, stranger'

矢印関数を使用することにより、クリーンなコードラインを記述し、暗黙のリターンを使用し、最終的に古い方法を使用してjavaScriptのキーワードの

キーワードの拘束力のある問題を解決できます。矢印関数は、

、this、.map()、.sort()、.forEach()、.filter()などの配列メソッドでも適切に機能します。ただし、覚えておいてください。矢印関数は、通常のJavaScript関数を置き換えません。矢印関数が正しいツールである場合にのみ使用することを忘れないでください。 .reduce()

矢印関数について質問がある場合、または正しく使用するために助けが必要な場合は、SitePointに優しいフォーラムにアクセスすることをお勧めします。支援する準備ができている知識豊富なプログラマーがたくさんあります。

JavaScript Arrow関数についてよく尋ねる質問

JavaScriptの矢印関数は何ですか？

次の構文を使用して矢印関数を定義できます。（パラメーター）=>式。たとえば、（x、y）=＆gt; x yは、2つのパラメーターを取り、合計を返す矢印関数を定義します。

矢印関数を定義する方法は？

次の構文を使用して矢印関数を定義できます。（パラメーター）=>式。たとえば、（x、y）=＆gt; x yは、2つのパラメーターを取り、合計を返す矢印関数を定義します。

矢印関数と通常の機能の違いは何ですか？

矢印関数と通常の関数は、次の面で異なります。 彼らは独自の

を持っていません。代わりに、周囲の語彙範囲のthis値を継承します。 矢印関数はコンストラクターとして使用することはできません。つまり、thisを使用してオブジェクトのインスタンスを作成することはできません。 矢印関数には独自のnewオブジェクトがありません。代わりに、閉じたスコープargumentsを継承します。 矢印関数はよりシンプルで、シンプルなシングルライン操作により適しています。 arguments

矢印関数を使用することの利点は何ですか？

矢印関数は、コードをより読みやすくするための簡潔な構文を提供します。彼らはまた、周囲のコンテキストを継承するため、

結合の問題を回避するのにも役立ちます。これにより、特定のコーディングパターンが簡素化され、this、bind、applyなどの回避策が必要になります。 call

矢印関数はすべての場合に適していますか？

矢印関数は多くのシナリオに役立ちますが、すべての場合には機能しない場合があります。短くて単純な機能に最適です。従来の機能は、独自のthisコンテキストを必要とする複雑な関数または関数により適している場合があります。

どのjavaScriptバージョンが矢印関数をサポートしていますか？

矢印関数はECMAScript 6（ES6）に導入され、最新のブラウザーとnode.jsバージョンでサポートされています。それらは、現代のJavaScript開発で広く使用されています。

矢印関数の制限は何ですか？

矢印関数はコンストラクターとして使用することはできず、独自のオブジェクトを持たず、動的argumentsコンテキストを必要とする方法にはあまり適していません。さらに、それらの簡潔な構文は、複数のステートメントを含む関数に適していない場合があります。 this

矢印関数は、オブジェクトまたはクラスのメソッドに使用できますか？

はい、矢印関数は、オブジェクトまたはクラスのメソッドに使用できます。ただし、Arrow関数には独自の

がないことを忘れないでください。したがって、動的thisコンテキストを必要とする方法では、予想どおりに機能しない場合があります。 this

矢印関数からリテラルを返す方法は？

矢印関数から直接オブジェクトリテラルを返す場合、関数ブロックとの混乱を避けるために、オブジェクトを括弧内に囲む必要があります。例：（）=＆gt;（{key：value}）。

矢印関数の単一のパラメーターのブラケットを省略できますか？

はい、矢印関数が単一のパラメーターを受け入れる場合、パラメーターの周りのブラケットを省略できます。たとえば、x =＆gt;

以上がJavaScriptの矢印機能：FATおよび簡潔な構文の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。