Come iterare attraverso gli oggetti in JavaScript

Sapere come iterare attraverso un enumerabile set di dati in JavaScript è essenziale per i principianti di JavaScript. I dati necessari possono essere in qualsiasi forma, come mappe, elenchi, array e oggetti. Diversi metodi JavaScript sono utilizzati per iterarsi attraverso gli oggetti in JavaScript e recuperare le coppie multiple di valore chiave. I quattro di loro sono i principali per ... in loop, Oggetto.tasti () metodo, Oggetto.valori() metodo, e Oggetto.inserimenti() metodo.

Questo articolo discuterà i metodi per ripetere gli oggetti in JavaScript. Inoltre, le procedure relative all'iterazione dell'oggetto come per ... in loop, oggetto.Metodo keys (), oggetto.Metodo valori () e oggetto.Metodo voci (), verrà anche dimostrato con esempi. Quindi iniziamo!

Iterale attraverso gli oggetti in JavaScript utilizzando per ... in loop

Uno dei metodi più comuni per iterare attraverso le proprietà dell'oggetto è l'utilizzo di "per ... in" ciclo continuo. Il codice che aggiungerai all'interno del per ... in loop verrà eseguito una volta per ogni proprietà del tuo oggetto.

Esempio: iterando attraverso gli oggetti in JavaScript utilizzando per ... in loop

Innanzitutto, devi creare un oggetto in un programma JavaScript. Ad esempio, nell'esempio di seguito, abbiamo creato un "utente"Oggetto con"nome","età","e-mail", E "attivo"Come le sue proprietà:

const user =
Nome: "Jack Smith",
Età: 28,
Email: '[email protected],
attivo: vero;

Successivamente, useremo il “per ... in"Loop per iterare attraverso il creato utente oggetto. IL "per ... in"Loop restituirà le proprietà o le chiavi dell'oggetto e i loro valori:

// itera attraverso l'oggetto utente
per (const chiave nell'utente)
Console.log ('$ key: $ user [key]');

Ecco il codice completo dell'esempio fornito con il suo output:

Iterare attraverso gli oggetti in JavaScript utilizzando l'oggetto.Metodo dei tasti ()

Per semplificare l'iteratura attraverso gli oggetti, il Oggetto.tasti () Il metodo è stato aggiunto a Es6. Devi passare l'oggetto che vuoi iterare e l'oggetto JavaScript.Il metodo Keys () restituirà un array che comprende tutte le chiavi o i nomi delle proprietà. Quindi, è possibile iterare attraverso quell'array e recuperare il valore di ciascuna proprietà utilizzando un metodo di looping dell'array come il loop JavaScript Foreach ().

Esempio: iterating tramite oggetti in JavaScript utilizzando l'oggetto.Metodo dei tasti ()

Per lo scopo dimostrativo, creeremo un "corsi"Oggetto che ha corsi diversi come proprietà come"db","JavaScript","cp", E "dld"E assegnerà ciascuno di alcuni loro valori specifici:

corsi const =
DB: 45,
JavaScript: 67,
CP: 23,
dld: 15;

Dopo averlo fatto, convertiremo il nostro "corsi"Oggetto a"tasti" vettore:

// Converti oggetto in array di tasti
const keys = oggetto.tasti (corsi);
// stampa tutte le chiavi
console.registro (chiavi);

Nel prossimo passaggio, itereremo usando il "corsi"Oggetto usando il"tasti" vettore. Qui, abbiamo usato il "per ciascuno()"Loop per l'iterazione:

// itera attraverso l'oggetto
tasti.foreach ((key, indice) =>
console.log ('$ key: $ corsi [key]');
);

Dai un'occhiata all'output dell'esempio fornito nell'immagine di seguito:

Iterare attraverso gli oggetti in JavaScript utilizzando l'oggetto.Metodo valori ()

L'oggetto JavaScript.Il metodo valori () è opposto all'oggetto.Metodo chiave () ed è stato incorporato nell'ES8. L'oggetto.valori () il metodo emette un array che comprende i valori della proprietà dell'oggetto aggiunto. Successivamente, è possibile ripetere i valori degli oggetti utilizzando un metodo di looping dell'array come JavaScript foreach () Loop.

Esempio: iterating tramite oggetti in JavaScript utilizzando l'oggetto.Metodo valori ()

Questo esempio ti mostrerà come iterare usando l'oggetto.Metodo valori () attraverso un valore dell'oggetto. A tale scopo, creeremo un "uccelli"Oggetto con quattro proprietà"corvo","passero","pappagallo", E "piccione"Con i loro rispettivi valori:

const uccelli =
Crow: 1,
Sparrow: 2,
pappagallo: 3,
piccione: 4;

Ora, per iterare attraverso i valori di "uccelli"Oggetto, invoceremo l'oggetto.Metodo valori () mentre passa il "uccelli"Oggetto come argomento:

// itera attraverso i valori degli oggetti
Oggetto.valori (uccelli).foreach (val => console.log (val));

Dai un'occhiata all'output seguente dell'iterazione dei valori degli oggetti:

Iterare attraverso gli oggetti in JavaScript utilizzando l'oggetto.Metodo delle voci ()

Un altro metodo ES8 che può essere utilizzato per l'iterazione attraverso gli oggetti in JavaScript è "Oggetto.inserimenti()" metodo. Quando invochi l'oggetto.Metodo voci () passando l'oggetto creato come argomento, restituirà due elementi in ciascun array interno. Il primo elemento array rappresenterà la proprietà dell'oggetto e il suo valore corrispondente verrà memorizzato nel secondo elemento.

Esempio: iterating tramite oggetti in JavaScript utilizzando l'oggetto.Metodo delle voci ()

Per usare l'oggetto.Metodo delle voci () Nel tuo programma JavaScript, crea un oggetto con alcune proprietà e i loro valori. Ad esempio, abbiamo creato un "uccelli"Oggetto che ha quattro proprietà:

const uccelli =
Crow: 1,
Sparrow: 2,
pappagallo: 3,
piccione: 4;

Ora, per iterare attraverso il "oggetto"Valori, passeremo il nostro"uccelli"Oggetto come argomento al"Oggetto.inserimenti()"Metodo e memorizzare il valore di ritorno in"inserimenti"Variabile:

// itera attraverso i valori degli oggetti
const voci = oggetto.Voci (uccelli);
console.registro (voci);

Come puoi vedere dall'output di seguito, il "Oggetto.inserimenti()"Il metodo ha restituito quattro array interni, in cui ogni array sta memorizzando una singola proprietà di"uccelli"Oggetto insieme al suo valore:

Per iterare attraverso l'array, che viene restituito dall'oggetto JavaScript.Metodo voci (), puoi anche usare "per ciascuno()Metodo o il "per ... di" ciclo continuo.

Per utilizzare il per ... del ciclo, devi scrivere il seguente codice dopo aver creato l'oggetto uccelli richiesto:

per (const [chiave, valore] dell'oggetto.Voci (uccelli))
console.log ('$ chiave: $ value');

Con l'aiuto del "per ... di"Loop, abbiamo ripetuto con successo su"uccelli"Oggetto, che può essere visto nell'output:

In questo caso, se vuoi utilizzare il "per ciascuno()"Metodo per lo stesso scopo, quindi invoca l'oggetto.Metodo voci () mentre passa l'oggetto creato come argomento e quindi chiama il "per ciascuno()" metodo. Il metodo foreach () restituirà le proprietà o le chiavi dell'oggetto e i rispettivi valori:

// metodo foreach ()
Oggetto.Voci (uccelli).foreach (([key, value]) =>
console.log ('$ key: $ value'
);

Conclusione

Usando per ... in loop, oggetto.Metodo chiave (), oggetto.Metodo valori (), oggetto.Metodo voci (), è possibile iterare attraverso gli oggetti in JavaScript. Il per ... in loop, oggetto.Metodo e oggetto voci ().Il metodo dei tasti () viene utilizzato per iterare attraverso i valori della coppia della chiave dell'oggetto mentre l'oggetto.valori () itera solo attraverso i valori della proprietà di un oggetto. Questo articolo ha discusso dei metodi di iterazione attraverso gli oggetti in JavaScript. Inoltre, le procedure relative all'iterazione dell'oggetto come per ... in loop, oggetto.Metodo keys (), oggetto.Metodo valori () e oggetto.Il metodo voci () è anche dimostrato con esempi.