English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. 位置情報
  2. ホームページ
  3. 経験の記録
  4. 本文

javascript ES6アロー関数の注意点のまとめ

前書き

ES6標準で新しい関数が追加されました：Arrow Function（アロー関数）。

なぜ「Arrow Function」と呼ばれるのか？それはその定義に使われている矢印のためにです：

x => x * x

上記のアロー関数は以下のように相当します：

function (x) {
return x * x;
}

しかし、アロー関数はいくつかの問題も引き起こします。それについて詳しく見てみましょう。

关于{}

最初の問題は、アロー関数と{}に関するものです。

アロー関数は、見た目では使いやすいように見えますが、例えば以下のように配列の各要素に倍率を乗せるために使われます。2：

const numbers = [1 2 3);
 const result = numbers.map(n => n * 2);
 // produces [246]

しかし、不適切に使用すると、予期せぬ問題が発生する可能性があります。例えば以下のように、配列の各要素に対してオブジェクトリテルを生成しようとするmap操作は、意外な結果を引き起こしました。

const numbers = [1 2 3);
 const result = numbers.map(n => { value: n });
 // produces [undefined], [undefined], [undefined]

どのような原因から発生するのでしょうか？

少し分析してみると、上記の問題が発生する理由は、アロー関数内に括弧で囲まれたコードが、オブジェクトリテルを代替する独立したコードブロックとして認識されていないため、その単独で実行されることから、結果はundefinedがすべての配列になります。
したがって、この場合、コードには明確なreturn文またはオブジェクトリテルネイズを括弧()で囲む必要があります。

const result = numbers.map(n => ({ value: n }));
 // [{value: 1}, {value:2}, {value:3}]

thisについて

二つ目の問題は、アロー関数とthisに関するものです。

アロー関数を使用すると、以下のようにコードを書くことができます。局所スコープでthisを一時的に保存する必要はありません：

const adder = {
  sum: 0,
  add(numbers) {
   numbers.forEach(n => {
    this.sum += n;
   });
  }
 });
 adder.add([1 2 3]
 // adder.sum === 6

しかし、多くの場合、意識せずに間違ったコードを書いてしまうかもしれません。以下のコードを見てください。thisはadderオブジェクトを指していません。adderオブジェクトのスコープを指しています：

const adder = {
  sum: 0,
  add: (numbers) => { // このスコープが重要です
   numbers.forEach(n => {
    this.sum += n;
   });
  }
 });
 adder.add([1 2 3]
 // adder.sum === 0

最後に、一つ覚えておいてください：アロー関数の中でのthisは、外側のスコープの値を継承します。したがって、その指針を変更することはできません。

まとめ

これでこの記事のすべての内容が終わりました。この記事の内容が皆様の学習や仕事に少しでも役立つことを願っています。何かご不明な点があれば、コメントを残してください。

声明：本文の内容はインターネットから取得しており、著作権者はすべて所有しています。インターネットユーザーにより自発的に貢献し、自己でアップロードされています。本サイトは所有権を持ちません。人工的な編集は行われていません。また、関連する法的責任を負いません。著作権侵害の疑いがある場合は、メールを送信してください：notice#oldtoolbag.com（メールを送信する際、#を@に変更してください。報告を行い、関連する証拠を提供してください。一旦確認がとれましたら、本サイトは即座に侵害疑いのコンテンツを削除します。）

基礎教程
おすすめ