Ich weiß, dass der >=Operator mehr als oder gleich bedeutet, aber ich habe gesehen=> in einem Quellcode gesehen. Was bedeutet dieser Operator?

Hier ist der Code:

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

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

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

Was es ist

Dies ist eine Pfeilfunktion. Pfeilfunktionen sind eine kurze Syntax, die von ECMAscript 6 eingeführt wurde und ähnlich wie Funktionsausdrücke verwendet werden kann. Mit anderen Worten, Sie können sie häufig anstelle von Ausdrücken wie verwenden function (foo) {...}. Aber sie haben einige wichtige Unterschiede. Zum Beispiel binden sie nicht ihre eigenen Werte von this(siehe unten für die Diskussion).

Pfeilfunktionen sind Teil der ECMAscript 6-Spezifikation. Sie werden noch nicht in allen Browsern unterstützt, aber sie werden in Node v. 4.0+ und in den meisten modernen Browsern, die ab 2018 verwendet werden, teilweise oder vollständig unterstützt . (Ich habe unten eine unvollständige Liste der unterstützenden Browser aufgeführt.)

Weitere Informationen finden Sie in der Mozilla-Dokumentation zu Pfeilfunktionen .

Aus der Mozilla-Dokumentation:

Ein Pfeil Funktionsausdruck (auch als Fett Pfeil Funktion bekannt) hat eine kürzere Syntax im Vergleich zu Funktionsausdrücken und bindet lexikalisch den thisWert (nicht bindet seine eigene this, arguments, super, oder new.target). Pfeilfunktionen sind immer anonym. Diese Funktionsausdrücke eignen sich am besten für Nicht-Methodenfunktionen und können nicht als Konstruktoren verwendet werden.

Ein Hinweis zum Wie this Funktionsweise von Pfeilfunktionen

Eine der praktischsten Funktionen einer Pfeilfunktion ist im obigen Text enthalten:

Eine Pfeilfunktion ... bindet den thisWert lexikalisch (bindet nicht seinen eigenen this...)

Einfacher ausgedrückt bedeutet dies, dass die Pfeilfunktion den thisWert aus ihrem Kontext beibehält und keinen eigenen hat this. Eine traditionelle Funktion kann ihren eigenen thisWert binden , je nachdem, wie sie definiert und aufgerufen wird. Dies kann viel Gymnastik wie self = this;usw. erfordern , um thisvon einer Funktion in eine andere Funktion zuzugreifen oder diese zu manipulieren . Weitere Informationen zu diesem Thema finden Sie in den Erläuterungen und Beispielen in der Mozilla-Dokumentation .

Beispielcode

Beispiel (auch aus den Dokumenten):

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]

Hinweise zur Kompatibilität

Sie können Pfeilfunktionen in Node verwenden, aber die Browserunterstützung ist unvollständig.

Die Browserunterstützung für diese Funktionalität hat sich erheblich verbessert, ist jedoch für die meisten browserbasierten Anwendungen noch nicht weit genug verbreitet. Ab dem 12. Dezember 2017 wird es in aktuellen Versionen von unterstützt:

• Chrome (Version 45+)
• Firefox (v. 22+)
• Rand (v. 12+)
• Oper (v. 32+)
• Android Browser (v. 47+)
• Opera Mobile (Version 33+)
• Chrome für Android (Version 47+)
• Firefox für Android (Version 44+)
• Safari (v. 10+)
• iOS Safari (Version 10.2+)
• Samsung Internet (Version 5+)
• Baidu Browser (v. 7.12+)

Nicht unterstützt in:

• IE (bis v. 11)
• Opera Mini (bis Version 8.0)
• Blackberry Browser (bis Version 10)
• IE Mobile (bis Version 11)
• UC Browser für Android (bis Version 11.4)
• QQ (bis v. 1.2)

Weitere (und aktuellere) Informationen finden Sie auf CanIUse.com (keine Zugehörigkeit).

Dies ist als Pfeilfunktion bekannt und Teil der ECMAScript 2015-Spezifikation ...

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

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

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

Kürzere Syntax als die vorherige:

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

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

DEMO

Die andere tolle Sache ist lexikalisch this ... Normalerweise machst du so etwas wie:

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();

Aber das könnte mit dem Pfeil wie folgt umgeschrieben werden:

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
Mehr zur Syntax

Weitere, hier ist eine ziemlich gute Antwort für , wenn Funktionen verwenden Pfeil.

Dies wäre der in ECMAScript 6 eingeführte "Pfeilfunktionsausdruck".

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

Aus historischen Gründen (wenn sich die Wiki-Seite später ändert) gilt Folgendes:

Ein Pfeilfunktionsausdruck hat im Vergleich zu Funktionsausdrücken eine kürzere Syntax und bindet diesen Wert lexikalisch. Pfeilfunktionen sind immer anonym.

Dies sind Pfeilfunktionen

Auch als Fettpfeilfunktionen bekannt . Sie sind eine saubere und konsistente Möglichkeit, Funktionsausdrücke zu schreiben, zfunction() {} .

Pfeil Funktionen kann die Notwendigkeit entfernen function, returnund{} wenn Funktionen definieren. Sie sind Einzeiler, ähnlich wie Lambda Expressions in Java oder Python.

Beispiel ohne Parameter

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

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

Wenn mehrere Anweisungen innerhalb derselben queue[0]Pfeilfunktion gemacht werden müssen, müssen Sie in diesem Beispiel in Curley-Klammern setzen {}. In diesem Fall kann die return-Anweisung nicht weggelassen werden.

Beispiel mit 1 Parameter

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

addCustomer('Toby');

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

Sie können oben weglassen {}.

Wenn es einen einzelnen Parameter gibt, können die Klammern ()um den Parameter weggelassen werden.

Beispiel mit mehreren Parametern

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

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

Ein nützliches Beispiel

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

Wenn wir den Preis für jede Frucht in einem einzigen Array erhalten wollten, könnten wir in ES5 Folgendes tun:

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

In ES6 mit den neuen Pfeilfunktionen können wir dies präziser gestalten:

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

Weitere Informationen zu Pfeilfunktionen finden Sie hier .

Browser-Kompatibilität

• IE: Noch nicht unterstützt
• Rand: 12+ (Alle Versionen)
• Firefox: 22+
• Chrome: 45+
• Safari: 10+
• iOS Safari: 10.2+
• Android Browser: 56+

Weitere aktuelle Informationen zur Browserkompatibilität finden Sie hier

Nur um ein weiteres Beispiel hinzuzufügen, was ein Lambda ohne Verwendung einer Karte tun kann:

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

Wie andere gesagt haben, ist es eine neue Syntax zum Erstellen von Funktionen.

Diese Art von Funktionen unterscheidet sich jedoch von normalen:

• Sie binden den thisWert. Wie durch die Spezifikation erklärt ,

  Ein ArrowFunction nicht definiert lokale Bindungen für arguments, super, this, oder new.target. Jede Bezugnahme auf arguments, super, this, oder new.targetinnerhalb eines ArrowFunction muß löst in einer lexikalisch einschließenden Umgebung eine Bindung. In der Regel ist dies die Funktionsumgebung einer unmittelbar einschließenden Funktion.

  Obwohl eine ArrowFunction Verweise auf enthalten kann super, wird das in Schritt 4 erstellte Funktionsobjekt durch Ausführen von MakeMethod nicht zu einer Methode gemacht . Eine ArrowFunction , auf die verwiesen super wird , ist immer in einer Nicht- ArrowFunction enthalten, und auf den zu implementierenden Status kann superüber den Bereich zugegriffen werden, der vom Funktionsobjekt der ArrowFunction erfasst wird .

• Sie sind keine Konstruktoren.

  Das heißt, sie haben keine interne Methode und können daher nicht instanziiert werden, z

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

Ich habe gelesen, das ist ein Symbol von Arrow FunctionsinES6

diese

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

using Arrow Functionkann geschrieben werden als

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

MDN Docs

Hinzufügen eines einfachen CRUD-Beispiels mit Arrowfunction

 //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)); 

Unzufrieden mit den anderen Antworten. Die am häufigsten gewählte Antwort vom 13.3.2019 ist sachlich falsch.

Die kurze, knappe Version von =>bedeutet, dass es sich um eine Verknüpfung handelt, die eine Funktion schreibt UND sie an den aktuellen Wert bindetthis

const foo = a => a * 2;

Ist effektiv eine Abkürzung für

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

Sie können alle Dinge sehen, die gekürzt wurden. Wir brauchten functionweder returnnoch.bind(this) noch Klammern oder Klammern

Ein etwas längeres Beispiel für eine Pfeilfunktion könnte sein

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

Zeigen, dass wir, wenn wir mehrere Argumente für die Funktion wünschen, Klammern benötigen und wenn wir mehr als einen einzelnen Ausdruck schreiben möchten, Klammern und einen expliziten Ausdruck benötigen return.

Es ist wichtig, den .bindTeil zu verstehen und es ist ein großes Thema. Es hat damit zu tun, was thisin JavaScript bedeutet.

ALLE Funktionen haben einen impliziten Parameter namens this. Wie thisbeim Aufrufen einer Funktion festgelegt wird, hängt davon ab, wie diese Funktion aufgerufen wird.

Nehmen

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

Wenn Sie es normal nennen

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

this wird das globale Objekt sein.

Wenn Sie sich im strengen Modus befinden

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

// or

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

Es wird sein undefined

Sie können thisdirekt mit calloder einstellenapply

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}

Sie können auch thisimplizit mit dem Punktoperator festlegen.

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

Ein Problem tritt auf, wenn Sie eine Funktion als Rückruf oder Listener verwenden möchten. Sie erstellen eine Klasse und möchten eine Funktion als Rückruf zuweisen, die auf eine Instanz der Klasse zugreift.

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

Der obige Code funktioniert nicht, da der thisWert nicht die Instanz der Klasse ist, wenn das Element das Ereignis auslöst und die Funktion aufruft .

Ein üblicher Weg, um dieses Problem zu lösen, ist die Verwendung .bind

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

Weil die Pfeilsyntax dasselbe tut, was wir schreiben können

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

bindmacht effektiv eine neue Funktion . Wenn bindes das nicht gäbe, könnten Sie es sich im Grunde so machen

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

In älterem JavaScript ohne den Spread-Operator wäre dies der Fall

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

Um diesen Code zu verstehen, müssen Sie die Schließungen verstehen. In der Kurzversion wird jedoch bindeine neue Funktion erstellt, die immer die ursprüngliche Funktion mit dem thisdaran gebundenen Wert aufruft . Die Pfeilfunktion macht dasselbe, da sie eine Abkürzung für istbind(this)

Wie alle anderen Antworten bereits gesagt haben, ist es Teil der ES2015-Pfeilfunktionssyntax. Insbesondere handelt es sich nicht um einen Operator, sondern um ein Interpunktionszeichen, das die Parameter vom Textkörper trennt : ArrowFunction : ArrowParameters => ConciseBody. ZB (params) => { /* body */ }.

ES6 Pfeilfunktionen:

In Javascript =>ist das das Symbol eines Pfeilfunktionsausdrucks. Ein Pfeilfunktionsausdruck hat keine eigene thisBindung und kann daher nicht als Konstruktorfunktion verwendet werden. zum Beispiel:

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

Regeln für die Verwendung von Pfeilfunktionen:

• Wenn es genau ein Argument gibt, können Sie die Klammern des Arguments weglassen.
• Wenn Sie einen Ausdruck zurückgeben und dies in derselben Zeile tun, können Sie {}die returnAnweisung und weglassen

Zum Beispiel:

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));

Mit Pfeilfunktionen, die mit dem Symbol (=>) gekennzeichnet sind, können Sie anonyme Funktionen und Methoden erstellen. Das führt zu einer kürzeren Syntax. Im Folgenden finden Sie beispielsweise eine einfache Funktion zum Hinzufügen, die die Addition von zwei Zahlen zurückgibt.

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

Die obige Funktion wird durch Verwendung der unten gezeigten "Arrow" -Syntax kürzer.

Der obige Code besteht aus zwei Teilen, wie in der obigen Abbildung gezeigt: -

Eingabe: - In diesem Abschnitt werden die Eingabeparameter für die anonyme Funktion angegeben.

Logik: - Dieser Abschnitt steht nach dem Symbol „=>“. Dieser Abschnitt enthält die Logik der eigentlichen Funktion.

Viele Entwickler glauben, dass die Pfeilfunktion Ihre Syntax kürzer und einfacher macht und somit Ihren Code lesbar macht.

Wenn Sie dem obigen Satz glauben, dann versichere ich Ihnen, dass es ein Mythos ist. Wenn Sie für einen Moment denken, dass eine richtig geschriebene Funktion mit Namen viel lesbarer ist als kryptische Funktionen, die in einer Zeile mit einem Pfeilsymbol erstellt wurden.

Die Hauptverwendung der Pfeilfunktion besteht darin, sicherzustellen, dass Code im Aufruferkontext ausgeführt wird.

Siehe den folgenden Code, in dem eine globale Variable "Kontext" definiert ist. Auf diese globale Variable wird innerhalb einer Funktion "SomeOtherMethod" zugegriffen, die von einer anderen Methode "SomeMethod" aufgerufen wird.

Diese "SomeMethod" hat eine lokale "Kontext" -Variable. Da "SomeOtherMethod" von "SomeMethod" aufgerufen wird, erwarten wir, dass "lokaler Kontext" angezeigt wird, aber "globaler Kontext".

var context = “global context”;

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

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

var instance = new SomeMethod();

Wenn Sie den Anruf jedoch durch Verwendung der Pfeilfunktion ersetzen, wird "lokaler Kontext" angezeigt.

var context = "global context";

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

Ich möchte Sie ermutigen, diesen Link zu lesen ( Pfeilfunktion in JavaScript ) , der alle Szenarien des Javascript-Kontexts erklärt und in welchen Szenarien der Aufruferkontext nicht berücksichtigt wird.

Sie können auch die Demonstration der Pfeilfunktion mit Javascript in diesem Youtube-Video sehen, das praktisch den Begriff Kontext demonstriert.

Wie andere angegeben haben, werden reguläre (traditionelle) Funktionen thisvon dem Objekt verwendet, das die Funktion aufgerufen hat (z. B. eine Schaltfläche, auf die geklickt wurde) . Stattdessen werden Pfeilfunktionen thisvon dem Objekt verwendet, das die Funktion definiert.

Betrachten Sie zwei nahezu identische Funktionen:

regular = function() {
  ' Identical Part Here;
}


arrow = () => {
  ' Identical Part Here;
}

Das folgende Snippet zeigt den grundlegenden Unterschied zwischen den thisDarstellungen für jede Funktion. Die reguläre Funktion wird ausgegeben, [object HTMLButtonElement]während die Pfeilfunktion ausgegeben wird [object Window].

<html>
 <button id="btn1">Regular: `this` comes from "this button"</button>
 <br><br>
 <button id="btn2">Arrow: `this` comes from object that defines the function</button>
 <p id="res"/>

 <script>
  regular = function() {
    document.getElementById("res").innerHTML = this;
  }

  arrow = () => {
    document.getElementById("res").innerHTML = this;
  }

  document.getElementById("btn1").addEventListener("click", regular);
  document.getElementById("btn2").addEventListener("click", arrow);
 </script>
</html>