Tutorial de JS For Loop: cómo iterar sobre una matriz en JavaScript

Este artículo le proporcionará una comprensión sólida de exactamente cómo iterar sobre una estructura de datos Array en JavaScript.

Ya sea que esté comenzando a aprender JavaScript o esté aquí para un repaso, habrá un valor para usted de cualquier manera. Este artículo lo guiará a través de uno de los conceptos de JavaScript más utilizados.

¿Qué es una matriz?

let cars = ["Tesla", "Ferrari", "Lamborghini", "Audi"];

Arriba hay una matriz de JavaScript que se utiliza para almacenar varios valores. Esta es una de las formas más simples de una matriz. Contiene 4 "elementos" dentro de la matriz, todas las cadenas. Y como puede ver, cada elemento está separado por una coma.

Esta matriz de ejemplo contiene diferentes marcas de automóviles y se puede hacer referencia a ella con la carsvariable.

Hay varias formas en las que podemos iterar sobre esta matriz. JavaScript es increíblemente rico en funciones, por lo que tenemos el lujo de elegir la mejor manera de resolver nuestro problema.

Así es como abordaremos la iteración sobre matrices en JavaScript:

1. Resalte 5 métodos comunes para iterar sobre una matriz
2. Muestre algunas ideas sobre cada método iterativo
3. ¡Proporcione también algún código que pueda usar para probarlo!

Tradicional para bucle

¿Qué es un bucle for?

Wikipedia define un bucle For como:

“En informática, un bucle for (o simplemente bucle for ) es una declaración de flujo de control para especificar la iteración, lo que permite que el código se ejecute repetidamente”.

Un bucle for es una forma de ejecutar código repetidamente. En lugar de escribir console.log(“hi”)cinco veces, puede envolverlo dentro de un bucle for.

En este primer ejemplo, aprenderemos cómo iterar sobre la matriz de autos que ha visto anteriormente e imprimir cada elemento. El iterador, o contador, comenzará en el primer índice "Tesla" y terminará en el último "Audi". Se mueve a través de la matriz e imprime un elemento a la vez.

let cars = ["Tesla", "Ferrari", "Lamborghini", "Audi"]; for(let i = 0; i < cars.length; i++) { console.log(cars[i]); }

Salida:

Tesla Ferrari Lamborghini Audi

Buceando en el código, pasamos tres opciones al bucle for

• la variable iteradora - let i = 0;
• donde el iterador debería detenerse - i < card.length
• cuánto incrementar el iterador en cada bucle - i++

Este ciclo comienza en 0, aumenta la variable en uno en cada ciclo y se detiene cuando golpeamos el último elemento de la matriz.

El beneficio clave del bucle for tradicional es que tiene más control.

Es posible acceder a diferentes elementos dentro de la matriz o iterar a través de la matriz de una manera sofisticada para resolver un problema complejo. Por ejemplo, se puede omitir todos los demás elementos de la matriz con bastante facilidad con el bucle for tradicional.

El método forEach

¿Qué es el método forEach?

El forEachmétodo se usa para ejecutar una función para cada elemento de su matriz. Este método es una gran elección si la longitud de la matriz es "desconocida" o se garantiza que cambiará. Este método solo se puede utilizar con matrices, conjuntos y mapas.

const amounts = [65, 44, 12, 4]; let doubledAmounts = []; amounts.forEach(item => { doubledAmounts.push(item * 2); }) console.log(doubledAmounts);

El mayor beneficio de un forEachbucle es poder acceder a cada elemento, incluso si es probable que su matriz aumente de tamaño. Es una solución escalable para muchos casos de uso y es más fácil de leer y comprender que un bucle for tradicional porque sabemos que iteraremos sobre cada elemento exactamente una vez.

Mientras bucle

¿Qué es un bucle while?

Wikipedia define un bucle while como:

“Un ciclo while es una declaración de flujo de control que permite que el código se ejecute repetidamente en función de una condición booleana determinada. El tiempo de bucle puede ser pensado como una repetición de if. "

Un whilebucle es una forma de ejecutar código repetidamente para verificar si una condición es verdadera o falsa. Entonces, en lugar de usar un bucle for, con una instrucción if anidada, podemos usar un bucle while. O, si no podemos encontrar la longitud de la matriz, los bucles while son una excelente opción.

El ciclo while suele estar controlado por un contador. En el siguiente ejemplo, mostramos un ciclo while básico que itera a través de una matriz. La clave es tener control sobre el ciclo while que está creando.

Ejemplo de bucle while (bueno):

let i = 0 while (i < 5) { console.log(i); i++; }

Salida :

0 1 2 3 4

La declaración if del bucle while es i < 5, o se dice en voz alta, "i es menor que 5". La variable ise incrementa cada vez que se ejecuta el ciclo.

En términos simples, esto significa que se agrega 1 a la variable icada vez que el ciclo realiza una iteración completa. En la primera iteración, ies igual a 0 e imprimimos "0" en la consola.

El mayor riesgo de usar un bucle while es escribir una condición que nunca se cumple.

Esto ocurre con frecuencia en escenarios del mundo real, donde alguien escribe un ciclo while pero se olvida de probar su ciclo e introduce un ciclo infinito en la base del código.

Un bucle infinito ocurre cuando la condición nunca se cumple y el bucle sigue funcionando para siempre. Esto a menudo da como resultado cambios importantes, que luego hacen que toda la aplicación de software se rompa y deje de funcionar.

Advertencia: no ejecute este código.

Ejemplo de bucle infinito (malo):

let i = 0 while (i < 5) { console.log(i); }

Salida:

Los resultados pueden variar.

El bucle Do while

¿Qué es un bucle do while?

Wikipedia define un ciclo Do-While como:

"Un bucle do while es una declaración de flujo de control que ejecuta un bloque de código al menos una vez , y luego ejecuta repetidamente el bloque, o no, dependiendo de una condición booleana dada al final del bloque".

Un bucle do-while es casi idéntico a un bucle while, sin embargo, hay una diferencia clave. El ciclo do-while garantizará que siempre se ejecute el bloque de código al menos una vez antes de que se verifique la instrucción if.

A menudo pienso en él como un bucle while inverso, y casi nunca los uso. Sin embargo, son útiles en algunos escenarios muy específicos.

Ejemplo de Do-Loop (bueno):

let i = 0; do { console.log(i); i++; } while (i < 5);

Salida :

0 1 2 3 4

El mayor riesgo de usar un do-loop es escribir una condición que nunca se cumple. (Igual que con un bucle while).

Advertencia: no ejecute este código.

Ejemplo de bucle infinito (malo):

let i = 0; do { console.log(i); } while (i < 5);

Salida :

Los resultados pueden variar.

¿Quiere llevar sus conocimientos de JavaScript al siguiente nivel? Conozca map, que es lo mismo que forEach, pero con un bono !! ?

Ejemplo de BONUS (iteración con mapa)

¿Qué es el mapa?

Wikipedia define un mapa como:

“En muchos lenguajes de programación, mapa es el nombre de una función de orden superior que aplica una función determinada a cada elemento de un funtor, por ejemplo, una lista, que devuelve una lista de resultados en el mismo orden. A menudo se le llama aplicar a todos cuando se considera en forma funcional ".

How does it work? The map function in JavaScript applies a function to every element inside the array. Please take a moment to re-read that sentence.

Afterwards, the map function returns a new array with the results of applying a function to every element in the array.

Map example:

const array = [1, 1, 1, 1]; // pass a function to map const results = array.map(x => x * 2); console.log(results);

Output:

[2,2,2,2]

We have applied the map function to the array containing four 1's. The map function then multiplied each element by 2, i.e., x * 2, and returned a new array. The new array was then stored in the results variable.

By viewing our output, we can see this worked successfully. Every element in the array has been multiplied by 2. This method can be used as a replacement to a loop in some cases, and is incredibly powerful.

Conclusion

Well done! You have learned five different ways to iterate over an array in JavaScript. These are the fundamental building blocks that will set you up for success in your JavaScript programming journey.

You have also been exposed to an advanced concept, map, which is used often in large-scale software applications.

So, I’ll leave you with this: how are you going to use arrays in your projects? And which iteration method did you find most exciting?  

Thanks for reading!

If you liked my article, please follow me and/or send me a message!  

Twitter • Medium • Github