Comprensione delle funzioni di ordine superiore in JavaScript

JavaScript è un potente linguaggio supportato dalla maggior parte dei browser moderni ed è un'ottima scelta per i principianti.

Proprio come molti altri linguaggi di programmazione moderni, JavaScript supporta funzioni che consentono di isolare un blocco di codice e riutilizzarlo da qualche altra parte. Puoi anche utilizzare le funzioni di assegnazione alle variabili e passarle come parametri, come altri valori.

Cosa sono le funzioni di ordine superiore?

La definizione più semplice per una funzione di ordine superiore è una funzione che esegue operazioni su altre funzioni accettandole come parametri o restituendole. Le funzioni di ordine superiore sono ampiamente utilizzate in paradigma di programmazione funzionale. Se sei appena iniziato con JavaScript, le funzioni di ordine superiore potrebbero essere un po' difficili da comprendere.

Considera il seguente esempio:

funzionetrasformare(fn) {
permettere risultatoArray = [];
ritornofunzione (vettore) {
per (permettere io = 0; i < matrice.lunghezza; i++) {
 risultatoArray.push (fn (array[i]))
 }
ritorno resultArray
 }
}

Nel blocco di codice sopra, il trasformare funzione è una funzione di ordine superiore che prende in fn funzione come parametro e restituisce una funzione anonima che accetta vettore come parametro.

Lo scopo del trasformare funzione è modificare gli elementi nell'array. Innanzitutto, il codice definisce una variabile resultArray e lo lega a un array vuoto.

IL trasformare function restituisce una funzione anonima che esegue il ciclo di ogni elemento in vettore, quindi passa l'elemento a fn funzione per il calcolo e inserisce il risultato in resultArray. Dopo il completamento del ciclo, la funzione anonima restituisce il file resultArray.

cost funzione1 = trasforma((X) => X * 2)
consolare.log (funzione1([ 2, 3, 4, 5, 6 ])) /* [ 4, 6, 8, 10, 12] */

Il blocco di codice precedente assegna la funzione anonima restituita da trasformare funzione alla variabile costante funzione1. fn restituisce il prodotto di X che è un sostituto di matrice[i].

Il codice passa anche un array, come parametro a funzione1 e quindi registra il risultato nella console. Un modo più breve di scrivere questo sarebbe:

consolare.log (trasforma((X) => X * 2)([ 2, 3, 4, 5, 6 ]))

JavaScript ha una funzione di ordine superiore incorporata che sostanzialmente fa la stessa cosa di trasformare, di cui parleremo più avanti.

Si spera che tu stia iniziando a capire come funzionano le funzioni di ordine superiore in JavaScript. Dai un'occhiata alla seguente funzione e vedi se riesci a indovinare cosa fa.

funzionefilterAndTransform(fn, arrayToBeFiltered, condizione) {
permettere filteredArray = [];
per (permettere io = 0; i < arrayToBeFiltered.length; i++) {
Se (condizione (arrayToBeFiltered[i])) {
permettere y = trasforma (fn)([ matriceDaFiltrare[i] ])[0]
 filteredArray.push (y)
 } altro {
 filteredArray.push (arrayToBeFiltered[i])
 }
 }
ritorno filteredArray
}

Questo blocco di codice definisce una funzione che fa ciò che potresti sospettare: verifica gli elementi nell'array che soddisfano una determinata condizione e li trasforma con il trasformare() funzione. Per utilizzare questa funzione, fai qualcosa del genere:

filtroETrasforma((X) => X * 2, [ 1, 2, 3, 4, 5 ], (x) => x % 20)

non mi piace il trasformare funzione, Il filterAndTransform function accetta due funzioni come parametri: fn E condizione. IL condizione La funzione controlla se il parametro è passato, è un numero pari e restituisce true. In caso contrario, restituisce false.

Se condizione si risolve in true (la condizione è soddisfatta), solo allora è the trasformare funzione chiamata. Questa logica potrebbe tornare utile se stai lavorando con un array e vuoi trasformare alcuni elementi. Se esegui questo codice nella console del browser, dovresti ottenere la seguente risposta:

[ 1, 4, 3, 8, 5 ]

Puoi vedere che la funzione trasforma solo gli elementi che soddisfano una determinata condizione, lasciando così come sono gli elementi che non soddisfano la condizione.

La funzione di ordine superiore Array.map() in JavaScript

Metodi di array come map() sono funzioni di ordine superiore che semplificano la manipolazione degli array. Ecco come funziona.

permettere matrice = [ 1, 2, 3, 4, 5 ];
permettere transformArray = array.map((X) => X * 2);

Quando accedi transformArray nella console del browser, dovresti ottenere lo stesso risultato ottenuto con il file trasformare funzione citata in precedenza:

[ 2, 4, 6, 8, 10 ]

matrice.mappa() accetta due parametri, il primo parametro si riferisce all'elemento stesso, mentre il secondo parametro si riferisce all'indice dell'elemento (posizione nell'array). Con giusto matrice.mappa() è possibile ottenere gli stessi risultati del filterAndTransform funzione. Ecco come lo fai:

permettere matrice = [ 1, 2, 3, 4, 5 ];
permettere transformArray = array.map((X) => X % 20? X * 2: X);

Nel blocco di codice sopra, la funzione restituisce il prodotto dell'elemento corrente e 2, se l'elemento è pari. In caso contrario, restituisce l'elemento intatto.

Con il built-in carta geografica funzione, sei riuscito a eliminare la necessità di diverse righe di codice, ottenendo così un codice molto più pulito e meno possibilità che si verifichino bug.

La funzione Array.filter() in JavaScript

Quando invochi il filtro metodo su un array, assicurati che il valore di ritorno della funzione che passi al metodo sia vero o falso. IL filtro Il metodo restituisce un array contenente elementi che soddisfano la condizione passata. Ecco come lo usi.

funzionecheckFirstLetter(parola) {
permettere vocali = "aiou"
Se (vocali.include(parola[0].toLowerCase())) {
ritorno parola;
 } altro {
ritorno;
 }
}
permettere parole = [ "Ciao", "da", "IL", "bambini", "Di", "pianeta", "Terra" ];
permettere risultato = parole.filtro((X) => checkPrimaLettera (x))

Il blocco di codice sopra attraversa il file parole array e filtra qualsiasi parola la cui prima lettera sia una vocale. Quando si esegue il codice e si registra il file risultato variabile, dovresti ottenere i seguenti risultati:

[ 'Di', 'Terra' ];

La funzione Array.reduce() in JavaScript

IL ridurre() la funzione di ordine superiore accetta due parametri. Il primo parametro è la funzione di riduzione. Questa funzione di riduzione è responsabile della combinazione di due valori e della restituzione di quel valore. Il secondo parametro è facoltativo.

Definisce il valore iniziale da passare alla funzione. Se vuoi restituire una somma di tutti gli elementi in un array, puoi fare quanto segue:

permettere un = [ 1, 2, 3, 4, 5];
permettere somma = 0;
per (permettere io = 0; i < a.lunghezza; i++) {
 somma = somma + a[i];
}
consolare.log (somma);

Se esegui il codice, somma dovrebbe essere 15. Puoi anche adottare un approccio diverso con il ridurre funzione.

permettere un = [ 1, 2, 3, 4, 5 ];
somma = a.reduce((c, n) => c+n);
consolare.log (somma);

Il blocco di codice sopra è molto più pulito rispetto all'esempio precedente. In questo esempio, la funzione di riduzione accetta due parametri: C E N. C si riferisce all'elemento corrente while N si riferisce all'elemento successivo nell'array.

Quando il codice viene eseguito, la funzione reducer passa attraverso l'array, assicurandosi di aggiungere il valore corrente al risultato del passaggio precedente.

Il potere delle funzioni di ordine superiore

Le funzioni in JavaScript sono potenti, ma le funzioni di ordine superiore portano le cose al livello successivo. Sono ampiamente utilizzati nella programmazione funzionale, consentendo di filtrare, ridurre e mappare gli array con facilità.

Le funzioni di ordine superiore possono aiutarti a scrivere codice più modulare e riutilizzabile durante la creazione di applicazioni.