ウェブサイト検索

JavaScriptでのアロー関数の使用

JavaScriptのアロー関数は、従来の関数に対する簡潔な代替手段です。この構文により、インラインの匿名関数を素早く作成できます。

アロー関数は2015年のES6で追加されました。現在ではすべての主要なブラウザでサポートされています。Babelのようなトランスパイラを使用すれば、Internet Explorerなどの古いブラウザでも使用できます。

アロー関数を作成する

アロー関数の主な利点は、コードをどれだけ簡潔にできるかです。

こちらが伝統的な機能です:

function square(x) {





 return (x * x);



}

こちらが矢印関数として書き直された同じコードです:

const square = x => (x * x);

それは「アロー関数」と呼ばれています。矢のような「

=>

構文。

アロー関数は、コールバックを扱う際に特に便利です。

こちらが伝統的なバージョンです:

function getNonEmptyStrings(arr) {



 return arr.filter(function (i) {



 return (i.length > 0);



 });






}

そして、これは矢印関数としての内部関数です:

function getNonEmptyStrings(arr) {



 return arr.filter(i => (i.length > 0));



}

アロー関数は従来の関数よりもはるかに短いです。省略することができます

function

プレフィックス。それらはクリーンなワンライナーのステートメントを可能にし、暗黙的な

return

声明。

論争の処理

アロー関数は、いくつかの異なる形式の引数を受け入れます:

const noArgs = () => alert("I've no arguments");



const oneArg = arg => alert(`My arg is ${arg}`);



const multipleArgs = (arg1, arg2) => alert(`Args: ${arg1} ${arg2}`);

単一の引数を使用する場合、括弧は必要ありません。複数の引数がある場合は、古典的な関数宣言と同じスタイルで括弧とカンマを使用します。引数を受け取らないアロー関数には、構文が有効であるため空の括弧のペアが必要です。

オブジェクトリテラルとの作業

インラインアロー関数からオブジェクトリテラルを返すことはできますが、括弧で囲む必要があります。これはパーサーの要件です。

const func = () => ({foo: "bar"});

オブジェクトリテラルを同じ括弧で囲まれた形式を使って引数に分解することができます:

const func = ({foo}) => foo;



// func({foo: "bar"}) returns "bar"

括弧を省略すると、両方の場合で構文エラーが発生します。

戻り値

これまでのすべての例は、暗黙のうちに単一行の関数でした。

return

声明。

複数行にわたる矢印関数を書くことができます：

function getNonEmptyStrings(arr) {



 return arr.filter(i => {



 const trimmed = i.trim();



 const replaced = trimmed.replace(/[^A-Za-z]/g, "");



 return (replaced.length > 0);



 });



}

複数行の矢印関数を書くときは、その本体ブロックを従来の関数と同じように波括弧で囲みます。暗黙の戻り値を使用することはできません; 戻る必要があります。

return

声明。

語彙的束縛

構文を除けば、レキシカルバインディングの存在は、アロー関数と従来の関数式との間で最も大きな違いの一つです。

伝統的な機能があります

this

自分自身を参照することが必然です。アロー関数は常に無名です。

this

は同じ値に束縛されています。

this

矢印関数を定義するブロック内で。

class Example {



 constructor() {



 this.demo = "foobar";



 }



 classic(arr) {





    




 return arr.filter(function (a) {



 return (a === this.demo);



 });



 }



 arrow(arr) {



 return arr.filter(a => (a === this.demo));



 }



}



const ex = new Example();



// no matches



ex.classic(["foobar"]);



// matches



ex.arrow(["foobar"]);

アロー関数が使用できる能力

this

親スコープの意味は、使用する必要がないことを意味します

bind()

クラスで使用する際に。より簡潔な構文と組み合わせることで、アロー関数はコールバックを書く際の理想的な形になります。それらは、外部のコンテキストが関数自身のアイデンティティよりも重要な使い捨てのシナリオに最適です。

語彙バインディングの結果として、アロー関数は使用すべきではありません。

call

,

apply

そして

bind

関数。これらの関数は特定のスコープ内で関数を実行するために使用されます。矢印関数には関係ありません。

this

常に式が定義されているスコープに設定されます。

特性

アロー関数には、明示的に定義されたものと比較していくつかの異なる点があります。

function

表現です。

アロー関数にはない

constructor

それらのインスタンスを作成することはできません。

new

キーワード。彼らにはプロトタイプもありません -その

prototype

不動産は〜になるでしょう

undefined

通常の関数とは異なり、使用することはできません

arguments

ローカル変数。それは次のようになります。

undefined

引数の値には名前で直接アクセスしなければなりません。

アロー関数をジェネレーターとして使用することはサポートされていません。使用しようとしています

yield

アロー関数の本体内でのキーワードはエラーを引き起こします。

最後に注意すべきことは、解析順序です。矢印関数は条件式内で特別な扱いを受けるので、以下のシナリオでの出力に注意してください:

const value = false;



// Traditional function; all OK



let result = (value || function () {});



// Arrow function - throws a `SyntaxError`



let result = (value || () => null);



// Arrow function; all OK



let result = (value || (() => null));

条件式でアロー関数を作成する場合、正しく評価されるように括弧で囲む必要があります。演算子の優先順位のいくつかのルールが上書きされていることは、2番目の例で示されています。

結論

アロー関数を使用すると、コードがより簡潔になり、ボイラープレートが減ります。その属性には匿名性やレキシカルバインディングが含まれ、コールバックのようなシナリオを considerably簡素化します。同時に、それらの属性は、従来の関数のすべてを置き換える適合物ではないことも意味します。

制限に加えて、一部のJavaScript開発者は、アロー関数がコードを読みづらくし、メンテナンスを難しくする可能性があると考えています。関数キーワードの完全な欠如など、

function

と

return

コードをざっと見る際に彼らの存在を見落とすことを可能にします。構文は新しい開発者にとってはより不明瞭で、彼らがその特異性を十分に認識していないかもしれません。

そのため、コードベースでアロー関数をどのように使用するか考えるのは良いアイデアです。多くの場合、それはコールバックをアロー形式で書き、主要なトップレベル関数には別の構文を使用することを意味します。

関連記事: