Qual è il significato di “=>” (una freccia formata da uguale e maggiore di) in JavaScript?

So che l’operatore >= significa più o uguale a, ma ho visto => in qualche codice sorgente. Qual è il significato di quell’operatore?

Ecco il codice:

 promiseTargetFile(fpParams, aSkipPrompt, relatedURI).then(aDialogAccepted => { if (!aDialogAccepted) return; saveAsType = fpParams.saveAsType; file = fpParams.file; continueSave(); }).then(null, Components.utils.reportError); } 

Cos’è

Questa è una funzione di freccia. Le funzioni di freccia sono una syntax breve, introdotta da ECMAscript 6, che può essere utilizzata in modo simile al modo in cui usereste le espressioni di funzione. In altre parole, puoi spesso usarli al posto di espressioni come function (foo) {...} . Ma hanno alcune differenze importanti. Ad esempio, non vincolano i loro valori (vedi sotto per la discussione).

Le funzioni freccia fanno parte della specifica ECMAscript 6, ma non fanno parte del “normale” JavaScript attualmente in uso nella maggior parte dei browser. Sono, tuttavia, parzialmente supportati in Node v. 4.0+ e in molti browser (vedi sotto).

Puoi leggere di più nella documentazione di Mozilla sulle funzioni delle frecce .

Dalla documentazione di Mozilla:

Un’espressione di funzione di freccia (nota anche come funzione di freccia grossa) ha una syntax più breve rispetto alle espressioni di funzione e associa lessicalmente this valore (non associa il proprio arguments , arguments , super o new.target ). Le funzioni delle frecce sono sempre anonime. Queste espressioni di funzione sono più adatte per le funzioni non di metodo e non possono essere utilizzate come costruttori.

Una nota su come funziona nelle funzioni di freccia

Una delle funzioni più utili di una funzione freccia è nascosta nel testo sopra:

Una funzione di freccia … associa lessicalmente this valore (non vincola proprio this …)

Ciò che significa in termini più semplici è che la funzione freccia trattiene this valore dal suo contesto e non ha il suo valore. Una funzione tradizionale si lega proprio this valore, richiedendo molta ginnastica come self = this; , ecc., per accedere o manipolarlo da una funzione all’interno di un’altra funzione. Per maggiori informazioni su questo argomento, vedere la spiegazione e gli esempi nella documentazione di Mozilla .

Codice di esempio

Esempio (anche dai documenti):

 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] 

Note sulla compatibilità

È ansible utilizzare le funzioni freccia nel nodo, ma il supporto del browser è discutibile.

Il supporto del browser per questa funzionalità è migliorato parecchio, ma non è ancora sufficientemente diffuso per la maggior parte degli usi basati su browser. A partire dal 12 dicembre 2017, è supportato nelle versioni correnti di:

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

Non supportato in:

  • IE (attraverso v. 11)
  • Opera Mini (tramite v. 8.0)
  • Blackberry Browser (tramite v. 10)
  • IE Mobile (tramite v. 11)
  • UC Browser per Android (tramite v. 11.4)
  • QQ (tramite v. 1.2)

Puoi trovare ulteriori (e più attuali) informazioni su CanIUse.com (nessuna affiliazione).

È nota come funzione Arrow, parte della specifica ECMAScript 2015 …

 var foo = ['a', 'ab', 'abc']; var bar = foo.map(f => f.length); console.log(bar); // 1,2,3 

Sintassi più breve del precedente:

 // < ES6: var foo = ['a', 'ab', 'abc']; var bar = foo.map(function (f) { return f.length; }); console.log(bar); // 1,2,3 

DEMO

L'altra cosa fantastica è lessicale this ... Di solito, dovresti fare qualcosa del tipo:

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

Ma potrebbe essere riscritto con la freccia in questo modo:

 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
Altro su Sintassi

Per ulteriori informazioni, ecco una buona risposta per quando utilizzare le funzioni freccia.

Questa sarebbe la “espressione della funzione freccia” introdotta in ECMAScript 6.

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

Per scopi storici (se la pagina wiki cambia in seguito), è:

Un’espressione di funzione di freccia ha una syntax più breve rispetto alle espressioni di funzione e associa lessicalmente questo valore. Le funzioni delle frecce sono sempre anonime.

solo per aggiungere un altro esempio di cosa può fare una lambda senza usare la mappa:

 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 

Queste sono funzioni a freccia

Conosciuto anche come funzioni Fat Arrow . Sono un modo pulito e conscio per scrivere espressioni di funzione, ad esempio function() {} .

Le funzioni freccia possono rimuovere la necessità di function , return e {} quando si definiscono le funzioni. Sono one-liner, simili a Lambda Expressions in Java o Python.

Esempio senza parametri

 var queue = ['Dave', 'Sarah', 'Sharon'], nextCustomer = () => queue[0]; console.log(nextCustomer()); // 'Dave' 

Come altri hanno già detto, è una nuova syntax per creare funzioni.

Tuttavia, questo tipo di funzioni differiscono da quelle normali:

  • Legano this valore. Come spiegato dalle specifiche ,

    Una ArrowFunction non definisce binding locali per arguments , super , this o new.target . Qualsiasi riferimento agli arguments , super , this o new.target all’interno di ArrowFunction deve risolversi in un binding in un ambiente che racchiude lessicamente. In genere questo sarà l’Ambiente delle funzioni di una funzione che racchiude immediatamente.

    Anche se una ArrowFunction può contenere riferimenti a super , l’object funzione creato nel passaggio 4 non viene trasformato in un metodo eseguendo MakeMethod . Una ArrowFunction che fa riferimento a super è sempre contenuta in una funzione non Arrow e lo stato necessario per implementare super è accessibile tramite l’ ambito catturato dall’object function di ArrowFunction .

  • Sono non costruttori.

    Ciò significa che non hanno un metodo interno [[Costruisci]] e quindi non possono essere istanziati, ad es

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

Ho letto, questo è un simbolo di Arrow Functions in ES6

Questo

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

usando la Arrow Function puoi scrivere come

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

Documenti MDN

Aggiunta di un semplice esempio CRUD con 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)); 

Come hanno già detto tutte le altre risposte, fa parte della syntax della funzione freccia ES2015. Più specificamente, non è un operatore, è un token puntatore che separa i parametri dal corpo: ArrowFunction : ArrowParameters => ConciseBody . Es. (params) => { /* body */ } .

Funzioni freccia ES6 :

In javascript il => è il simbolo di un’espressione di una funzione di freccia. Un’espressione di una funzione di freccia non ha il suo legame e pertanto non può essere utilizzata come funzione di costruzione. per esempio:

 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