JavaScriptでの "=>"（等しいと大きくからなる矢印）の意味は何ですか？

Question

私は>=演算子が以上を意味することを知っていますが、私はいくつかのソースコードで=>を見ました。その演算子の意味は何ですか？

これがコードです：

promiseTargetFile(fpParams, aSkipPrompt, relatedURI).then(aDialogAccepted => {
    if (!aDialogAccepted)
        return;

    saveAsType = fpParams.saveAsType;
    file = fpParams.file;

    continueSave();
}).then(null, Components.utils.reportError);

Answer 1

それは何ですか

これは矢印関数です。矢印関数はECMAscript 6で導入された短い構文で、関数式の使用方法と同様に使用できます。言い換えれば、function (foo) {...}のような式の代わりにそれらを頻繁に使用できます。しかし、それらにはいくつかの重要な違いがあります。たとえば、thisの独自の値をバインドしません（以下の説明を参照してください）。

矢印関数はECMAscript 6仕様の一部です。すべてのブラウザでまだサポートされているわけではありませんが、部分的にまたは完全にサポートされています in Node v。4.0 + および2018年の時点で使用されているほとんどの最新のブラウザで。以下にサポートするブラウザの部分的なリストが含まれています）。

矢印関数のMozillaドキュメントで詳細を読むことができます 。

Mozillaのドキュメントから：

矢印関数式（ファット矢印関数とも呼ばれます）は、 関数式 と比較して構文が短く、 this 値を字句的にバインドします（独自の をバインドしませんthis 、 arguments 、 super 、または new.target ）。矢印関数は常に匿名です。これらの関数式は非メソッド関数に最適であり、コンストラクターとして使用することはできません。

矢印関数でのthisの動作に関する注意

矢印関数の最も便利な機能の1つは、上記のテキストに埋もれています。

矢印関数...はthis値を字句的にバインドします（独自のthis...をバインドしません）

簡単に言えば、これは、矢印関数がコンテキストからthis値を保持し、独自のthisを持たないことを意味します。従来の関数may定義および呼び出し方法に応じて、独自のthis値をバインドします。これには、ある関数から別の関数内のthisにアクセスまたは操作するために、self = this;などの多くの体操が必要になる場合があります。このトピックの詳細については、 Mozillaドキュメントの説明と例 を参照してください。

サンプルコード

例（ドキュメントからも）：

var a = [
  "We're up all night 'til the Sun",
  "We're up all night to get some",
  "We're up all night for good fun",
  "We're up all night to get lucky"
];

// These two assignments are equivalent:

// Old-school:
var a2 = a.map(function(s){ return s.length });

// ECMAscript 6 using arrow functions
var a3 = a.map( s => s.length );

// both a2 and a3 will be equal to [31, 30, 31, 31]

---

互換性に関する注意

Nodeで矢印関数を使用できますが、ブラウザのサポートは不安定です。

この機能に対するブラウザのサポートはかなり改善されていますが、ほとんどのブラウザベースの使用にはまだ十分ではありません。 2017年12月12日の時点で、以下の現在のバージョンでサポートされています。

• Chrome（v。45+）
• Firefox（v。22以降）
• エッジ（v。12+）
• Opera（v。32+）
• Androidブラウザー（v。47+）
• Opera Mobile（v。33+）
• Chrome for Android（v。47+）
• Firefox for Android（v。44以降）
• Safari（v。10以降）
• iOS Safari（v。10.2+）
• Samsung Internet（v。5+）
• Baidu Browser（v。7.12+）

以下ではサポートされていません：

• IE（v。11まで）
• Opera Mini（v。8.0まで）
• Blackberry Browser（v。10まで）
• IE Mobile（v。11まで）
• AndroidのUCブラウザ（v。11.4まで）
• QQ（v。1.2まで）

CanIUse.com （提携なし）で、より多くの（そしてより最新の）情報を見つけることができます。

Answer 2

これは、 ECMAScript 2015仕様の一部であるArrow Functionとして知られています ...

var foo = ['a', 'ab', 'abc'];

var bar = foo.map(f => f.length);

console.log(bar); // 1,2,3

前の構文よりも短い構文

// < ES6:
var foo = ['a', 'ab', 'abc'];

var bar = foo.map(function (f) {
  return f.length;
});
console.log(bar); // 1,2,3

_ demo _

他の素晴らしいことはlexicalthis...です。通常は、次のようにします。

function Foo() {
    this.name = name;
    this.count = 0;
    this.startCounting();
}

Foo.prototype.startCounting = function() {
  var self = this;
  setInterval(function () {
    // this is the Window, not Foo {}, as you might expect
    console.log(this); // [object Window]
    // that's why we reassign this to self before setInterval()
    console.log(self.count);
    self.count++;
  },1000)
}

new Foo();

しかし、それはこのように矢印で書き換えることができます：

function Foo() {
    this.name = name;
    this.count = 0;
    this.startCounting();
}

Foo.prototype.startCounting = function() {
  setInterval(() => {        
    console.log(this); // [object Object]
    console.log(this.count); // 1, 2, 3
    this.count++;
  },1000)
}

new Foo();

_ demo _

_ mdn _
構文の詳細

詳細については、 これが 矢印機能を使用するためのwhenに対するかなり良い答えです。

Answer 3

これはECMAScript 6で導入された「矢印関数式」です。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/arrow_functions

歴史的な目的のために（Wikiページが後で変更される場合）、それは次のとおりです。

矢印関数式は、関数式に比べて構文が短く、この値を字句的にバインドします。矢印関数は常に匿名です。

Answer 4

mapを使わずにラムダができることの別の例を追加するためだけに：

a = 10
b = 2

var mixed = (a,b) => a * b; 
// OR
var mixed = (a,b) => { (any logic); return a * b };

console.log(mixed(a,b)) 
// 20

Answer 5

これらは矢印関数です

ファットアロー関数 とも呼ばれます。それらは関数式を書くためのクリーンで簡潔な方法です。 function() {}。

矢印関数は、関数を定義するときにfunction、return、および{}の必要性を取り除くことができます。それらは、JavaやPythonのLambda Expressionsに似たワンライナーです。

パラメータなしの例

const queue = ['Dave', 'Sarah', 'Sharon'];
const nextCustomer = () => queue[0];

console.log(nextCustomer()); // 'Dave'

同じArrow Function内で複数のステートメントを作成する必要がある場合は、この例ではqueue[0]を括弧{}で囲む必要があります。この場合、return文は省略できません。

1パラメータの例

const queue = ['Dave', 'Sarah', 'Sharon'];
const addCustomer = name => {
  queue.Push(name);
};

addCustomer('Toby');

console.log(queue); // ['Dave', 'Sarah', 'Sharon', 'Toby']

上記から{}を省略することができます。

パラメータが1つしかない場合は、パラメータを囲む()を省略することができます。

複数のパラメータを使用した例

const addNumbers = (x, y) => x + y

console.log(addNumbers(1, 5)); // 6

便利な例

const fruits = [
    {name: 'Apple', price: 2},
    {name: 'Bananna', price: 3},
    {name: 'Pear', price: 1}
];

ES5では、すべての果物の価格を単一の配列で取得したい場合は、次のようにします。

fruits.map(function(fruit) {
    return fruit.price;
}); // [2, 3, 1]

ES6では、新しいArrow Functionsを使用して、これをより簡潔にすることができます。

fruits.map(fruit => fruit.price); // [2, 3, 1]

矢印機能に関する追加情報は ここ で見つけることができます。

ブラウザの互換性

• IE：まだサポートされていない
• Edge：12+（すべてのバージョン）
• Firefox：22以上
• Chrome：45+
• サファリ：10歳以上
• iOS Safari：10.2以降
• Androidブラウザ：56+

追加の最新情報はブラウザの互換性にあります こちら

Answer 6

他の人が言っているように、それは関数を作成するための新しい構文です。

しかし、この種の関数は通常のものとは異なります。

• それらはthis値を束縛します。 仕様 で説明されているように、

  ArrowFunction は、arguments、super、this、またはnew.targetのローカルバインディングを定義しません。 ArrowFunction 内でarguments、super、this、またはnew.targetを参照する場合は、字句的に囲む環境内のバインディングに解決する必要があります。通常、これはすぐに囲む関数の関数環境になります。

  ArrowFunction にsuperへの参照が含まれていても、手順4で作成した関数オブジェクトは、 MakeMethod を実行してメソッドにすることはできません。 superを参照する ArrowFunction は常に非 - ArrowFunction に含まれ、superを実装するのに必要な状態は関数オブジェクトによって取得される scope を介してアクセス可能です。 ArrowFunction の。

• それらは非コンストラクタです。

  つまり、[[Construct]]内部メソッドを持たないため、インスタンス化できません。

  var f = a => a;
  f(123);  // 123
  new f(); // TypeError: f is not a constructor
  

Answer 7

私が読んだ、これはArrow FunctionsのES6のシンボルです

この

var a2 = a.map(function(s){ return s.length });

Arrow Functionを使うと、

var a3 = a.map( s => s.length );

MDNドキュメント

Answer 8

Arrowfunctionを使った簡単なCRUDの例の追加

 //Arrow Function
 var customers   = [
   {
     name: 'Dave',
     contact:'9192631770'
   },
   {
     name: 'Sarah',
     contact:'9192631770'
   },
   {
     name: 'Akhil',
     contact:'9928462656' 
   }],

// No Param READ
 getFirstCustomer = () => { 
   console.log(this);
   return customers[0];
 };
  console.log("First Customer "+JSON.stringify(getFirstCustomer())); // 'Dave' 

   //1 Param SEARCH
  getNthCustomer = index=>{
    if( index>customers.length)
    {
     return  "No such thing";
   }
   else{
       return customers[index];
     } 
  };
  console.log("Nth Customer is " +JSON.stringify(getNthCustomer(1))); 

   //2params ADD
  addCustomer = (name, contact)=> customers.Push({
     'name': name,
     'contact':contact
    });
  addCustomer('Hitesh','8888813275');
  console.log("Added Customer "+JSON.stringify(customers)); 

  //2 param UPDATE
  updateCustomerName = (index, newName)=>{customers[index].name= newName};
  updateCustomerName(customers.length-1,"HiteshSahu");
  console.log("Updated Customer "+JSON.stringify(customers));

  //1 param DELETE
  removeCustomer = (customerToRemove) => customers.pop(customerToRemove);
  removeCustomer(getFirstCustomer());
  console.log("Removed Customer "+JSON.stringify(customers)); 

Answer 9

他のすべての答えがすでに述べたように、それはES2015矢印機能構文の一部です。より具体的には、これは演算子ではなく、本体からパラメーターを分離する句読点トークンです：ArrowFunction : ArrowParameters => ConciseBody。例えば。 (params) => { /* body */ }。

Answer 10

ES6矢印関数：

JavaScriptでは、=>は矢印関数式のシンボルです。矢印関数式はそれ自身のthisバインディングを持たないので、コンストラクタ関数として使うことはできません。例えば：

var words = 'hi from outside object';

let obj = {
  words: 'hi from inside object',
  talk1: () => {console.log(this.words)},
  talk2: function () {console.log(this.words)}
}

obj.talk1();  // doesn't have its own this binding, this === window
obj.talk2();  // does have its own this binding, this is obj

矢印機能の使用規則

• 正確に 1つの引数がある場合は、引数の括弧を省略することができます。
• 式を返して同じ行でこれを行う場合は、{}とreturnステートメントを省略できます。

例えば：

let times2 = val => val * 2;  
// It is on the same line and returns an expression therefore the {} are ommited and the expression returns implictly
// there also is only one argument, therefore the parentheses around the argument are omitted

console.log(times2(3));

Answer 11

他の答えには不満。 2019年3月13日の時点でのトップ投票の答えは実際には間違っています。

=>が意味するものの簡潔なバージョンは、それを現在のthisにバインドするための関数 _と_ を書くショートカットです。

const foo = a => a * 2;

効果的なショートカットです

const foo = function(a) { return a * 2; }.bind(this);

短くなったことすべてを見ることができます。 functionもreturnも.bind(this)も括弧や括弧さえも必要ありませんでした

矢印関数の少し長い例は、

const foo = (width, height) => {
  const area = width * height;
  return area;
};

関数に複数の引数が必要な場合は括弧が必要で、複数の式を書く必要がある場合は中括弧と明示的なreturnが必要です。

.bind部分を理解することは重要で、それは大きなトピックです。 JavaScriptのthisの意味と関係があります。

_ all _ 関数には、thisという暗黙のパラメータがあります。関数を呼び出すときのthisの設定方法は、その関数の呼び出し方法によって異なります。

取る

function foo() { console.log(this); }

普通に呼んだら

function foo() { console.log(this); }
foo();

thisがグローバルオブジェクトになります。

厳密モードの場合

`use strict`;
function foo() { console.log(this); }
foo();

// or

function foo() {
   `use strict`;
   console.log(this);
 }
foo();

それはundefinedになります

thisは、callまたはapplyを使用して直接設定できます。

function foo(msg) { console.log(msg, this); }

const obj1 = {abc: 123}
const obj2 = {def: 456}

foo.call(obj1, 'hello');  // prints Hello {abc: 123}
foo.apply(obj2, ['hi']);  // prints Hi {def: 456}

ドット演算子.を使用してthisを暗黙的に設定することもできます。

function foo(msg) { console.log(msg, this); }
const obj = {
   abc: 123,
   bar: foo,
}
obj.bar('Hola');  // prints Hola {abc:123, bar: f}

関数をコールバックやリスナーとして使いたいときに問題が起こります。あなたはクラスを作り、そのクラスのインスタンスにアクセスするコールバックとして関数を割り当てたいのです。

class ShowName {
  constructor(name, elem) {
    this.name = name;
    elem.addEventListener('click', function() {
       console.log(this.name);  // won't work
    }); 
  }
}

上記のコードは、要素がイベントを起動して関数を呼び出すときにthisの値がクラスのインスタンスにならないため機能しません。

この問題を解決するための一般的な方法の1つは、.bindを使用することです。

class ShowName {
  constructor(name, elem) {
    this.name = name;
    elem.addEventListener('click', function() {
       console.log(this.name); 
    }.bind(this); // <=========== ADDED! ===========
  }
}

Arrowシンタックスは私たちが書くことができるのと同じことをする

class ShowName {
  constructor(name, elem) {
    this.name = name;
    elem.addEventListener('click',() => {
       console.log(this.name); 
    });
  }
}

bindは事実上新しい関数を作るです。 bindが存在しない場合は、基本的に次のようにして独自のものを作成できます。

function bind(funcitonToBind, valueToUseForThis) {
  return function(...args) {
    functionToBind.call(valueToUseForThis, ...args);
  };
}

スプレッド演算子のない古いJavaScriptでは、

function bind(funcitonToBind, valueToUseForThis) {
  return function() {
    functionToBind.apply(valueToUseForThis, arguments);
  };
}

そのコードを理解するには クロージャの理解 が必要ですが、/ bindという短いバージョンは、常に元の関数をそれにバインドされたthis値で呼び出す新しい関数を作成します。 arrow functionはbind(this)のショートカットなので同じことをします。

Answer 12

記号（=>）で示される矢印関数は、無名関数およびメソッドを作成するのに役立ちます。それはより短い構文につながります。たとえば、以下は2つの数値の加算を返す単純な「追加」関数です。

function Add(num1 , num2 ){
return num1 + num2;
}

以下のように「Arrow」構文を使用すると、上記の関数は短くなります。

 

上の図に示すように、上記のコードには2つの部分があります。

入力： - このセクションは、無名関数への入力パラメータを指定します。

ロジック： - このセクションはシンボル "=>"の後に来ます。このセクションは実際の機能の論理を持っています。

多くの開発者は、arrow関数はあなたの文法をより短く、より単純にし、そしてあなたのコードを読みやすくすると考えています。

あなたが上記の文章を信じているならば、それから私はあなたがそれが神話であることを保証しましょう。ちょっと考えてみれば、名前付きの適切に書かれた関数は、矢印記号を使って1行で作られた不可解な関数よりもずっと読みやすいです。

Arrow関数の主な用途は、コードが確実に呼び出し側のコンテキストで実行されるようにすることです。

グローバル変数 "context"が定義されている以下のコードを参照してください。このグローバル変数は、他のメソッド "SomeMethod"から呼び出される関数 "SomeOtherMethod"内でアクセスされます。

この「SomeMethod」はローカルの「コンテキスト」変数を持ちます。 "SomeOtherMethod"は "SomeMethod"から呼び出されるため、 "ローカルコンテキスト"が表示されることになりますが、 "グローバルコンテキスト"が表示されます。

var context = “global context”;

function SomeOtherMethod(){
alert(this.context);
}

function SomeMethod(){
this.context = “local context”;
SomeOtherMethod();
}

var instance = new SomeMethod();

しかし、矢印機能を使用して呼び出しを置き換えると、「ローカルコンテキスト」が表示されます。

var context = "global context";

    function SomeMethod(){
        this.context = "local context";
        SomeOtherMethod = () => {
            alert(this.context);
        }
        SomeOtherMethod();
    }
    var instance = new SomeMethod();

私はあなたがJavaScriptのコンテキストのすべてのシナリオを説明し、どのシナリオで呼び出し側のコンテキストが尊重されていないこのリンク（JavaScriptの 矢印機能 ）を読むことをお勧めします。

また、このyoutubeビデオの JavaScriptでの/ - 矢印機能のデモンストレーションを見ることもできます これは実質的にコンテキストという用語を示しています。