Hay dos métodos para iterar sobre un objeto que se analizan a continuación:
Método 1: Uso del bucle for…in: las propiedades del objeto se pueden iterar utilizando un bucle for..in. Este bucle se utiliza para iterar sobre todas las propiedades iterables que no son de símbolo de un objeto. Algunos objetos pueden contener propiedades que pueden ser heredadas de sus prototipos. El método hasOwnProperty() se puede utilizar para comprobar si la propiedad pertenece al objeto en sí. El valor de cada clave del objeto se puede encontrar utilizando la clave como índice del objeto.
Sintaxis:
for (let key in exampleObj) {
if (exampleObj.hasOwnProperty(key)) {
value = exampleObj[key];
console.log(key, value);
}
}
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
How to iterate over
a JavaScript object?
</title>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
How to iterate over
a JavaScript object?
</b>
<p>
Click on the button to iterate
through the javascript object.
</p>
<p>
Check the console
for the output
</p>
<button onclick="iterateObject()">
Iterate Object
</button>
<script type="text/javascript">
function iterateObject() {
let exampleObj = {
book: "Sherlock Holmes",
author: "Arthur Conan Doyle",
genre: "Mystery"
};
for (let key in exampleObj) {
if (exampleObj.hasOwnProperty(key))
{
value = exampleObj[key];
console.log(key, value);
}
}
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Método 2: mapa Object.entries(): el método Object.entries() se utiliza para devolver una array de los pares de propiedades enumerables con clave de string enumerables del objeto. La array devuelta se usa con el método map() para extraer la clave y el valor de los pares.
La clave y los valores del par clave-valor se pueden extraer accediendo al primer y segundo índice del par de array. El primer índice corresponde a la clave y el segundo índice corresponde al valor del par.
Sintaxis:
Object.entries(exampleObj).map(entry => {
let key = entry[0];
let value = entry[1];
console.log(key, value);
});
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
How to iterate over
a JavaScript object?
</title>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
How to iterate over
a JavaScript object?
</b>
<p>
Click on the button to iterate
through the javascript object.
</p>
<p>
Check the console
for the output
</p>
<button onclick="iterateObject()">
Iterate Object
</button>
<script type="text/javascript">
function iterateObject() {
let exampleObj = {
book: "Sherlock Holmes",
author: "Arthur Conan Doyle",
genre: "Mystery"
};
Object.entries(exampleObj).map(entry => {
let key = entry[0];
let value = entry[1];
console.log(key, value);
});
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA