Ciclo for…in di JavaScript spiegato: sintassi, casi d’uso e migliori pratiche

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

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

1. Introduzione｜Quali Problemi Può Risolvere l’Istruzione for…in?

JavaScript è uno dei linguaggi di programmazione più usati nello sviluppo web. Tra le sue numerose funzionalità, il looping è essenziale per elaborare dati in modo ricorrente.
In particolare, l’istruzione for…in è utile per iterare sulle proprietà di un oggetto.

Scopo di Questo Articolo

In questo articolo tratteremo in dettaglio i seguenti punti:

• Sintassi di base e utilizzo del ciclo for…in di JavaScript
• Avvertenze quando lo si usa con gli array
• Differenze rispetto ad altre strutture di ciclo (for…of e forEach)
• Errori comuni e come risolverli

Cosa Imparerai

• Come elaborare in modo efficiente le proprietà di un oggetto e gli elementi di un array
• Avvertenze e utilizzo sicuro dell’istruzione for…in
• Esempi di codice pratici e confronti di prestazioni

Questo articolo è strutturato per fornire conoscenze utili sia a principianti sia a sviluppatori JavaScript di livello intermedio.
Iniziamo nella sezione successiva con le basi dell’istruzione for…in.

2. Cos’è l’Istruzione for…in di JavaScript?【Spiegazione di Base】

In JavaScript, l’istruzione for…in viene usata per iterare sulle proprietà di un oggetto. Questa sintassi è particolarmente adatta agli oggetti, consentendo di elaborare ogni nome di proprietà (chiave) uno alla volta.

Sintassi di Base

Ecco la sintassi di base del ciclo for…in:

for (variable in object) {
  // Repeated processing
}

Spiegazione dei Parametri:

• variabile : Memorizza il nome della proprietà corrente (chiave).
• oggetto : L’oggetto target che si desidera attraversare.

Esempio di Utilizzo: Enumerare le Proprietà di un Oggetto

const person = {
  name: "Taro",
  age: 25,
  city: "Tokyo"
};

for (const key in person) {
  console.log(`${key}: ${person[key]}`);
}

Output:

name: Taro
age: 25
city: Tokyo

Attenzione: Ordine delle Proprietà Enumerate

L’ordine delle proprietà nel ciclo for…in non è garantito. Secondo le specifiche di JavaScript, l’ordine potrebbe non corrispondere all’ordine di inserimento quando le chiavi sono stringhe. Se è necessario un ordine rigoroso, usa alternative come Object.keys().

Riepilogo delle Caratteristiche

1. Recupero facile delle chiavi dell’oggetto: utile quando si accede dinamicamente ai nomi delle proprietà.
2. Solo le proprietà enumerabili sono considerate: le proprietà non enumerabili (enumerable: false) sono escluse.
3. Le proprietà ereditate dal prototipo sono anch’esse enumerate: ciò può causare problemi, che saranno spiegati nella sezione successiva.

3. Array e l’Istruzione for…in｜Punti Chiave da Tenere d’Occhio

L’istruzione for…in di JavaScript è progettata per enumerare le proprietà degli oggetti, ma può anche essere usata con gli array. Tuttavia, ci sono diverse avvertenze quando la si applica agli array. Esaminiamo il suo comportamento e le insidie in dettaglio.

Comportamento di Base con gli Array

Considera il seguente esempio:

const fruits = ["Apple", "Banana", "Orange"];

for (const index in fruits) {
  console.log(index, fruits[index]);
}

Output:

0 Apple  
1 Banana  
2 Orange

Avvertimento 1: Le Proprietà del Prototipo Possono Essere Enumerate

Array.prototype.newMethod = function () {
  return "New Method";
};

for (const index in fruits) {
  console.log(index, fruits[index]);
}

Output:

0 Apple  
1 Banana  
2 Orange  
newMethod undefined

Soluzione:

for (const index in fruits) {
  if (fruits.hasOwnProperty(index)) {
    console.log(index, fruits[index]);
  }
}

Avvertimento 2: L’Ordine Non È Garantito

const data = [];
data[10] = "Apple";
data[1] = "Banana";
data[5] = "Orange";

for (const index in data) {
  console.log(index, data[index]);
}

Output:

1 Banana  
5 Orange  
10 Apple

Avvertimento 3: Gli Indici Sono Trattati Come Stringhe

const numbers = [10, 20, 30];
for (const index in numbers) {
  console.log(typeof index); // "string"
}

Soluzione:

for (const index in numbers) {
  const numIndex = parseInt(index, 10);
  console.log(numIndex, numbers[numIndex]);
}

Riassunto

• L’istruzione for…in è più adatta agli oggetti che agli array.
• Per la gestione dell’ordine e degli indici numerici, si raccomanda for…of o un ciclo for tradizionale.

4. Differenze tra for…in e for…of【Tabella di Confronto】

In JavaScript, sia for…in che for…of sono disponibili per i cicli, ma i loro casi d’uso e il comportamento differiscono.

Confronto della Sintassi

for…in:

const obj = { a: 1, b: 2, c: 3 };
for (const key in obj) {
  console.log(key); // Retrieves keys
}

for…of:

const arr = [10, 20, 30];
for (const value of arr) {
  console.log(value); // Retrieves values
}

Tabella di Confronto

Esempio Pratico｜Gestione Array

const arr = ['a', 'b', 'c'];

// for...in
for (const index in arr) {
  console.log(index); // Output: 0, 1, 2
}

// for...of
for (const value of arr) {
  console.log(value); // Output: 'a', 'b', 'c'
}

Riassunto

• for…in: Ideale per la gestione delle chiavi degli oggetti.
• for…of: Ideale per array e oggetti iterabili.

5. Utilizzo Pratico: Applicazioni e Best Practices dell’Istruzione for…in

Qui, esploreremo applicazioni pratiche dell’istruzione for…in di JavaScript e introdurremo best practices utili nello sviluppo reale.

1. Esempio 1｜Filtraggio delle Proprietà degli Oggetti

const user = {
  name: "Tanaka",
  age: 30,
  email: "tanaka@example.com",
  password: "secret123"
};

const publicData = {};
for (const key in user) {
  if (key !== "password") {
    publicData[key] = user[key];
  }
}
console.log(publicData);

Output:

{ name: 'Tanaka', age: 30, email: 'tanaka@example.com' }

2. Esempio 2｜Elaborazione di Oggetti Annidati

const data = {
  user: {
    name: "Sato",
    info: {
      age: 28,
      city: "Osaka"
    }
  }
};

function printNested(obj) {
  for (const key in obj) {
    if (typeof obj[key] === "object") {
      printNested(obj[key]);
    } else {
      console.log(`${key}: ${obj[key]}`);
    }
  }
}

printNested(data);

Output:

name: Sato
age: 28
city: Osaka

3. Best Practice｜Esclusione delle Proprietà del Prototipo

const obj = { a: 1, b: 2 };
Object.prototype.c = 3;

for (const key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(`${key}: ${obj[key]}`);
  }
}

Output:

a: 1
b: 2

Riassunto

• Abbiamo introdotto casi d’uso appropriati per il filtraggio e la gestione di oggetti annidati.
• Usa hasOwnProperty() per prevenire che l’ereditarietà del prototipo non intenzionale venga enumerata.

6. Errori Comuni e Soluzioni con for…in【Amichevole per Principianti】

1. Esempio di Errore 1｜Le Proprietà del Prototipo Vengono Enumerate

const obj = { a: 1, b: 2 };
Object.prototype.c = 3;

for (const key in obj) {
  console.log(key, obj[key]);
}

Output:

a 1
b 2
c 3

Soluzione:

for (const key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(key, obj[key]);
  }
}

2. Esempio di Errore 2｜Utilizzo di for…in con Array

const arr = [10, 20, 30];
Array.prototype.extra = "Additional Data";

for (const index in arr) {
  console.log(index, arr[index]);
}

Output:

0 10
1 20
2 30
extra undefined

Soluzione:

for (const value of arr) {
  console.log(value);
}

3. Esempio di Errore 3｜Gestione di Valori Undefined

const obj = { a: 1, b: undefined, c: 3 };

for (const key in obj) {
  console.log(key, obj[key]);
}

Soluzione:

for (const key in obj) {
  const value = obj[key] ?? "Default Value";
  console.log(key, value);
}

Riassunto

• Problemi con le Proprietà del Prototipo: Usa hasOwnProperty().
• Gestione Array: Preferisci for…of o forEach invece di for…in.
• Valori Undefined: Assegna valori predefiniti con l’operatore di coalescenza nullish ( ?? ).

7. Test di Prestazioni e Alternative a for…in

1. Confronto delle Prestazioni

Istruzione for…in:

const obj = { a: 1, b: 2, c: 3 };
console.time("for...in");
for (const key in obj) {
  console.log(key, obj[key]);
}
console.timeEnd("for...in");

Object.keys():

console.time("Object.keys");
Object.keys(obj).forEach(key => {
  console.log(key, obj[key]);
});
console.timeEnd("Object.keys");

2. Risultato di Confronto Esemplificativo

for...in: 0.015ms
Object.keys: 0.005ms

3. Alternative Raccomandate

• Gestione degli Oggetti: Preferisci Object.keys() per prestazioni e sicurezza migliori.
• Gestione degli Array: Usa for…of o forEach per un’iterazione più veloce e affidabile.

Riepilogo

• L’istruzione for…in è comoda, ma scegli la struttura di ciclo più appropriata considerando prestazioni e sicurezza.

8. Conclusione｜Comprendere l’Istruzione for…in e Prossimi Passi

1. Punti Chiave

1. Sintassi di Base e Utilizzo di for…in:

• Utilizzata per iterare sui nomi delle proprietà degli oggetti.
• Specializzata per le chiavi degli oggetti, non per gli array.

1. Precauzioni nell’Uso con Array:

• L’ordine non è garantito e potrebbero essere incluse proprietà della catena del prototipo.
• Per gli array, usa for…of o forEach() invece.

1. Differenze tra for…in e for…of:

• for…in: Itera sui nomi delle proprietà (chiavi).
• for…of: Itera sui valori effettivi degli array o degli oggetti iterabili.

1. Applicazioni Pratiche e Migliori Pratiche:

• Gestione di oggetti nidificati con ricorsione.
• Esclusione dell’ereditarietà del prototipo con hasOwnProperty() .
• Miglioramento delle prestazioni e della sicurezza con Object.keys() o Object.entries() .

1. Ottimizzazione delle Prestazioni:

• Object.keys() + forEach() è raccomandato per garanzie sull’ordine e efficienza, rendendolo un’alternativa più sicura a for…in.

2. Risposte alle Domande Comuni

D1. Dovrei evitare di usare l’istruzione for…in?

• R: È adatta per enumerare le proprietà degli oggetti, ma per array o attività critiche per le prestazioni, for…of o Object.keys() è più sicuro e efficiente.

D2. Le proprietà del prototipo verranno sempre enumerate?

• R: Sì. Per specifica, le proprietà ereditate dal prototipo sono incluse. Usa hasOwnProperty() per evitare questo problema.

D3. Qual è il ciclo migliore a seconda di array vs. oggetti?

• Oggetti: Usa for…in o Object.keys() .
• Array: Usa for…of o forEach() .

3. Prossimi Passi｜Cosa Imparare Dopo

1. Iterabili e Oggetti Iterabili:

• Strutture dati come Map, Set, WeakMap, WeakSet e i cicli per gestirle.

1. Funzioni di Ordine Superiore per la Gestione dei Dati:

• Utilizzo pratico di map(), filter(), reduce() .

1. Tecniche Avanzate per Oggetti e Array:

• Utilizzo di Object.values() e Object.entries() per un’elaborazione efficiente dei dati.

1. Funzionalità Moderne di JavaScript:

• Funzionalità ES6+ come l’operatore spread e il destructuring per un codice più pulito.

1. Programmazione Asincrona con Promise/Async/Await:

• Applica i cicli nell’elaborazione in tempo reale come il recupero dei dati e la gestione dinamica degli oggetti.

4. Considerazioni Finali｜Padroneggiare i Cicli JavaScript

In questo articolo, ci siamo concentrati sull’istruzione JavaScript for…in, coprendo il suo utilizzo di base, applicazioni avanzate, insidie e alternative. Punti più importanti:

• for…in è ideale per enumerare le proprietà degli oggetti, ma per array o attività focalizzate sulle prestazioni, dovrebbero essere usati altri approcci.
• Segui sempre le migliori pratiche e le misure di sicurezza per evitare errori e comportamenti imprevisti nel tuo codice.

Prossimo Passo! Approfondisci la tua comprensione dei metodi alternativi e delle funzioni di ordine superiore per portare le tue abilità JavaScript al livello successivo.