Was ist die Bedeutung von "=>" (ein Pfeil, gebildet aus Gleichheitszeichen & größer als) in JavaScript?

Question

Ich weiß, dass der >= Operator mehr als oder gleich bedeutet, aber ich habe => in einigen Quellcodes 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);

Answer 1

Was ist das

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

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

Sie können mehr in der Mozilla-Dokumentation zu Pfeilfunktionen lesen.

Aus der Mozilla-Dokumentation:

Ein Pfeilfunktionsausdruck (auch bekannt als Pfeilfunktion) hat eine kürzere Syntax im Vergleich zu Funktionsausdrücken und bindet lexikalisch den this-Wert (bindet nicht seinen eigenen 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.

Eine Anmerkung zur Funktionsweise von this in Pfeilfunktionen

Eines der praktischsten Merkmale einer Pfeilfunktion steckt im obigen Text:

Ein Pfeilfunktion... bindet lexikalisch den this-Wert (bindet nicht seinen eigenen this...)

Was das in einfacheren Worten bedeutet, ist, dass die Pfeilfunktion den this-Wert aus ihrem Kontext beibehält und nicht ihren eigenen this hat. Eine traditionelle Funktion kann ihren eigenen this-Wert binden, je nachdem, wie sie definiert und aufgerufen wird. Dies erfordert oft viel Akrobatik wie self = this;, usw., um auf this von einer Funktion innerhalb einer anderen Funktion zuzugreifen oder es zu manipulieren. Für weitere Informationen zu diesem Thema siehe die Erklärung und Beispiele in der Mozilla-Dokumentation.

Beispielcode

Beispiel (auch aus der Dokumentation):

var a = [
  "Wir sind die ganze Nacht wach bis zur Sonne",
  "Wir sind die ganze Nacht wach, um etwas zu bekommen",
  "Wir sind die ganze Nacht wach für gute Unterhaltung",
  "Wir sind die ganze Nacht wach, um Glück zu haben"
];

// Diese beiden Zuweisungen sind äquivalent:

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

// ECMAscript 6 mit Pfeilfunktionen verwenden
var a3 = a.map( s => s.length );

// sowohl a2 als auch a3 werden gleich [31, 30, 31, 31] sein

---

Hinweise zur Kompatibilität

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

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

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

Nicht unterstützt in:

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

Sie finden weitere (und aktuellere) Informationen unter CanIUse.com (keine Affiliation).

Answer 2

Das wird als Arrow-Funktion bezeichnet, Teil des ECMAScript 2015 Specs...

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

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

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

Kürzere Syntax als zuvor:

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

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

DEMO

Das andere großartige Ding ist das lexikalische this... Normalerweise würden Sie etwas wie folgt tun:

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

Foo.prototype.startCounting = function() {
  var self = this;
  setInterval(function() {
    // this ist das Fenster, nicht Foo {}, wie man erwarten würde
    console.log(this); // [object Window]
    // deshalb weisen wir this vor setInterval() self erneut zu
    console.log(self.count);
    self.count++;
  }, 1000)
}

new Foo();

Aber das könnte mit der Arrow-Funktion 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 Informationen finden Sie hier eine ziemlich gute Antwort darauf, wann Pfeilfunktionen verwendet werden sollen.

Answer 3

Dies sind Pfeilfunktionen

Auch bekannt als Fat Arrow Functions. Sie sind eine saubere und prägnante Möglichkeit, Funktionsausdrücke zu schreiben, z.B. function() {}.

Pfeilfunktionen können die Notwendigkeit von function, return und {} beim Definieren von Funktionen entfernen. Sie sind Einzeiler, ähnlich den Lambda-Ausdrücken in Java oder Python.

Beispiel ohne Parameter

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

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

Wenn innerhalb derselben Pfeilfunktion mehrere Anweisungen gemacht werden müssen, müssen Sie in diesem Beispiel queue[0] in geschweifte Klammern {} einwickeln. In diesem Fall kann die return-Anweisung nicht ausgelassen 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 {} aus dem obigen entfernen.

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 jeder Frucht in einem einzelnen Array erhalten wollten, könnten wir dies in ES5 machen:

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

In ES6 mit den neuen Pfeilfunktionen können wir das kürzer machen:

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

Weitere Informationen zu Pfeilfunktionen finden Sie hier.

Answer 4

Dies wäre der "Pfeilfunktion-Ausdruck", der in ECMAScript 6 eingeführt wurde.

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

Zu historischen Zwecken (falls sich die Wiki-Seite später ändert), lautet es:

Ein Pfeilfunktion-Ausdruck hat eine kürzere Syntax im Vergleich zu Funktionsausdrücken und bindet lexikalisch den Wert dieses. Pfeilfunktionen sind immer anonym.

Answer 5

Nur um ein weiteres Beispiel dafür zu geben, was ein Lambda tun kann, ohne map zu verwenden:

a = 10
b = 2

var mixed = (a,b) => a * b; 
// ODER
var mixed = (a,b) => { (irgendeine Logik); return a * b };

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