Controlla se l'array contiene un valore in JavaScript

1. Utilizzo della funzione .indexOf() per verificare se l’array contiene un valore in JavaScript
2. Utilizzo della funzione .includes() per verificare se l’array contiene un valore in JavaScript
3. Utilizzo della funzione .find() per trovare l’elemento in un array in JavaScript
4. Utilizzo della funzione .filter() per cercare elementi in un array in JavaScript
5. Utilizzo del semplice cicli for per cercare un elemento
6. Nota

Spesso ci troviamo nella situazione di verificare se l’array contiene valore in JavaScript. Anche se la funzionalità di ricerca può essere codificata con sintassi JavaScript di base utilizzando i loop, è bene conoscere le funzionalità integrate disponibili per la ricerca di array in JavaScript, il loro utilizzo, i tipi restituiti e il comportamento. Rende il nostro compito molto più semplice, poiché abbiamo bisogno di meno codice. La funzionalità sarà efficiente e meno soggetta a bug con funzioni integrate. Diamo un’occhiata ai modi per cercare un elemento in un array.

Utilizzo della funzione .indexOf() per verificare se l’array contiene un valore in JavaScript

La funzione .indexOf() è una funzione comunemente usata in javascript. Funziona bene durante la ricerca di un elemento in un array o anche in una stringa.

Sintassi

indexOf(element, index)

Parametro

Prende l’elemento, da cercare, come parametro. E un parametro opzionale che dice alla funzione, l’indice da cui deve iniziare la ricerca (a partire da 0). Se forniamo un valore negativo, significherà cercare a partire dalla fine dell’array nella posizione specificata.

Valore di ritorno

La funzione restituisce l’indice dell’elemento di ricerca a partire da 0 nell’array se riesce a trovare l’elemento. Altrimenti, restituirà -1, indicando che non è riuscito a trovare l’elemento. Se ci sono più corrispondenze in un array, la funzione .indexOf() restituirà l’indice della prima corrispondenza.

Supporto browser Browser

La funzione .indexOf() è supportata per tutte le principali versioni del browser.

Utilizzo

L’utilizzo della funzione indexOf() su un array è il seguente.

let fruits = ['Apple', 'Mango', 'Pear', 'Peach'];
console.log(fruits.indexOf('Pear'));
console.log(fruits.indexOf('Tomato'))

Produzione:

2
-1

Per la funzione di ricerca, controlliamo se il tipo restituito di .indexOf(searchText) è maggiore di -1. In tal caso, il risultato della ricerca dovrebbe essere true altrimenti false. Diamo un’occhiata allo stesso esempio discusso sopra per verificare se un elemento esiste nell’array.

function isFruit(fruitName) {
  let fruits = ['Apple', 'Mango', 'Pear', 'Peach'];
  if (fruits.indexOf(fruitName) > -1) {
    return true;
  } else {
    return false;
  }
}
isFruit('Pear');
isFruit('Cat');

Produzione:

true
false

Utilizzo della funzione .includes() per verificare se l’array contiene un valore in JavaScript

La funzione includes() di JavaScript verifica se un dato elemento è presente in un array. Restituisce un valore booleano. Quindi, è più adatto nei controlli delle condizioni if.

Sintassi

includes(keyword)
includes(keyword, index)

Parametro

La funzione accetta due parametri. Di solito, usiamo questa funzione nella forma .includes(searchString). Il parametro searchString è l’elemento che vogliamo cercare, e il parametro index si riferisce all’indice dell’array a partire dal quale cercare. Il parametro indice è facoltativo.

Valore di ritorno

.includes() restituisce true se searchString viene trovato come elemento dell’array. Se non viene trovata, la funzione restituisce false.

Supporto browser Browser

La funzione .includes() funziona in quasi tutti i browser Web tranne Internet Explorer. Quindi, se il tuo progetto è supportato su IE, potresti dover utilizzare la funzione indexOf().

Utilizzo

Diamo un’occhiata all’applicazione di includes() in un array.

let fruits = ['Apple', 'Mango', 'Pear', 'Peach'];
console.log(fruits.includes('Pear'));
console.log(fruits.includes('Tomato'))

Produzione:

true
false

La funzione includes() può essere utilizzata direttamente nelle condizioni if poiché restituisce un valore booleano come output. L’esempio precedente può essere utilizzato nel condizionale if come segue. Tieni presente che questo codice potrebbe non funzionare in IE poiché .includes() non è supportato in esso.

function isFruit(fruitName) {
  let fruits = ['Apple', 'Mango', 'Pear', 'Peach'];
  if (fruits.includes(fruitName)) {
    return true;
  } else {
    return false;
  }
}
isFruit('Pear');
isFruit('Cat');

Produzione:

true
false

Utilizzo della funzione .find() per trovare l’elemento in un array in JavaScript

Un altro modo per verificare se un elemento è presente in un array è utilizzare la funzione .find(). Rispetto alle funzioni .indexOf() e .includes(), .find() prende una funzione come parametro e la esegue su ogni elemento dell’array. Restituirà il primo valore che è soddisfatto dalla condizione come menzionato nella funzione parametro.

Sintassi

.find((keyword) => {/* Some condition checks */})
    .find((keyword, index) => {/* Some condition checks */})

Parametro

La funzione Array.find() accetta una funzione come parametro di input. Di solito, usiamo le funzioni freccia come parametri. E queste funzioni freccia possono contenere controlli di condizione come item => item > 21. Un altro parametro opzionale è l’indice che rappresenta l’indice di iterazione corrente. Il .find() esegue la funzione freccia su ogni elemento dell’array. Quindi, fornisce l’iteratore come argomento alla funzione freccia per aiutare con ulteriori controlli condizionali.

Valore di ritorno

.find() è leggermente diverso dalle funzioni indexOf(), includes() di javascript. Restituisce il valore dell’elemento se trovato, altrimenti la funzione restituisce undefined.

Supporto browser Browser

Come la funzione .includes(), .find() funziona in quasi tutti i browser Web tranne Internet Explorer. Quindi, dovremmo essere sicuri che il nostro progetto non sia supportato per IE prima di pianificare l’uso di tali funzioni per le operazioni di array.

Utilizzo

Fare riferimento al seguente utilizzo in un array.

let age = [21, 43, 23, 1, 34, 12, 8];
console.log(age.find(i => i > 20));
console.log(age.find(i => i > 21))

Produzione:

21
43

Potremmo essere un po’ sorpresi dall’output di age.find(i => i > 21), poiché restituisce 43 invece di 23 che era il numero immediatamente superiore a 21 nell’age Vettore. Nota che la funzione .find() restituisce l’elemento successivo che soddisfa la condizione menzionata nella funzione array in ordine cronologico. Per cercare un elemento con un blocco if, possiamo usare il seguente codice.

function findPeerAge(myAge) {
  let age = [21, 43, 23, 1, 34, 12, 8];
  if (age.find(i => (i === myAge))) {
    return true;
  } else {
    return false;
  }
}
findPeerAge(23);
findPeerAge(40);

true
false

Utilizzo della funzione .filter() per cercare elementi in un array in JavaScript

La funzione .filter() viene utilizzata principalmente nelle operazioni di elaborazione di array. Soprattutto quando si tratta di filtrare elementi, soddisfare un criterio, da un array. Restituisce un array di elementi che soddisfano i criteri definiti nella funzione passata come argomento.

Sintassi

Segue la stessa sintassi di Array.find().

.filter((keyword) => {/* Some condition checks */})
    .filter((keyword, index) => {/* Some condition checks */})

Parametro

La funzione Array.filter() accetta una funzione in linea o una funzione freccia come parametro. La funzione freccia manterrà i criteri di filtro. La funzione .filter() esegue la funzione freccia su ciascun elemento dell’array e restituisce gli elementi che soddisfano le condizioni menzionate nella funzione freccia. La funzione freccia avrà la keyword come input e l’iterazione corrente come index.

Valore di ritorno

A differenza delle funzioni di ricerca array che abbiamo visto finora, il .filter() restituisce un array contenente gli elementi che soddisfano le condizioni menzionate nella funzione freccia. Se viene trovato un elemento, l’array restituito conterrà gli elementi richiesti, altrimenti la funzione restituirà un array vuoto.

Supporto browser Browser

La funzione .filter() è supportata da tutti i browser compreso Internet Explorer. Quindi puoi usare la funzione .filter() senza preoccuparti del supporto del browser previsto.

Utilizzo: l’utilizzo di questa funzione è il seguente

let age = [21, 43, 23, 1, 34, 12, 8];
console.log(age.filter(i => i > 20));
console.log(age.filter(i => i > 21));

Produzione:

[21, 43, 23, 34]
[43, 23, 34]

Come vediamo dal risultato, la funzione filter() restituisce un array. Se dobbiamo cercare un elemento in un array, possiamo usare la funzione filter() come illustrato nel seguente esempio di codice. Usiamo l’attributo .length dell’array restituito dalla funzione filter() per determinare se può trovare l’elemento o meno. Se la funzione restituisce un array vuoto, significa che non è riuscita a trovare la parola chiave di ricerca.

function findAge(myAge) {
  let age = [21, 43, 23, 1, 34, 12, 8];
  if (age.filter(i => (i === myAge)).length) {
    return true;
  } else {
    return false;
  }
}
findAge(23);
findAge(40);

Produzione:

true
false

Utilizzo del semplice cicli for per cercare un elemento

Possiamo trovare un elemento in un array con i metodi di base di javascript, la condizione if e il cicli for. Il codice seguente restituirà true se l’elemento viene trovato, altrimenti restituirà false. Se sono presenti più occorrenze dello stesso elemento, la funzione restituisce solo la prima corrispondenza.

function findAge(myAge, ageAry) {
  let elementFound = false;
  for (let i = 0; i < ageAry.length; i++) {
    if (ageAry[i] === myAge) {
      return true;
    }
  }
  return elementFound;
}
let srcArray = [21, 43, 23, 1, 34, 12, 8];
findAge(23, srcArray);
findAge(40, srcArray);
findAge(8, srcArray);
findAge(23, srcArray);

Produzione:

true
false
true
true

Nota

• Le funzioni .indexOf(), .includes() cercano una corrispondenza esatta dell’elemento. Non possiamo usarlo per la ricerca di stringhe parziali. Significa fornire parte di un elemento poiché il parametro di ricerca non funzionerà.
• Possiamo implementare la ricerca di elementi parziali con le funzioni Array.filter() e Array.find() in quanto ci consentono di definire in modo personalizzato i criteri di ricerca.