Distintas formas de recorrer un Array y el método toString

Para visitar todas las componentes de un vector hemos visto hasta ahora el ciclo repetitivo for veremos otras formas y el método toString() devuelve una cadena con todos los valores de un array, separados por comas.

En este artículo vas a ver 5 formas distintas que permiten recorrer un array con JavaScript. Un loop o bucle en cualquier lenguaje de programación usualmente es código que se repite una y otra vez hasta que cierta condición se cumple.

Recorrer un array con JavaScript usando for

Inicializamos la variable i en 0, se ejecutará hasta que i tenga un valor menor que 10 y se incrementará de 1 en 1.

En cada iteración, imprimo el valor de la variable en la consola.

La ventaja que tiene el for es que recorre cierta cantidad de código hasta que la condición se cumpla y puede ser muy útil cuando estás leyendo registros de una base de datos y, fácilmente puedes limitar la cantidad de registros a procesar.

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de JavaScript</title>
<meta charset="UTF-8">
</head>
<body>

<script>
var vec=[10,20,30,40,50];
var f;
for(f=0;f<vec.length;f++)
{
document.write(vec[f]+'-');
}
</script>

</body>
</html>

Ver ejemplo anterior

Recorrer un array con JavaScript usando while

El while también se puede utilizar para recorrer un arreglo o repetir código en x ocasiones.
Puedes crear una variable que hará de contador. Entre paréntesis puedes poner la condición que se comprobará en cada iteración y que determinará el final del bucle.

En el caso del ejemplo, se estará ejecutando hasta que el valor de i sea menor que 10.
Fíjate que el incremento de la variable i se ejecuta justo después del código que quieres repetir.

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de JavaScript</title>
<meta charset="UTF-8">
</head>
<body>

<script>
var vec=[10,20,30,40,50,60,70,80,90,100];
let i = 0;
while (i < 10) {

document.write(vec[i]+'-');
i++;
}
</script>

</body>
</html>

Ver ejemplo anterior

Recorrer un array usando do while

Con el do… while el código al menos se va a ejecutar una vez sin importar si la condición se cumple o no.
El código es secuencial. Primero se imprime el valor de i en la consola, se incrementa la variable y, finalmente, se comprueba la condición.

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de JavaScript</title>
<meta charset="UTF-8">
</head>
<body>

<script>
var vec=[10,20,30,40,50,60,70,80,90,100];
let i = 0;
let i = 0;
do {

document.write(vec[i]+'-');
i++;
} while (i < 10);
</script>

</body>
</html>

Ver ejemplo anterior

Recorrer un array usando forEach

Otra forma de recorrer un arreglo es utilizando lo que se conoce como un forEach.
He creado un array con las comidas del día y las estoy iterando con forEach para mostrar su índice y valor en consola.
Esta sintaxis se ve muy limpia y, por eso, es una de mis preferidas para usarla en mis proyectos.

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de JavaScript</title>
<meta charset="UTF-8">
</head>
<body>

<script>
var comidas = ['Desayunar', 'Almorzar', 'Comer', 'Merendar', 'Cenar'];
comidas.forEach(function(comida, index) {
document.write(`${index} : ${comida}`);
});
</script>

</body>
</html>

Ver ejemplo anterior

Recorrer un array usando map

Otra forma de recorrer un arreglo es utilizando lo que se conoce como map que permite recorrer un arreglo de objetos, En el código anterior, he creado un arreglo con 5 objetos que estoy recorriendo con map.
Si te fijas en el código, podrás darte cuenta que esta forma de iteración, a diferencia del for, foreach o while, en este caso, se almacena la información para luego extraerla. No se extrae la información directamente.

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de JavaScript</title>
<meta charset="UTF-8">
</head>
<body>

<script>
const comidas = [
{id: 1, momento: 'Desayuno'},
{id: 2, momento: 'Almuerzo'},
{id: 3, momento: 'Comida'},
{id: 4, momento: 'Merienda'},
{id: 5, momento: 'Cena'},
];

const momentoComida = comidas.map(function(comida) {
return comida.momento;
});
document.write(momentoComida);

</script>

</body>
</html>

Ver ejemplo anterior

El método toString del objeto Array retorna un string con todos los elementos del vector separados por coma.

Problema

Crear un vector con 10 elementos con valores aleatorios comprendidos entre 0 y 1000. Luego copiar el contenido del vector a un string con los valores de las componentes separados por coma:

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de JavaScript</title>
<meta charset="UTF-8">
</head>
<body>

<script>
var vec=new Array(10);
var f;
for(f=0;f<vec.length;f++)
{
vec[f]=parseInt(Math.random()*1001);
}
var cadena=vec.toString();
document.write(cadena);
</script>

</body>
</html>

Ver ejemplo anterior

El resultado de la ejecución del programa es (como son valores aleatorios es casi seguro que tendrá una lista de 10 valores distintos a estos):

348,860,430,568,428,692,281,159,573,284

Como podemos observar para copiar todas las componentes del vector en un string y que queden separadas por coma llamamos al método toString():

var cadena=vec.toString();