Tutorial de JavaScript : Conceptos

Para visitar todas las componentes de un vector hemos visto hasta ahora el ciclo repetitivo for:

<!DOCTYPE html>
<html>

<head>
    <title>Ejemplo de JavaScript</title>
    <meta charset="UTF-8">
</head>

<body>

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

</body>

</html>

Javascript cuenta con otra variante de for(llamada for in):

<!DOCTYPE html>
<html>

<head>
    <title>Ejemplo de JavaScript</title>
    <meta charset="UTF-8">
</head>

<body>

    <script>
        let vec = [10, 20, 30, 40, 50];
        for (let indice in vec) {
            document.write('indice:' + indice);
            document.write(' valor=' + vec[indice] + '<br>');
        }
    </script>

</body>

</html>

El for se repite tantas veces como elementos tiene el vector y en cada vuelta del ciclo for la variable indice almacena el subíndice de la componente (tengamos en cuenta que en este ejemplo definimos el vector con los valores 10,20,30,40,50 y se almacenaron en los subíndices 0,1,2,3,4) es decir la variable indice almacenará en la primer vuelta el valor 0, en la segunda el valor 1 y así sucesivamente:

        for (let indice in vec) {
            document.write('indice:' + indice);
            document.write(' valor=' + vec[indice] + '<br>');
        }

Si tenemos un vector no denso (es decir que tiene algunas posiciones vacías el empleo del for in tiene un resultado distinto al empleo del for clásico):

<!DOCTYPE html>
<html>

<head>
    <title>Ejemplo de JavaScript</title>
    <meta charset="UTF-8">
</head>

<body>

    <script>
        let vec = [10, , 30, , 50];
        document.write('Recorredo del vector con un for clásico<br>');
        for (let f = 0; f < vec.length; f++) {
            document.write(vec[f] + '-');
        }
        document.write('<br>');
        document.write('Recorredo del vector con un for in<br>');
        for (let indice in vec) {
            document.write(vec[indice] + '-');
        }
    </script>

</body>

</html>

El resultado de la ejecución del programa es:

Recorredo del vector con un for clásico
10-undefined-30-undefined-50-
Recorredo del vector con un for in
10-30-50-

Como podemos comprobar con el for in no se acceden a componentes inexistentes.

Es más común utilizar el método 'forEach' de la clase Array para recorrer un arreglo en JavaScript:

<!DOCTYPE html>
<html>

<head>
    <title>Ejemplo de JavaScript</title>
    <meta charset="UTF-8">
</head>

<body>

    <script>
        let vec = [10, 20, 30, 40, 50];
        vec.forEach(function(componente, indice) {
            document.write('Posición:' + indice + ' = ');
            document.write(componente + '<br>');
        })
    </script>

</body>

</html>

Como vemos llamamos al método 'forEach' y le pasamos una función anónima que contiene dos parámetros que recibirán el valor almacenado en la componente y el índice que se está procesando:

        vec.forEach(function(componente, indice) {
            document.write('Posición:' + indice + ' = ');
            document.write(componente + '<br>');
        })

Array: distintas formas de recorrerlo

Retornar