Contenido principal
Iterar con bucles sobre listas
En programación, utilizamos listas para almacenar secuencias de datos relacionados. A menudo queremos realizar la misma operación para cada elemento de una lista, como mostrarlo o manipularlo matemáticamente. Para ello, podemos usar un bucle para iterar sobre cada elemento, y repetir el mismo código para cada uno.
La necesidad de iteración
Hagamos un programa para decirle al mundo cómo hacer un sandwich de mantequilla de maní y plátano, y almacenar los pasos de la receta en una lista.
He aquí cómo se vería eso en JavaScript:
var steps = ["Slice bread", "Smear peanut butter on bread", "Place sliced bananas on bread"];
println(steps[0]);
println(steps[1]);
println(steps[2]);¿Y si luego añadimos un cuarto paso muy importante a la lista, vaciar miel encima?
var steps = ["Slice bread", "Smear peanut butter on bread", "Place sliced bananas on bread", "Drizzle honey on top"];Entonces debemos agregar otra línea de código al final para mostrarla:
println(steps[3]);De hecho, cada vez que agregamos un nuevo paso, ¡necesitamos otra línea de código para mostrar ese paso!
Afortunadamente, hay una mejor manera: iterar sobre la lista con un bucle.
Así se ve en JavaScript, con un bucle
for:for (var i = 0; i < steps.length; i++) {
println(steps[i]);
}Ese código mostrará cada elemento de la lista, sin importar cuántos haya. Desglosemos cómo funciona.
El encabezado del bucle de 3 partes controla cuántas veces se repite:
var i = 0: inicializa la variable contadoria 0. En JavaScript, el índice del primer elemento de un arreglo es 0, que es siempre el valor inicial de un bucle que itera sobre un arreglo inicio a fin.i < steps.length: esta condición verifica que la variable contadories menor que la longitud del arreglosteps. Los lenguajes de programación siempre proveen una manera de obtener la longitud de un arreglo, y en JavaScript es con la propiedadarray.length.i++: esto se ejecuta después de cada iteración del bucle, e incrementa en uno la variable contador. Si sumamos dos, procesaríamos elementos salteados. Sumar uno asegura procesar cada elemento una vez.
El cuerpo del bucle
for contiene el código que se ejecuta para cada iteración. En este caso, es una sola línea de código que muestra el elemento actual: println(steps[i]);Algo realmente importante a observar acerca de esta línea de código: el índice dentro de los corchetes no es un número como 0 o 1 o 2. En su lugar, es la variable contador
i. Esto significa que el índice cambia cada vez que se ejecuta este código, empezando en 0, luego 1, luego 2. Imagina lo que pasaría si escribiéramos accidentalmente steps[0] en su lugar: ¡solo haríamos el primer paso de cortar el pan! No muy bueno.✏️ El siguiente programa tiene ese código y bucle. Añade más pasos a mi receta, o haz que sea una receta para algo completamente diferente. 🌮🍔🥗
Iteración con cálculos
Desde luego, ¡podemos hacer mucho más que simplemente mostrar los elementos de una lista!
Por ejemplo, podemos calcular nuevos valores basados en todos los valores de la lista.
Este código calcula un precio total basado en una lista de precios de productos individuales:
var totalPrice = 0;
var prices = [1.75, 3.50, 4.99, 2.50];
for (var i = 0; i < prices.length; i++) {
totalPrice += prices[i];
}Hagmos algo más elaborado: podemos usar condicionales dentro de un bucle para calcular valores basados en qué elementos satisfacen alguna condición.
Este código calcula el número de temperaturas de congelación en una lista de temperaturas Fahrenheit durante 10 días:
var numFreezing = 0;
var temps = [29, 33, 31, 30, 28, 33, 35, 34, 32, 28];
for (var i = 0; i < temps.length; i++) {
if (temps[i] <= 32) {
numFreezing++;
}
}Incluso podríamos crear una lista completamente nueva al iterar sobre una lista.
Este código también procesa una lista de precios, como el primer ejemplo, pero en su lugar calcula el precio con descuento de cada artículo (25% de descuento) y lo guarda en una nueva lista:
var prices = [39.99, 29.99, 19.99];
var discountedPrices = [];
for (var i = 0; i < prices.length; i++) {
var newPrice = prices[i] * 0.75;
discountedPrices.push(newPrice);
}Fuera de los límites
Considera una lista con 8 elementos, como este que almacena los planetas de nuestro sistema solar:
var planets = ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune"];En JavaScript (y en cualquier lenguaje que inicie índices desde 0), el primer elemento es
planets[0] y el octavo es planets[7]. ¿Entonces qué mostraría este código?
println(planets[8]);In JavaScript, it displays
undefined. In many languages, it causes a runtime error, preventing the rest of the code from running. In Python, you'll see a "list index out of range" error and in Java, you'll see "java.lang.ArrayIndexOutOfBoundsException". We never want to cause an out of bounds error in any language, so as programmers, we need to be make sure we specify in-bounds indices for our lists.
Here's a
for loop with an out of bounds error:for (var i = 0; i <= planets.length; i++) {
println(planets[i]);
}Parece muy similar al bucle
for correcto anterior, pero hay una pequeña y crucial diferencia. ¿La ves?La condición en el encabezado usa
<= en lugar de < al comparar i con planets.length. Eso significa que el bucle se ejecutará cuando i es igual a planets.length. En este caso, es cuando i es igual a 8. Sin embargo, como acabamos de ver, planets[8] es undefined. En lenguajes con índices basados en 0, el índice más alto es array.length - 1, no array.length.Para evitar que los programadores causen un error fuera de límites, muchos lenguajes de programación proveen bucles especializados
for diseñados para iterar solo sobre listas, tales como bucles for-each. Iteración sobre listas en pseudocódigo
Este pseudocódigo representa iteración sobre cada elemento de una lista:
FOR EACH value IN list
{
<instructions>
}Observa que no hay índices en este bucle
FOR EACH, pues value de cada elemento está disponible directamente. Esto significa que no debemos preocuparnos por errores de límites en nuestro pseudocódigo en la iteración sobre la lista.Este es el pseudocódigo equivalente para mostrar cada uno de los 8 planetas:
planets ← ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune"]
FOR EACH planet IN planets
{
DISPLAY(planet)
}Este pseudocódigo calcula el precio total de una lista de precios:
totalPrice ← 0
prices ← [1.75, 3.50, 4.99, 2.50]
FOR EACH price IN prices
{
totalPrice ← totalPrice + price
}Este pseudocódigo cuenta el número de temperaturas Fahrenheit de congelación:
numFreezing ← 0
temps ← [29, 33, 31, 30, 28, 33, 35, 34, 32, 28]
FOR EACH temp IN temps
{
IF ( temp ≤ 32)
{
numFreezing ← numFreezing + 1
}
}Este pseudocódigo crea una nueva lista de precios con descuento:
prices ← [39.99, 29.99, 19.99]
discountedPrices ← []
FOR EACH price IN prices
{
newPrice ← price * 0.75
APPEND(discountedPrices, newPrice)
}🙋🏽🙋🏻♀️🙋🏿♂️¿Tienes alguna pregunta sobre este tópico? Nos encantaría contestarte; ¡simplemente pregunta en el area de preguntas abajo!
¿Quieres unirte a la conversación?
Sin publicaciones aún.