JavaScriptの矢印関数はあなたをより良い開発者にすることができます

JavaScriptの矢印関数はあなたをより良い開発者にすることができます

JavaScript ES6は、Web開発の世界にエキサイティングな変化をもたらしました。 JavaScript言語への新しい追加は、新しい可能性をもたらしました。





最も人気のある変更の1つは、JavaScriptへの矢印関数の追加でした。矢印関数はJavaScript関数式を記述する新しい方法であり、アプリで関数を作成する2つの異なる方法を提供します。



従来のJavaScript関数の専門家であれば、矢印関数を少し調整する必要があります。これらが何であるか、それらがどのように機能するか、そしてそれらがどのようにあなたに利益をもたらすかを見てみましょう。





JavaScript Arrow関数とは何ですか？

矢印関数は、以前の関数式を記述するための新しい方法です。 JavaScriptES6のリリースに含まれています 。これらは、これまで使用してきたJavaScript関数式に似ていますが、ルールが少し異なります。

矢印関数は常に無名関数であり、



this

、および従来の関数よりも単純な構文を持っています。

icloudでサインインできません

これらの関数は、新しい矢印トークンを使用します。



=>

Pythonで作業したことがある場合、これらの関数は非常によく似ています。 Pythonラムダ式 。

これらの関数の構文は、通常の関数よりも少しわかりやすくなっています。覚えておくべきいくつかの新しいルールがあります：



  • functionキーワードが削除されました
  • returnキーワードはオプションです
  • 中括弧はオプションです

やるべき小さな変更がたくさんあるので、関数式の基本的な比較から始めましょう。

矢印関数の使用方法

矢印関数は使いやすいです。従来の関数式と並べて比較すると、矢印関数の理解が容易です。

これは、2つの数値を加算する関数式です。最初に従来の関数メソッドを使用します。

let addnum = function(num1,num2){
return num1 + num2;
};
addnum(1,2);
>>3

これは、2つの引数を取り、合計を返す非常に単純な関数です。

矢印関数に変更された式は次のとおりです。

let addnum = (num1,num2) => { return num1 + num2;};
addnum(1,2);
>>3

関数の構文は、矢印関数を使用するとまったく異なります。 functionキーワードが削除されました。矢印トークンは、JavaScriptに関数を記述していることを知らせます。

中括弧とreturnキーワードはまだあります。これらは矢印機能ではオプションです。同じ関数のさらに簡単な例を次に示します。

let addnum = (num1,num2) => num1 + num2;

returnキーワードと中括弧はなくなりました。残っているのは、元の関数のほぼ半分のコードである非常にクリーンな1行の関数です。記述されたコードがはるかに少なくても同じ結果が得られます。

矢印関数にはまだまだあります。彼らが何ができるかをよりよく理解できるように、さらに深く掘り下げましょう。

矢印機能の特徴

矢印関数には、さまざまな用途と機能が含まれています。

ペイパルを利用するには何歳である必要がありますか

通常の機能

矢印関数は1つ以上の引数を使用できます。 2つ以上の引数を使用している場合は、それらを括弧で囲む必要があります。引数が1つしかない場合は、括弧を使用する必要はありません。

let square = x => x * x
square(2);
>>4

矢印関数は引数なしで使用できます。関数で引数を使用していない場合は、空の括弧を使用する必要があります。

let helloFunction = () => Console.log('Hello reader!');
helloFunction();
>>Hello reader!

このような単純な関数は、はるかに少ないコードを使用します。複雑なものがどれほど簡単か想像してみてください JavaScriptスライドショーのようなプロジェクト 関数を書く簡単な方法があるときになります。

これを使用する

の概念

this

JavaScriptを使用する上で最も難しい部分になる傾向があります。矢印関数は

this

使いやすい。

矢印関数を使用する場合

this

囲み関数によって定義されます。これにより、ネストされた関数を作成して必要なときに発生する問題が発生する可能性があります

this

あなたの主な機能に適用する

これは、通常の関数で使用する必要のある回避策を示す一般的な例です。

function Person() {
var that = this; //You have to assign 'this' to a new variable
that.age = 0;
setInterval(function growUp() {
that.age++;
}, 1000);
}

の値の割り当て

this

変数に変更すると、メイン関数内で関数を呼び出すときに読み取り可能になります。これは面倒です。矢印関数を使用してこれを行うためのより良い方法があります。

function Person(){
this.age = 0;
setInterval(() => {
this.age++; // Now you can use 'this' without a new variable declared
}, 1000);
}

これらは関数には最適ですが、オブジェクト内にメソッドを作成するために使用しないでください。矢印関数は、適切なスコープを使用しません

this

。

これは、矢印関数を使用して内部にメソッドを作成する単純なオブジェクトです。メソッドは、 トッピング 呼び出されると1つずつ変化します。代わりに、それはまったく機能しません。

USBフラッシュドライブが表示されない
let pizza = {
toppings: 5,
removeToppings: () => {
this.toppings--;
}
}
//A pizza object with 5 toppings
>pizza
>>{toppings: 5, removeToppings: f}
pizza.removeToppings(); //The method will not do anything to the object
>pizza
>>{toppings: 5, removeToppings: f} //Still has 5 toppings

配列の操作

矢印関数を使用すると、配列メソッドの操作に使用するコードを簡略化できます。配列と 配列メソッドはJavaScriptの非常に重要な部分です だからあなたはそれらをたくさん使うでしょう。

のようないくつかの便利な方法があります 地図 配列のすべての要素で関数を実行し、新しい配列を返すメソッド。

let myArray = [1,2,3,4];
myArray.map(function(element){
return element + 1;
});
>> [2,3,4,5]

これは、配列内のすべての値に1を追加する非常に単純な関数です。矢印関数を使用すると、より少ないコードで同じ関数を記述できます。

let myArray = [1,2,3,4];
myArray.map(element => {
return element + 1;
});
>> [2,3,4,5]

今でははるかに読みやすくなっています。

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

矢印関数を使用して、JavaScriptでオブジェクトリテラルを作成できます。通常の関数で作成できますが、少し長くなります。

let createObject = function createName(first,last) {
return {
first: first,
last: last
};
};

より少ないコードを使用して、矢印関数で同じオブジェクトを作成できます。矢印表記を使用すると、関数本体を括弧で囲む必要があります。矢印関数を使用して改善された構文を次に示します。

let createArrowObject = (first,last) => ({first:first, last:last});

JavaScriptの矢印関数とその先

これで、JavaScriptの矢印関数が開発者としての生活を楽にするいくつかの異なる方法を理解しました。それらは構文を短縮し、使用してより多くの制御を提供します

this

、オブジェクトの作成を容易にし、配列メソッドを操作する新しい方法を提供します。

JavaScript ES6での矢印関数の導入は、他の多くの機能とともに、JavaScriptがWeb開発においてどれほど重要になったかを示しています。しかし、できることはまだまだたくさんあります。

JavaScriptについてもっと知りたいですか？これらのJavaScriptフレームワークを学びましょう。さらに、私たちの JavaScriptのチートシート 貴重な情報を提供し、 JavaScriptのしくみ あなたをより良い開発者にすることができます。

共有 共有 つぶやき Eメール 6つの可聴の選択肢：最高の無料または安価なオーディオブックアプリ

オーディオブックにお金をかけたくない場合は、無料で合法的にオーディオブックを聴くことができる優れたアプリをいくつか紹介します。

次を読む 関連トピック
  • プログラミング
  • JavaScript
著者について アンソニー・グラント（公開された40の記事）

Anthony Grantは、プログラミングとソフトウェアをカバーするフリーランスのライターです。彼は、プログラミング、Excel、ソフトウェア、およびテクノロジーに手を出しているコンピューターサイエンスの専攻です。

アンソニー・グラントのその他の作品

ニュースレターを購読する

ニュースレターに参加して、技術的なヒント、レビュー、無料の電子書籍、限定セールを入手してください。

購読するにはここをクリックしてください