Cómo iterar sobre un objeto de JavaScript?

objetos JavaScript: Aquí, vamos a aprender cómo iterar sobre un objeto JavaScript ? la manera de recorrer un objeto en JavaScript?

Una y otra vez se puede sentir la necesidad de recorrer a través de un objeto de descubrir una propiedad particular, un cierto valor correspondiente a una tecla o tal vez hacer cambios a ciertas claves y los valores de ese objeto. En las matrices, es bastante sencilla y tenemos algunos métodos flexibles para iterar sobre ellos, tales como el bucle class regular, el bucle foreach, etc. Cuando se trata de objetos, la forma más sencilla para iterar sobre un objeto es la for -en bucle.

Considere el siguiente objeto,

const student1={
name: 'Ryan',
age: 15,
subject: 'Science',
rank: 17
}
console.log(student1);

salida

{name: "Ryan", age: 15, subject: "Science", rank: 17}

Podemos utilizar el for -en bucle para repetir las propiedades o las claves de nuestro objeto STUDENT1. Dentro del bucle, primero vamos a comprobar si la propiedad pertenece exclusivamente a nuestro objeto y sólo entonces vamos a la producción y su valor a la consola,

function iterateObj(Obj) {
for (prop in Obj) {
if (Obj.hasOwnProperty(prop)) {
console.log(`${prop} : ${Obj[prop]}`)
}
}
}
iterateObj(student1);

salida

name : Ryan
age : 15
subject : Science
rank : 17

Esta es una forma sencilla para iterar sobre el objeto. También podemos utilizar el for -en bucle sólo para imprimir las claves, los valores o los dos valores clave como lo hicimos anteriormente.

en bucle a través de un objeto suena poco convencional ya que la iteración generalmente asociado sobre un elemento con una matriz. ES6 introdujo tres métodos que podemos utilizar que nos ayudan a convertir el objeto en una matriz y entonces podemos fácilmente a través del bucle de la manera que nos gustaría hacer en una matriz.

Podemos utilizar Object.keys () para convertir todas nuestras llaves del objeto en una matriz de claves.

const studKeys = Object.keys(student1);
console.log(studKeys);

salida

(4) ["name", "age", "subject", "rank"]

Obtenemos una vuelta matriz con unas llaves en su interior. try de Let colocar a través de ella,

studKeys.forEach(k => console.log(k));

salida

name
age
subject
rank

Del mismo modo, podemos obtener una matriz con todos los valores de nuestro objeto utilizando método Object.values ​​() ,

const studVal = Object.values(student1);
console.log(studVal);

salida

(4) ["Ryan", 15, "Science", 17]

Y de nuevo, podemos iterar sobre esta matriz mediante un bucle for normal también.

for (let i = 0; i < studVal.length; i++) {
console.log(studVal[i]);
}

salida

Ryan
15
Science
17

Pero lo que si queremos que la clave y su valor correspondiente juntos como una pareja dentro de una matriz? Sería genial si pudiéramos tener una matriz de matrices for esto, entonces tendríamos fácilmente el uso excesivo de bucle del bucle foreach.

podemos simplemente utilizar el método Object.entries () que convierte los pares de valores clave en matrices y los combina individuales o los envuelve juntos dentro de otra matriz.

const student = Object.entries(student1);
console.log(student);

salida

(4) [Array(2), Array(2), Array(2), Array(2)]
0: (2) ["name", "Ryan"]
1: (2) ["age", 15]
2: (2) ["subject", "Science"]
3: (2) ["rank", 17]
length: 4
__proto__: Array(0)

Ahora obtenemos una matriz con otra matriz que tenía la llave y valor como elementos separados for cada índice. Podemos llegar a cualquier propiedad clave-valor con la primera indexación y utilizar el índice 0 ª para obtener la clave y el 1 de índice para obtener su valor. Vamos a usar el método forEach a bucle o iterar sobre el objeto que acaba de convertir en una matriz 2D.

student.forEach(s => console.log(`${s[0]} : ${s[1]}`));

salida

name : Ryan
age : 15
subject : Science
rank : 17

Así, podemos utilizar la for -en bucle para iterar sobre un objeto o primera convertirlo en una matriz y a continuación, iterar sobre el objeto como si estamos iterando sobre una matriz .


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *