.filter()

Il metodo .filter() crea una copia superficiale di una porzione di un dato array, filtrata fino ai soli elementi dell'array dato che superano il test implementato dalla funzione fornita.

Sintassi

// Arrow function
filter((element) => { /* … */ })
filter((element, index) => { /* … */ })
filter((element, index, array) => { /* … */ })

// Callback function
filter(callbackFn)
filter(callbackFn, thisArg)

// Inline callback function
filter(function (element) { /* … */ })
filter(function (element, index) { /* … */ })
filter(function (element, index, array) { /* … */ })
filter(function (element, index, array) { /* … */ }, thisArg)

Parametri

callbackFn : Una funzione da eseguire per ogni elemento nell'array. Dovrebbe restituire un valore true per mantenere l'elemento nell'array. La funzione viene chiamata con i seguenti argomenti:

element : L'elemento corrente in fase di elaborazione nell'array.

index : L'indice dell'elemento corrente in fase di elaborazione nell'array.

array : è stato chiamato l'array filter().

thisArg - opzionale :  Un valore da utilizzare come this durante l'esecuzione di callbackFn 

Return

Una copia superficiale dell'array dato, filtrata fino ai soli elementi dell'array che superano il test implementato dalla funzione fonita. Se nessun elemento supera il test verrà restituito un array vuoto.

Descrizione

Il metodo .filter() è un metodo iterativo. Chiama una funzione callbackFn fornita una volta per ogni elemento in un array e costituisce un nuovo array per di tutti i valori per i quali callbackFn restituisce true. Gli elementi dell'array che non superano il test callbackFn non sono inclusi nel nuvo array.

callbackFn viene invocato solo per gli indici di array che hanno valori assegnati. Non viene richiamato per gli slot vuoti negli array sparsi.

Il metodo .filter() è un metodo di copia. Restituisce una copia superficale che contiene gli stessi elementi dell' array originale filtrati. Tuttavia, la funzione fornita come callbackFn può modificare l'array. Si noti, tuttavia che la lunghezza dell'array viene salvata prima della chiamata di callbackFn. Perciò:

  • callbackFn non visiterà alcun elemento aggiunto oltre la lunghezza iniziale dell0 array quando è iniziata la chiamata a filter().
  • Le modifiche agli indici già visitati non causano il richiamo di callbackFn su di essi.
  • Se un elemento dell'array esistente, non ancora visitato, viene modificato da callbackFn, il suo valore passato a callbackFn sarà il valore nel momento in cui l'elemento viene visitato.
  • Gli elementi eliminati non vengono visitati.

 

Esempi

Rimuovere i valori inferiori

Il seguente esempio usa il metodo .filter() per creare un array con solamente gli elementi maggiori o uguali a 10.

function isBigEnough(value) {
  return value >= 10;
}

const filtered = [12, 5, 8, 130, 44].filter(isBigEnough);

// return [12, 130, 44]

Filtrare numeri primi

In questo esempio vengono filtrati tutti i numeri primi presenti nell'array.

const array = [-3, -2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13 , 17 , 18, 21, 23];
function numeriPrimi(num) {
    for(let i =  2; num > i; i++ ) { 
        if(num % i === 0) {
            return false;
        }
    }
    return num > 1;
}

console.log(array.filter(numeriPrimi));

// return [2, 3, 5, 7, 11, 13, 17, 23] 

Filtrare da Json

In questo esempio verranno filtrati tutti gli elementi da un json aventi un ID numerico diverso da 0. Il metodo statico Number.isFinite() determina se il valore passato è un numero finito, ovvero controlla che un dato valore sia un numero e che il numero non sia né inifinito positivo, né infinito negativo, né NaN.

const json = [
  { id: 15 },
  { id: -1 },
  { id: 0 },
  { id: 3 },
  { id: 12.2 },
  {},
  { id: null },
  { id: NaN },
  { id: "undefined" },
];

function filterByID(item) {
  if (Number.isFinite(item.id) && item.id !== 0) {
    return true;
  }
  return false;
}

json.filter(filterByID); // return  [{ id: 15 }, { id: -1 }, { id: 3 }, { id: 12.2 }]

Ricerca in un array

In questo esempio venogno filtrati gli elementi di un array in base ad un criterio di ricerca.

const frutti = ["mela", "banana", "uva", "mango", "arancia", "pera"];

// Filtrare array tramite una query
function filterItems(array, query) {
  return frutti.filter((element) => element.toLowerCase().includes(query.toLowerCase()));
}

filterItems(frutti, "ra"); // return ["arancia", "pera"]
filterItems(frutti, "an"); // return ["banana", "mango", "arancia"]

Contenuti