Tutorial de JavaScript : Conceptos

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

<html>
<head>
</head>
<body>

<script type="text/javascript">
  
  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):

<html>
<head>
</head>
<body>

<script type="text/javascript">
  
  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):

<html>
<head>
</head>
<body>

<script type="text/javascript">
  
  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.

Array: distintas formas de recorrerlo

Retornar