Listado completo de tutoriales

Array: distintas formas de recorrerlo


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>
  var vec=[10,20,30,40,50];
  var f;
  for(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>
  var vec=[10,20,30,40,50];
  for(var indice in vec)
  {
    document.write(indice);
    document.write(vec[indice]+'-');
  }
</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(var indice in vec)
  {
    document.write(indice);
    document.write(vec[indice]+'-');
  }

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>
  var vec=[10,,30,,50];
  document.write('Recorredo del vector con un for clásico<br>');
  var f;
  for(f=0;f<vec.length;f++)
  {
    document.write(vec[f]+'-');
  }
  document.write('<br>');
  document.write('Recorredo del vector con un for in<br>');
  for(var 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>
    var 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>');
    })

Retornar