Funzione del filtro dell'array JavaScript
In questo post, afferreremo il concetto di JavaScript filtro() funzione. Cos'è un filtro() funzione e come possiamo usarlo per aiutare a semplificare il codice JavaScript e completare le attività in modo efficiente e più rapido.
Quale è filtro funzione in javascript
Javascript's filtro() La funzione per l'array viene utilizzata per filtrare i dati in base alla condizione o al test fornito.
- IL filtro() La funzione prende l'elemento di un array uno per uno e applica la condizione su ciascun elemento.
- IL filtro() La funzione mantiene gli elementi che passano la condizione in un array diverso e restituiscono l'array risultante dopo aver iterato attraverso l'intero array.
- Questo filtro() La funzione dell'array non influisce sull'array originale.
Esploriamo di più per capire la sintassi e la sua funzionalità, insieme a un paio di esempi.
Sintassi della funzione del filtro in JavaScript
vettore.filtro (function_name, thisvalue);Array filtro() La funzione prende una funzione come funzione di callback con tre argomenti. La sintassi della funzione di callback e la sequenza di argomenti andranno così:
funzione function_name (valore, indice, array)condizione di ritorno;
Nella funzione richiamata di filtro() metodo:
- Il primo parametro è la corrente valore dell'elemento array durante l'iterazione.
- Il secondo parametro è il parametro opzionale che è la corrente indice dell'elemento array durante l'iterazione.
- Infine, possiamo anche superare il vettore stesso alla funzione di callback per avere alcune funzionalità personalizzate all'interno della funzione di callback.
Possiamo anche passare "questo valore" alla funzione, in cui la parola chiave "questa" si riferisce al blocco/oggetto genitore.
Ora useremo un paio di esempi per vedere le sue implementazioni nella vita reale.
Nota: Useremo la console del browser per dimostrare esempi eseguiti in questo post. Per aprire la console del browser:
- Usa il F12 Chiave in Chrome e in altri browser a base di cromo.
- Utilizzo Ctrl + shift + k tasti di scorciatoia da tastiera per mozilla.
- Utilizzo Opzione + ⌘ + C tasti di scelta rapida della tastiera in safari (se non viene visualizzato il menu degli sviluppatori, quindi apri le preferenze premendo ⌘ +, e in Avanzate Controllo della scheda "Mostra il menu Sviluppa nella barra dei menu").
Come utilizzare la funzione Filter () in JavaScript
Il miglior esempio per capire il filtro() La funzione è di filtrare alcuni numeri da un array di numeri in base alla condizione data.
Esempio 1:
Supponiamo di avere una serie di numeri e vogliamo ottenere numeri maggiori di un numero specifico:
Numeri var = [23,16,38,5,10,19]Il primo metodo per ottenere l'intervallo di numeri desiderato è quello di loop attraverso l'intero array e mettere una condizione all'interno del loop per verificare se il numero supera il test dato (maggiore di 18 o meno). Se il numero supera il test, verrà aggiunto/aggiunto a un nuovo array. Di seguito è riportato il codice del loop per filtro i numeri:
varfilteredArray = [];per (leti = 0; i18)
FilteredArray.push (numeri [i])
console.log (FilteredArray);
Nel codice sopra, abbiamo prima inserito un ciclo sull'array "numeri", quindi inseriamo una condizione utilizzando l'istruzione IF e se l'elemento array passa la condizione, verrà aggiunto/spinto alla variabile "FiltreDArray".
Anche se abbiamo ottenuto la gamma desiderata come output. Ma perché non utilizzare un modo intelligente e semplice per ottenere l'array filtrato utilizzando il filtro() Metodo dell'array, in cui non dobbiamo mutare le variabili come "FilteredArray."
Uso della funzione Filter ()
IL filtro() funzione per ottenere i numeri più grandi di 18 andranno così:
varfilteredArray = numeri.filtro (getAdults);funzioni di funzionamento (n)
restituire n> 18;
console.log (FilteredArray);
Nel codice di cui sopra, puoi vedere che abbiamo passato per la prima volta la funzione "getAdults" al filtro() funzione, e nella definizione della funzione "getAdults", abbiamo appena verificato se il numero è maggiore di 18 o meno e se questa condizione restituisce vero, restituire quell'elemento array.
Una volta che la funzione "Filtro" controlla tutti i numeri nell'array "numeri", memorizzerà il risultato finale nella variabile "FilteredArray".
Infine, abbiamo appena consolato la variabile "FilteredArray" per verificare se la nostra filtro() La funzione ha funzionato bene o no.
Puoi verificare guardando nello screenshot previsto da quello filtro() La funzione ha restituito tutti i numeri che sono superiori a 18.
Un altro modo più corto e più semplice per scrivere filtro() La funzione è rendere la funzione di callback di filtro() funzione una funzione freccia:
La sintassi di scrivere la funzione di callback all'interno del filtro() Le parentesi della funzione saranno così:
varfilteredArray = numeri.filtro ((n) =>restituire n> 18
);
console.log (FilteredArray);
Va bene, questo è stato il semplice esempio in cui abbiamo solo una serie di numeri; Che dire della matrice di oggetti. Proviamo anche quello.
Esempio 2:
Supponiamo di avere un elenco di studenti in un array e vogliamo ottenere l'elenco degli studenti le cui tasse sono superiori a $ 8000:
VAR Students = [ID: 1,
Nome: "John"
Età: 12,
Commissione: 8500
,
ID: 2,
Nome: "Bob",
Età: 15,
Commissione: 4500
,
ID: 3,
Nome: "Steve",
Età: 10,
Commissione: 7500
,
ID: 4,
Nome: "Harry",
Età: 13,
Commissione: 10500
,
ID: 5,
Nome: "Tom",
Età: 14,
Commissione: 9000
,
ID: 6,
Nome: "Ron",
Età: 11,
Commissione: 6000
,
"
IL filtro() funzione per ottenere l'elenco filtrato di studenti andrà così:
VarfilteredStudents = Students.filtro ((studente) =>Returnstudent.Commissione> 8000
);
console.registro (stivadenti filtrati);
Ora, l'unica differenza in questo codice è che un singolo oggetto viene passato come valore alla funzione di callback e all'interno della definizione della funzione di callback, mettiamo una condizione e restituiamo l'oggetto in cui la quota dello studente è maggiore di $ 8000.
Osservando lo screenshot sopra legato, puoi vedere che le commissioni degli studenti sono superiori a $ 8000 e vengono visualizzate come output. Quindi è così che possiamo accedere agli oggetti di un array in filtro() funzione.
Conclusione
In questo post, abbiamo imparato cosa filtro() La funzione è e come possiamo usarla per aiutare a semplificare il codice JavaScript.
Abbiamo imparato che il filtro() La funzione filtra gli elementi dell'array in base alla condizione data. IL filtro() La funzione prende l'elemento di un array uno per uno, prende una funzione di callback applicata ad ogni elemento dell'array e restituisce il nuovo array filtrato.
Questo post è tutto su JavaScript filtro() funzione e il suo utilizzo. Contiene alcuni esempi di base che aiutano a comprendere filtro() funzionare facilmente.