Iteración de arrays
songs guarda rain, tide y dusk, y la cantidad queda congelada en toda esta página, porque forEach solo visita y no alarga ni acorta la lista como en la lección anterior.
La longitud no se mueve
Esta vez el recorrido es una llamada a método y también puede darte el índice, a diferencia de for...of, que solo trae el valor. No se añade ningún título al final y tampoco se quita ninguno de la lista.
La función que entregas
Entregas una función que corre una vez por canción, y la ficha de abajo es el contrato de esta página.
📊 Qué te entrega forEach
| Pieza | Cuándo llega | No es |
|---|---|---|
| primer argumento | en cada visita | la longitud |
| segundo argumento | solo si lo nombras | obligatorio |
| resultado de la llamada | cuando forEach termina |
un array nuevo |
length después |
cuando lees songs.length |
cambiado por la visita |
La canción es el primer argumento y el índice el segundo, que puedes omitir.
Orden en la consola
Imprime cada título. Primero va rain, luego tide y al final dusk.
let songs = ["rain", "tide", "dusk"];
songs.forEach(function (title) {
console.log(title);
});
Salen tres líneas y avanzan desde el frente del array hacia el fondo. Las tres cadenas siguen en los mismos huecos.
let songs = ["rain", "tide", "dusk"];
songs.forEach(function (title, i) {
console.log(i);
console.log(title);
});
El cero es de rain, el dos es de dusk, y tide queda en medio, en el uno.
let songs = ["rain", "tide", "dusk"];
let result = songs.forEach(function (title) {
console.log(title);
});
console.log(result);
console.log(songs.length);
Guarda la llamada en una variable e imprímela para ver undefined, que no es un título ni una longitud. La impresión de length sigue en 3.
let songs = ["rain", "tide", "dusk"];
songs.forEach(function (title) {
if (title === "tide") {
return;
}
console.log(title);
});
Si el título es tide y regresas enseguida, esa línea no se imprime. El recorrido no se detiene y dusk sigue saliendo.
let songs = ["rain", "tide", "dusk"];
let seen = 0;
songs.forEach(function (title) {
seen = seen + 1;
});
console.log(seen);
console.log(songs.length);
Tu contador cae en 3 y length también, pero esa suma la llevas tú: la llamada no te la devolvió.
Títulos en el párrafo
Arma una cadena con un espacio entre títulos y ponla en el párrafo. Deja la longitud fuera de la línea.
<!DOCTYPE html>
<html>
<head>
<title>array-iteration — page</title>
</head>
<body>
<p id="line">…</p>
<script>
let songs = ["rain", "tide", "dusk"];
let line = "";
songs.forEach(function (title) {
if (line !== "") {
line = line + " ";
}
line = line + title;
});
let box = document.getElementById("line");
box.textContent = line;
</script>
</body>
</html>
La línea muestra los tres títulos con espacio, y si cambias tide por fog y recargas, cambia la palabra del medio. La visita sigue cubriendo tres títulos.
Haz el recorrido
- Imprime los tres títulos. Comprueba que
rainva primero - Imprime cada índice y comprueba que
rainestá en 0 - Guarda el resultado de la llamada y mira
undefinedmientras la longitud sigue en 3 - Regresa enseguida en
tidey comprueba queduskaún se imprime - Suma 1 a
seenen cada visita y comprueba que queda en 3 - Lee la línea de la página, pasa
tideafogy recarga
Fácil de leer mal
- No esperes que la llamada devuelva el último título. Lo que vuelve no es una canción
- No esperes que la llamada devuelva la longitud
- No escribas
breakdentro de la función, porque es un error de sintaxis - No creas que
returndespués detidefrena también adusk - No leas el segundo parámetro como si fuera el título
- No busques por valor en esta página
Llévate esto
forEachvisita cada elemento de delante hacia atrás y el primer parámetro es el elemento- El segundo parámetro es el índice
- El resultado de la llamada es
undefined returndentro de la función salta solo esa visita- La página siguiente busca por valor
🧠 Pon a Prueba tu Conocimiento
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior