Le funzioni freccia JavaScript possono renderti uno sviluppatore migliore
JavaScript ES6 ha apportato cambiamenti entusiasmanti al mondo dello sviluppo web. Nuove aggiunte al linguaggio JavaScript hanno portato nuove possibilità.
Una delle modifiche più popolari è stata l'aggiunta delle funzioni freccia in JavaScript. Le funzioni freccia sono un nuovo modo di scrivere espressioni di funzioni JavaScript, offrendo due diversi modi per creare funzioni nella tua app.
Le funzioni freccia richiedono un po 'di regolazione se sei un esperto delle funzioni JavaScript tradizionali. Diamo un'occhiata a cosa sono, come funzionano e come ti avvantaggiano.
Cosa sono le funzioni freccia JavaScript?
Le funzioni freccia sono un nuovo modo di scrivere espressioni di funzioni incluse nella versione di JavaScript ES6 . Sono simili alle espressioni della funzione JavaScript che hai utilizzato, con alcune regole leggermente diverse.
Le funzioni freccia sono sempre funzioni anonime, hanno regole diverse per this e hanno una sintassi più semplice rispetto alle funzioni tradizionali.
Queste funzioni utilizzano un nuovo token freccia:
=> Se hai mai lavorato in Python, queste funzioni sono molto simili alle espressioni Python Lambda .
La sintassi per queste funzioni è un po 'più pulita delle normali funzioni. Ci sono alcune nuove regole da tenere a mente:
- La parola chiave funzione è stata rimossa
- La parola chiave return è facoltativa
- Le parentesi graffe sono opzionali
Ci sono molte piccole modifiche da affrontare, quindi iniziamo con un confronto di base delle espressioni di funzioni.
Come utilizzare le funzioni freccia
Le funzioni delle frecce sono facili da usare. Comprendere le funzioni delle frecce è più semplice se confrontato fianco a fianco con le espressioni di funzioni tradizionali.
Ecco un'espressione di funzione che aggiunge due numeri; utilizzando prima il metodo di funzione tradizionale:
let addnum = function(num1,num2){ return num1 + num2; }; addnum(1,2); >>3 È una funzione piuttosto semplice che accetta due argomenti e restituisce la somma.
Ecco l'espressione cambiata in una funzione freccia:
let addnum = (num1,num2) => { return num1 + num2;}; addnum(1,2); >>3 La sintassi della funzione è abbastanza diversa usando una funzione freccia. La parola chiave funzione è stata rimossa; il token freccia indica a JavaScript che stai scrivendo una funzione.
Le parentesi graffe e la parola chiave return sono ancora lì. Questi sono opzionali con funzioni freccia. Ecco un esempio ancora più semplice della stessa funzione:
let addnum = (num1,num2) => num1 + num2; La parola chiave return e le parentesi graffe non sono più disponibili. Ciò che rimane è una funzione a una riga molto pulita che è quasi la metà del codice come la funzione originale. Ottieni lo stesso risultato con molto meno codice scritto.
C'è di più nelle funzioni freccia. immergiamoci più in profondità in modo da avere un'idea migliore di ciò che possono fare.
Caratteristiche della funzione freccia
Le funzioni freccia hanno molti usi e funzionalità diversi inclusi.
Funzioni regolari
Le funzioni freccia possono utilizzare uno o più argomenti. Se si utilizzano due o più argomenti, è necessario racchiuderli tra parentesi. Se hai solo un argomento, non è necessario utilizzare la parentesi.
let square = x => x * x square(2); >>4 Le funzioni freccia possono essere utilizzate senza argomenti. Se non stai usando alcun argomento nella tua funzione, devi usare una parentesi vuota.
let helloFunction = () => Console.log("Hello reader!"); helloFunction(); >>Hello reader! Funzioni semplici come queste usano molto meno codice. Immagina quanto diventa più semplice un progetto complesso come una presentazione JavaScript quando hai un modo più semplice di scrivere funzioni.
Usando questo
Il concetto di this tende ad essere la parte più difficile dell'utilizzo di JavaScript. Le funzioni freccia rendono this più facile da usare.
Quando si utilizzano le funzioni freccia, this verrà definito dalla funzione di chiusura. Questo può creare dei problemi che sorgono quando si creano le funzioni nidificate e hanno bisogno di this per applicare alla funzione principale
Ecco un esempio popolare che mostra la soluzione alternativa che devi usare con le normali funzioni.
function Person() { var that = this; //You have to assign 'this' to a new variable that.age = 0; setInterval(function growUp() { that.age++; }, 1000); } Assegnare il valore di this a una variabile lo rende leggibile quando si chiama una funzione all'interno della funzione principale. Questo è disordinato, ecco un modo migliore per farlo usando le funzioni freccia.
function Person(){ this.age = 0; setInterval(() => { this.age++; // Now you can use 'this' without a new variable declared }, 1000); } Sebbene siano utili per le funzioni, non dovrebbero essere utilizzate per creare metodi all'interno di un oggetto. Le funzioni freccia non usano l'ambito giusto per this .
Ecco un semplice oggetto che crea un metodo all'interno usando una funzione freccia. Il metodo dovrebbe ridurre la variabile toppings di uno quando viene chiamata. Invece, non funziona affatto.
let pizza = { toppings: 5, removeToppings: () => { this.toppings--; } } //A pizza object with 5 toppings >pizza >>{toppings: 5, removeToppings: f} pizza.removeToppings(); //The method will not do anything to the object >pizza >>{toppings: 5, removeToppings: f} //Still has 5 toppings Lavorare con le matrici
Utilizzando le funzioni freccia è possibile semplificare il codice utilizzato per lavorare con i metodi di matrice. Le matrici e i metodi di matrice sono parti molto importanti di JavaScript, quindi le utilizzerai molto.
Esistono alcuni metodi utili come il metodo map che esegue una funzione su tutti gli elementi di un array e restituisce il nuovo array.
let myArray = [1,2,3,4]; myArray.map(function(element){ return element + 1; }); >> [2,3,4,5] Questa è una funzione piuttosto semplice che aggiunge uno a ogni valore dell'array. È possibile scrivere la stessa funzione con meno codice utilizzando una funzione freccia.
let myArray = [1,2,3,4]; myArray.map(element => { return element + 1; }); >> [2,3,4,5] È molto più facile da leggere ora.
Creazione di oggetti letterali
Le fun
zioni freccia possono essere utilizzate per creare valori letterali di oggetti in JavaScript. Le funzioni regolari possono crearle, ma sono un po 'più lunghe.
let createObject = function createName(first,last) { return { first: first, last: last }; }; Puoi creare lo stesso oggetto con una funzione freccia usando meno codice. Usando la notazione a freccia dovrai racchiudere il corpo della funzione tra parentesi. Ecco la sintassi migliorata con le funzioni freccia.
let createArrowObject = (first,last) => ({first:first, last:last}); Funzioni della freccia di JavaScript e oltre
Ora conosci diversi modi in cui le funzioni delle frecce JavaScript ti semplificano la vita come sviluppatore. Riducono la sintassi, ti danno più controllo usando this , rendono gli oggetti più facili da creare e ti danno un nuovo modo di lavorare con i metodi di array.
L'introduzione delle funzioni freccia, insieme a molte altre funzionalità, in JavaScript ES6 mostra quanto sia diventato importante JavaScript nello sviluppo web. Tuttavia, puoi fare molto di più.
Vuoi saperne di più su JavaScript? Il nostro cheat sheet JavaScript fornisce informazioni preziose e ulteriori informazioni su come funziona JavaScript può renderti uno sviluppatore migliore.
Leggi l'articolo completo: Le funzioni freccia JavaScript possono renderti uno sviluppatore migliore
