Was bedeutet "=>" (ein Pfeil aus equals & größer als) in JavaScript?


Answers

Das ist bekannt als Arrow Function, 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 ... Normalerweise würde man etwas tun 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 so 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 zu Syntax

Für mehr, here's eine ziemlich gute Antwort für die Verwendung von Pfeilfunktionen.

Question

Ich weiß, dass der Operator >= mehr oder gleich ist, aber ich habe => in irgendeinem 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);
  }



Wie andere gesagt haben, ist es eine neue Syntax, um Funktionen zu erstellen.

Diese Art von Funktionen unterscheidet sich jedoch von normalen:

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

    Eine ArrowFunction definiert keine lokalen Bindungen für arguments , super , this oder new.target . Jeder Verweis auf arguments , super , this oder new.target innerhalb einer ArrowFunction muss in einer lexikalisch umschließenden Umgebung zu einer Bindung aufgelöst werden. In der Regel wird dies die Funktionsumgebung einer sofort umschließenden Funktion sein.

    Obwohl eine ArrowFunction Verweise auf super enthalten kann, wird das in Schritt 4 erstellte Funktionsobjekt durch Ausführen von MakeMethod nicht zu einer Methode MakeMethod . Eine ArrowFunction , die auf super verweist , ist immer in einer Nicht- ArrowFunktion enthalten und der erforderliche Status zum Implementieren von super ist über den Bereich verfügbar, der vom Funktionsobjekt der ArrowFunction erfasst wird .

  • Sie sind Nicht-Konstrukteure.

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

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



Einfaches CRUD Beispiel mit Pfeilfunktion hinzufügen

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



nur um ein weiteres Beispiel hinzuzufügen, was ein Lambda ohne Map 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



Links