JavaScript para en

Tabla de contenido

    Mostrar tabla de contenidos

El bucle For In

La instrucción for in de JavaScript recorre las propiedades de un objeto:

Sintaxis

for (key in object) {
  // code block to be executed

}

Ejemplo

const person = {fname:"John", lname:"Doe", age:25};

let text = "";
for (let x in person) {
  text += person[x];
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript For In Loop</h2>
<p>The for in statement loops through the properties of an object:</p>

<p id="demo"></p>

<script>
const person = {fname:"John", lname:"Doe", age:25}; 

let txt = "";
for (let x in person) {
  txt += person[x] + " ";
}

document.getElementById("demo").innerHTML = txt;
</script>

</body>
</html>

Ejemplo explicado

  • El bucle for in itera sobre un objeto persona

  • Cada iteración devuelve una clave (x)

  • La clave se utiliza para acceder al valor de la clave.

  • El valor de la clave es persona[x]

Para entrar sobre matrices

La instrucción for in de JavaScript también puede recorrer las propiedades de una matriz:

Sintaxis

for (variable in array) {
  code
}

Ejemplo

const numbers = [45, 4, 9, 16, 25];

let txt = "";
for (let x in numbers) {
  txt += numbers[x];
 
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>For In Loops</h2>
<p>The for in statement can loops over array values:</p>

<p id="demo"></p>

<script>
const numbers = [45, 4, 9, 16, 25];

let txt = "";
for (let x in numbers) {
  txt += numbers[x] + "<br>"; 
}

document.getElementById("demo").innerHTML = txt;
</script>

</body>
</html>

No utilice for in sobre un Array si el orden del índice es importante.

El orden del índice depende de la implementación y es posible que no se pueda acceder a los valores de la matriz en el orden esperado.

Es mejor utilizar un bucle for, un bucle for of o Array.forEach() cuando el orden es importante.

Array.forEach()

El método forEach() llama a una función (una función de devolución de llamada) una vez para cada elemento de la matriz.

Ejemplo

const numbers = [45, 4, 9, 16, 25];

let txt = "";
numbers.forEach(myFunction);

function myFunction(value, index, array) {
   
txt += value;
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The forEach() Method</h2>

<p>Call a function once for each array element:</p>

<p id="demo"></p>

<script>
const numbers = [45, 4, 9, 16, 25];

let txt = "";
numbers.forEach(myFunction);
document.getElementById("demo").innerHTML = txt;

function myFunction(value, index, array) {
  txt += value + "<br>"; 
}
</script>

</body>
</html>

Tenga en cuenta que la función toma 3 argumentos:

  • El valor del artículo

  • El índice de artículos

  • La matriz en sí

El ejemplo anterior utiliza sólo el parámetro de valor. Se puede reescribir como:

Ejemplo

const numbers = [45, 4, 9, 16, 25];

let txt = "";
numbers.forEach(myFunction);

function myFunction(value) {
   
txt += value; 
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The forEach() Method</h2>

<p>Call a function once for each array element:</p>

<p id="demo"></p>

<script>
const numbers = [45, 4, 9, 16, 25];

let txt = "";
numbers.forEach(myFunction);
document.getElementById("demo").innerHTML = txt;

function myFunction(value) {
  txt += value + "<br>"; 
}
</script>

</body>
</html>