Concetti chiave sui funzioni arrow di JavaScript ES6 (riassunto)

Introduzione

Lo standard ES6 ha introdotto una nuova funzione: Arrow Function (funzione a frecce).

Perché si chiama Arrow Function? Perché il suo definizione utilizza un'arco:

x => x * x

La funzione lambda sopra è equivalente a:

function (x) {
return x * x;
}

Ma la funzione lambda ha portato alcuni problemi, vediamoli insieme di seguito.

Riguardo a {}

Il primo problema riguarda la funzione lambda con {}.

La funzione lambda, a prima vista, sembra avere un uso molto semplice, come nel caso seguente, usata per moltiplicare ogni elemento dell'array per 2:

const numbers = [1, 2, 3];
 const result = numbers.map(n => n * 2);
 // produce [2,4,6]

Ma se utilizzati in modo improprio, possono causare problemi inaspettati. Ad esempio, cercare di generare un oggetto letterale per ogni elemento dell'array, anche un'operazione map sembrerebbe semplice, ha comunque causato un'imprevista sorpresa.

const numbers = [1, 2, 3];
 const result = numbers.map(n => { value: n });
 // produce [undefined], [undefined], [undefined]

Cos'ha causato questo?

Un'analisi minima mostra che il problema risiede nel fatto che il codice racchiuso tra parentesi graffe in una funzione lambda, è considerato un blocco di codice indipendente piuttosto che un oggetto letterale, quindi eseguito singolarmente, il risultato ottenuto è ovviamente un array completamente pieno di undefined.
Quindi, in questo caso, il codice deve avere una dichiarazione di ritorno chiara o essere incluso tra parentesi graffe () come oggetto letterale.

const result = numbers.map(n => ({ value: n }));
 // [{value: 1}, {value:2}, {value:3}]

Riguardo a this

Il secondo problema riguarda le funzioni arrow e this.

Con le funzioni arrow, puoi scrivere il codice come segue senza dover memorizzare this in uno scope locale:

const adder = {
  sum: 0,
  add(numbers) {
   numbers.forEach(n => {
    this.sum += n;
   });
  }
 };
 adder.add([1, 2, 3]);
 // adder.sum === 6

Ma spesso potresti pensare di scrivere male senza accorgertene. Come mostrato dal codice qui sotto, this non punta all'oggetto 'adder', ma allo scope in cui si trova l'oggetto 'adder':

const adder = {
  sum: 0,
  add: (numbers) => { // qui lo scope è importante
   numbers.forEach(n => {
    this.sum += n;
   });
  }
 };
 adder.add([1, 2, 3]);
 // adder.sum === 0

Ultimamente, ricorda un punto: il this nelle funzioni arrow eredita il valore dello scope esterno, quindi non possiamo cambiare la sua direzione.

Sommario

Questo è tutto il contenuto dell'articolo, spero che il contenuto di questo articolo possa aiutare tutti a imparare o lavorare in qualche modo, se hai domande puoi lasciare un messaggio per discuterlo.

Dichiarazione: il contenuto di questo articolo è stato prelevato da Internet, il copyright è della proprietà del rispettivo autore, il contenuto è stato contribuito e caricato dagli utenti di Internet, questo sito non detiene il diritto di proprietà, non è stato elaborato manualmente e non assume responsabilità legali correlate. Se trovi contenuti sospetti di violazione del copyright, invia un'e-mail a notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare e fornire prove pertinenti. Una volta verificata, questo sito eliminerà immediatamente il contenuto sospetto di violazione del copyright.