Le funzioni freccia JavaScript possono renderti uno sviluppatore migliore

Annuncio pubblicitario

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 funzione che erano incluso nella versione di JavaScript ES6 Che cos'è ES6 e cosa devono sapere i programmatori JavascriptES6 fa riferimento alla versione 6 del linguaggio di programmazione ECMA Script (Javascript). Vediamo ora alcune importanti modifiche apportate da ES6 a JavaScript. Leggi di più

. 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 Questoe 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 a Espressioni Lambda Python Una guida per principianti alla comprensione delle funzioni di Python LambdaLe lambda in Python sono una delle funzionalità più utili, importanti e interessanti da conoscere. Ecco come usarli e perché sono utili. Leggi di più .

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 funzione.

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:

lascia 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 funzione originale. Ottieni lo stesso risultato con molto meno codice scritto.

C'è di più sulle funzioni freccia. tuffiamoci 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 stai utilizzando due o più argomenti, devi 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 (); >> Ciao lettore!

Funzioni semplici come queste usano molto meno codice. Immagina quanto sia più facile un complesso proiettare come una presentazione JavaScript Come creare uno SlideShow JavaScript in 3 semplici passaggiOggi ti mostrerò come creare una presentazione Javacript da zero - saltiamo subito dentro! Leggi di più diventa quando hai un modo più semplice di scrivere funzioni.

Usando questo

Il concetto di Questo tende ad essere la parte più difficile dell'uso di JavaScript. Le funzioni della freccia fanno Questo più facile da usare.

Quando si utilizzano le funzioni freccia Questo sarà definito dalla funzione allegata. Ciò può creare problemi che si presentano quando si creano funzioni e necessità nidificate Questo da applicare alla tua funzione principale

Ecco un esempio popolare che mostra la soluzione alternativa che devi utilizzare con le normali funzioni.

funzione Person () {var that = this; // Devi assegnare 'this' a una nuova variabile that.age = 0; setInterval (function growUp () {that.age ++; }, 1000); }

Assegnare il valore di Questo a una variabile lo rende leggibile quando chiami una funzione all'interno della tua funzione principale. Questo è disordinato, ecco un modo migliore per farlo usando le funzioni freccia.

function Person () {this.age = 0; setInterval (() => {this.age ++; // Ora puoi usare 'this' senza una nuova variabile dichiarata}, 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 Questo.

Ecco un semplice oggetto che crea un metodo all'interno usando una funzione freccia. Il metodo dovrebbe ridurre il condimenti variabile da uno quando viene chiamato. Invece, non funziona affatto.

lascia che la pizza = { toppings: 5, removeToppings: () => {this.toppings--; } } // Un oggetto pizza con 5 condimenti. > Pizza. >> {toppings: 5, removeToppings: f} pizza.removeToppings (); // Il metodo non farà nulla all'oggetto> pizza. >> {toppings: 5, removeToppings: f} // Ha ancora 5 condimenti.

Lavorare con le matrici

Utilizzando le funzioni freccia è possibile semplificare il codice utilizzato per lavorare con i metodi di matrice. Matrici e i metodi array sono parti molto importanti di JavaScript 5 metodi di array JavaScript che dovresti padroneggiare oggiVuoi capire le matrici JavaScript ma non riesci ad afferrarle? Consulta i nostri esempi di array JavaScript per indicazioni. Leggi di più quindi li userai molto.

Ci sono alcuni metodi utili come il carta geografica metodo 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) { elemento di ritorno + 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 => { elemento di ritorno + 1; }); >> [2,3,4,5]

È molto più facile da leggere ora.

Creazione di oggetti letterali

Le funzioni 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. Accorciano la sintassi, ti danno più controllo usando Questo, semplifica la creazione di oggetti e ti offre 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 JavaScript sia diventato importante nello sviluppo web. Tuttavia, puoi fare molto di più.

Vuoi saperne di più su JavaScript? Nostro Cheat sheet JavaScript L'ultimo cheat sheet JavaScriptOttieni un rapido aggiornamento degli elementi JavaScript con questo cheat sheet. Leggi di più fornisce informazioni preziose e ulteriori informazioni su come funziona JavaScript Che cos'è JavaScript e come funziona?Se stai imparando lo sviluppo web, ecco cosa devi sapere su JavaScript e su come funziona con HTML e CSS. Leggi di più può renderti uno sviluppatore migliore.