Guida completa ai metodi di ricerca negli array in JavaScript e jQuery

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Introduzione

JavaScript è uno dei linguaggi di programmazione più utilizzati nello sviluppo web. In particolare, le sue funzionalità di manipolazione degli array svolgono un ruolo cruciale nella gestione dei dati e nell’interazione con l’utente.
In questo articolo spieghiamo in dettaglio come cercare valori all’interno degli array in JavaScript. Dai metodi di ricerca di base a tecniche più avanzate, questa guida fornisce informazioni utili sia per i principianti sia per gli sviluppatori di livello intermedio.

Scopo di questo articolo

Leggendo questo articolo, imparerai i seguenti punti:

• Comprendere le differenze tra i principali metodi JavaScript utilizzati per la ricerca negli array.
• Apprendere l’uso specifico di ciascun metodo attraverso esempi di codice.
• Selezionare i metodi appropriati a seconda dello scenario.

Pubblico di riferimento

Questo articolo è destinato a:

• Principianti che hanno appena iniziato a usare JavaScript.
• Utenti di livello intermedio che desiderano approfondire la comprensione della ricerca negli array e dell’elaborazione dei dati.
• Sviluppatori web alla ricerca di esempi di codice pratici.

Conoscenze e competenze che acquisirai

• Le basi e le applicazioni dei metodi di ricerca negli array di JavaScript (indexOf(), includes(), find(), findIndex()).
• Come utilizzare il metodo inArray() di jQuery e le relative avvertenze.
• Confronti di performance e scenari di utilizzo pratici.

Padroneggiando queste competenze, sarai in grado di eseguire la manipolazione dei dati con JavaScript in modo più efficiente.

Articolo successivo

Nel prossimo articolo spiegheremo in dettaglio “Metodi di ricerca di base negli array in JavaScript”. Copriremo le caratteristiche e l’uso di ciascun metodo con esempi concreti. Restate sintonizzati.
Se avete domande o richieste riguardo a questo contenuto, non esitate a contattarci.

2. Metodi di ricerca di base negli array in JavaScript

JavaScript fornisce vari metodi per cercare valori all’interno degli array. Questa sezione spiega come funziona ciascun metodo con esempi facili da capire.

2-1. Il metodo indexOf()

Panoramica
Il metodo indexOf() restituisce il primo indice in cui appare un valore specificato in un array. Se il valore non esiste, restituisce -1.

Sintassi di base

array.indexOf(value, fromIndex)

• value : Il valore da cercare.
• fromIndex : Opzionale. Posizione di partenza della ricerca (default è 0).

Esempio

const fruits = ['apple', 'banana', 'orange'];

console.log(fruits.indexOf('banana')); // Output: 1
console.log(fruits.indexOf('grape'));  // Output: -1

Note

• indexOf() confronta i valori usando l’uguaglianza stretta (===). I valori di tipi diversi non corrispondono.
• Non è adatto per confrontare oggetti o array stessi.

2-2. Il metodo includes()

Panoramica
Il metodo includes() restituisce un valore booleano (true o false) che indica se un valore specificato esiste nell’array.

Sintassi di base

array.includes(value, fromIndex)

Esempio

const colors = ['red', 'green', 'blue'];

console.log(colors.includes('green'));  // Output: true
console.log(colors.includes('yellow')); // Output: false

Note

• includes() è stato introdotto in ES6 (2015), quindi i browser più vecchi potrebbero non supportarlo.

2-3. Il metodo find()

Panoramica
Il metodo find() restituisce il primo elemento che soddisfa una condizione specificata. Se nessun elemento soddisfa la condizione, restituisce undefined.

Esempio

const numbers = [10, 20, 30, 40];

const result = numbers.find(num => num > 25);
console.log(result); // Output: 30

2-4. Il metodo findIndex()

Panoramica
Il metodo findIndex() restituisce l’indice del primo elemento che soddisfa una condizione specificata. Se nessuno soddisfa la condizione, restituisce -1.

Esempio

const numbers = [10, 20, 30, 40];

const index = numbers.findIndex(num => num > 25);
console.log(index); // Output: 2

Riepilogo

Questa sezione ha spiegato i metodi di ricerca di base negli array di JavaScript: indexOf(), includes(), find() e findIndex().
Punti di confronto

• Per ricerche di valori semplici, usa indexOf() o includes().
• Per ricerche condizionali, find() o findIndex() è utile.

3. Cos’è il metodo inArray() di jQuery?

Sebbene JavaScript fornisca metodi nativi per la ricerca negli array, jQuery offre anche il proprio metodo, inArray(). Questa sezione ne spiega le caratteristiche, l’uso e le avvertenze.

3-1. Perché usare jQuery?

• Manutenzione di sistemi legacy
• Scrittura di codice semplificata
• Compatibilità con browser più vecchi

3-2. Come usare inArray()

Panoramica
inArray() restituisce l’indice di un valore in un array. Se il valore non esiste, restituisce -1.

Sintassi di base

$.inArray(value, array, [fromIndex])

Esempio

const fruits = ['apple', 'banana', 'orange'];

console.log($.inArray('banana', fruits)); // Output: 1
console.log($.inArray('grape', fruits));  // Output: -1

3-3. Confronto: inArray() vs Metodi nativi

Punti chiave:

• Usa inArray() per coerenza nei progetti jQuery.
• Usa i metodi nativi per progetti moderni.

3-4. Note

1. Dipendenza dalla versione di jQuery
inArray() funziona solo in un ambiente jQuery.

2. Confronto rigoroso
Confronta i valori usando l’uguaglianza rigorosa (===).

3. Differenze di prestazioni
I metodi nativi sono più veloci.

Sommario

Questa sezione ha trattato inArray() di jQuery.
Punti chiave:

• Conveniente per sistemi legacy o basati su jQuery.
• I metodi nativi sono consigliati per nuovi sviluppi.

4. Guida al confronto per scegliere i metodi di ricerca negli array

JavaScript e jQuery forniscono diversi metodi di ricerca negli array, ciascuno con caratteristiche e casi d’uso differenti. Questa sezione confronta i principali metodi e spiega come scegliere quello giusto a seconda del tuo scenario.

4-1. Caratteristiche e confronto di ciascun metodo

Sotto trovi una tabella di confronto dei principali metodi di ricerca negli array.

4-2. Metodi consigliati per scenario d’uso

1. Ricerca di valore semplice
Esempio: Verificare se un array contiene un valore specifico.

• Metodi consigliati:
• indexOf() → Quando è necessario il numero dell’indice.
• includes() → Quando è sufficiente un semplice controllo di esistenza.

Esempio:

const colors = ['red', 'green', 'blue'];

console.log(colors.indexOf('green')); // Output: 1
console.log(colors.includes('green')); // Output: true

2. Ricerca condizionale
Esempio: Ricercare dati che soddisfano una condizione specifica.

• Metodi consigliati:
• find() → Recupera il primo elemento corrispondente.
• findIndex() → Recupera l’indice del primo elemento corrispondente.

Esempio:

const numbers = [10, 20, 30, 40];

console.log(numbers.find(num => num > 25)); // Output: 30
console.log(numbers.findIndex(num => num > 25)); // Output: 2

3. Ricerca in sistemi legacy
Esempio: Ricercare dati in vecchi sistemi basati su jQuery.

• Metodo consigliato:
• inArray() → Utile quando è necessario jQuery.

Esempio:

const fruits = ['apple', 'banana', 'orange'];

console.log($.inArray('banana', fruits)); // Output: 1

4-3. Confronto delle prestazioni

1. Quando è richiesta alta velocità:
indexOf() e includes() sono veloci.

2. Per ricerche condizionali:
find() e findIndex() consentono condizioni flessibili ma sono leggermente più lenti.

3. Quando si usa jQuery:
inArray() è semplice ma più lento a causa del sovraccarico della libreria.

Sommario

Questa sezione ha confrontato i principali metodi di ricerca negli array e ha spiegato il loro utilizzo consigliato a seconda dello scenario.
Punti chiave:

• Usa indexOf() o includes() per ricerche semplici.
• Usa find() o findIndex() per ricerche condizionali.
• Usa inArray() per ambienti jQuery legacy.

Selezionare il metodo appropriato in base al tuo ambiente e caso d’uso aiuta a creare codice efficiente e manutenibile.

5. Esempi pratici e scenari applicati

Questa sezione spiega come applicare i metodi di ricerca degli array JavaScript e jQuery in scenari del mondo reale. Attraverso esempi pratici, approfondirai la tua comprensione del codice.

5-1. Validazione dell’Input del Form

Scenario: Validare se l’input dell’utente esiste in un elenco predefinito. Solution: Usa includes() per un semplice controllo di esistenza. Code Example:

const validColors = ['red', 'green', 'blue'];
const userInput = 'green';

if (validColors.includes(userInput)) {
  console.log('Valid color.');
} else {
  console.log('Invalid color.');
}

5-2. Ricerca ed Estrazione dei Dati Utente

Scenario: Cercare dati utente che soddisfano condizioni specifiche all’interno di un array di oggetti. Solution: Usa find() o findIndex(). Code Example:

const users = [
  { id: 1, name: 'Alice', age: 25 },
  { id: 2, name: 'Bob', age: 30 },
  { id: 3, name: 'Charlie', age: 35 },
];

const result = users.find(user => user.age >= 30);
console.log(result); // Output: { id: 2, name: 'Bob', age: 30 }

const index = users.findIndex(user => user.age >= 30);
console.log(index); // Output: 1

5-3. Esempio di Gestione degli Errori

Scenario: Implementare la gestione degli errori quando un target di ricerca non viene trovato. Solution: Usa indexOf() o findIndex(). Code Example:

const products = ['apple', 'banana', 'orange'];

const index = products.indexOf('grape');

if (index === -1) {
  console.log('Product not found.');
} else {
  console.log(`Product found at index ${index}.`);
}

5-4. Filtraggio dei Dati dell’Array

Scenario: Estrarre solo i dati che soddisfano condizioni specifiche. Solution: Usa filter(). Code Example:

const scores = [45, 72, 88, 53, 94];

const highScores = scores.filter(score => score >= 70);
console.log(highScores); // Output: [72, 88, 94]

5-5. Esempio di Ricerca jQuery

Scenario: Controllare l’esistenza dei dati usando inArray() in un sistema legacy. Solution: Usa jQuery inArray(). Code Example:

const fruits = ['apple', 'banana', 'orange'];

if ($.inArray('banana', fruits) !== -1) {
  console.log('Banana exists in the list.');
} else {
  console.log('Banana is not in the list.');
}

Summary

Questa sezione ha introdotto esempi di utilizzo pratico basati su scenari reali. Key Points:

• includes() è semplice e utile per la validazione dell’input.
• find() e findIndex() sono potenti per ricerche condizionali e basate su oggetti.
• indexOf() è versatile per la gestione degli errori.
• filter() è efficiente per estrarre più elementi corrispondenti.
• inArray() aiuta negli ambienti jQuery legacy.

6. Frequently Asked Questions (FAQ)

Questa sezione risponde a domande comuni sulla ricerca negli array in JavaScript e jQuery.

Question 1: Qual è la differenza tra indexOf() e includes()?

Answer: Entrambi i metodi vengono utilizzati per cercare elementi in un array, ma i loro valori di ritorno e l’uso differiscono:

• indexOf() : Restituisce l’indice del valore specificato. Restituisce -1 se il valore non viene trovato.
• includes() : Restituisce un booleano ( true o false ) che indica se il valore esiste nell’array.

Example:

const fruits = ['apple', 'banana', 'orange'];

console.log(fruits.indexOf('banana'));   // Output: 1
console.log(fruits.includes('banana'));  // Output: true

Question 2: In che modo find() e filter() differiscono?

Answer: Entrambi i metodi restituiscono elementi che corrispondono a una condizione, ma differiscono nella funzionalità:

• find() : Restituisce il primo elemento che corrisponde alla condizione.
• filter() : Restituisce tutti gli elementi corrispondenti come un nuovo array.

Example:

const numbers = [10, 20, 30, 40, 50];

console.log(numbers.find(num => num > 25));   // Output: 30
console.log(numbers.filter(num => num > 25)); // Output: [30, 40, 50]

Question 3: Come cerco una coppia chiave-valore specifica all’interno di un array di oggetti?

Answer: Usa find() o findIndex() con una condizione. Example:

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' },
];

const user = users.find(user => user.name === 'Bob');
console.log(user); // Output: { id: 2, name: 'Bob' }

Domanda 4: Devo ancora usare inArray() di jQuery?

Risposta:
inArray() di jQuery è utile in ambienti legacy, ma JavaScript moderno offre metodi nativi migliori.

Raccomandazione:

• Per nuovi progetti: Usa metodi nativi come indexOf() o includes().
• Per sistemi jQuery esistenti: Usa inArray() per mantenere la coerenza.

Domanda 5: Come posso ottimizzare la ricerca negli array per le prestazioni?

Risposta:
Per grandi set di dati o operazioni di ricerca frequenti, tieni presente i seguenti punti:

1. Scegli metodi veloci:

• indexOf() e includes() sono i più veloci per ricerche semplici.

2. Usa la cache:

• Metti in cache i risultati delle ricerche per evitare calcoli ripetuti.

3. Ottimizza le strutture dati:

• Per grandi set di dati, usa oggetti, Map o Set per ricerche efficienti.

Esempio:

const dataSet = new Set([10, 20, 30, 40]);
console.log(dataSet.has(20)); // Output: true

Riepilogo

Questa sezione ha spiegato le domande comuni relative alla ricerca negli array in JavaScript e jQuery.
Punti chiave:

• Comprendi le differenze tra i vari metodi e scegli in modo appropriato.
• find() è utile per ricerche condizionali in array di oggetti.
• I metodi nativi sono preferiti nello sviluppo moderno; jQuery è principalmente per sistemi legacy.
• Ottimizza le prestazioni scegliendo la struttura dati corretta.

7. Riepilogo e Prossimi Passi

Questo articolo ha fornito una spiegazione dettagliata dei metodi di ricerca negli array in JavaScript e jQuery. Rivediamo i punti chiave e discutiamo come puoi continuare a imparare e applicare questi concetti.

7-1. Riepilogo dei punti chiave

1. Metodi di ricerca di base negli array

• indexOf() : Cerca l’indice di un elemento.
• includes() : Restituisce un valore booleano che indica se un valore è presente.
• find() / findIndex() : Cerca il primo elemento o indice che corrisponde a una condizione.

2. Metodo inArray() di jQuery

• Utile in sistemi legacy o basati su jQuery.
• I metodi nativi di JavaScript sono consigliati nello sviluppo moderno.

3. Esempi pratici e scenari applicati

• La validazione dell’input, l’estrazione dei dati utente, la gestione degli errori e il filtraggio possono tutti essere semplificati usando questi metodi.

4. Domande frequenti

• Differenze chiarite, casi d’uso e considerazioni sulle prestazioni.

7-2. Come scegliere il metodo giusto

La scelta di un metodo dipende dallo scopo. Usa la tabella di riferimento qui sotto:

7-3. Prossimi passi

1. Avvia un piccolo progetto

• Crea una semplice web app e applica i metodi appresi qui.
  Esempio: lista TODO, gestione inventario prodotti, strumenti di filtraggio.

2. Approfondisci JavaScript avanzato

• Caratteristiche ES6+ : Sintassi spread, destrutturazione, funzioni arrow.
• Programmazione asincrona : Impara Promise, async/await per gestire il recupero dei dati.

3. Esplora i framework

• Framework come React o Vue.js usano frequentemente operazioni sugli array per il rendering dell’interfaccia.

4. Risorse consigliate

• MDN Web Docs : JavaScript Arrays
• W3Schools : JavaScript Array Methods
• JSFiddle / CodePen : Utili per testare e condividere snippet di codice.

7-4. Considerazioni finali

Attraverso questa guida, hai appreso sia le basi sia le applicazioni avanzate della ricerca negli array in JavaScript e jQuery.
Consigli per i lettori:

1. Metti in pratica ciò che hai imparato scrivendo e testando codice frequentemente.
2. Continua a esplorare nuove funzionalità e tecniche di JavaScript.
3. Scegli il metodo più appropriato in base alle tue esigenze specifiche.

Conclusione

Questo conclude la “Guida completa alla ricerca di array in JavaScript e jQuery”.
Continua a imparare e ad ampliare le tue competenze di programmazione per creare applicazioni ancora più potenti ed efficienti.