Parte 7: Arrays

7.1 Arrays en Javascript

Qué son los arrays, para qué sirven y cómo utilizarlos. Diversas formas de crearlos, asi como definir y acceder a sus valores.

El Array es como una variable donde podemos introducir varios valores. Éstos nos permiten guardar varias variables y acceder a ellas de manera independiente, para ello utilizamos un índice (numero) que refiere a un compartimento o posición concreta.

7.1.1 Creación de Arrays

El primer paso para utilizar un array es crearlo. Para ello utilizamos una sentencia para crear un objeto array:

var miArray = new Array()

También podemos crear el array Javascript especificando el número de compartimentos que va a tener.

var miArray = new Array(10)

Indicamos que el array va a tener 10 posiciones, es decir, 10 casillas donde guardar datos.

Tanto se indique o no el número de casillas del array javascript, podemos introducir cualquier dato:

miArray[0] = 290

miArray[1] = 97

miArray[2] = 127

Se introducen indicando entre corchetes el índice de la posición donde queríamos guardar el dato. En este caso introducimos 290 en la posición 0, 97 en la posición 1  y 127 en la 2.

Los arrays en Javascript empiezan siempre en la posición 0, para recoger datos en un array lo hacemos igual. poniendo entre corchetes el índice de la posición a la que queremos acceder:

miArray[0] = 155

miArray[1] = 4

miArray[2] = 499

for (i=0;i<3;i++){

     document.write("Posición " + i + " del array: " + miArray[i])

     document.write("<br>")

}

Hemos creado un array con tres posiciones, luego hemos introducido un valor en cada una de las posiciones del array y finalmente las hemos impreso.

7.1.2 Tipos de datos

En Javascript podemos guardar distintos tipos de datos en las casillas de un mismo array.

miArray[0] = "Hola" 

miArray[1] = "a" 

miArray[2] = "todos"

miArray[0] = "desarrolloweb.com" 

miArray[1] = 1275 

miArray[1] = 0.78 

miArray[2] = true

7.1.3 Declaración e inicialización resumida de Arrays

var arrayRapido = [12,45,"array inicializado en su declaración"]

Es lo mismo que haber declarado el array con la función Array() y luego haberle cargado los valores uno a uno.

7.2 Longitud de los arrays

Los arrays además de almacenar el valor de las casillas, también almacenan el número de posiciones que tienen, mediante la propiedad length.

Para acceder a una propiedad de un objeto se ha de utilizar el operador punto.

var miArray = new Array() 

miArray[0] = 155 

miArray[1] = 499 

miArray[2] = 65 

document.write("Longitud del array: " + miArray.length)

Este código imprimiría en pantalla el número de posiciones del array, que en este caso es 3. Recordamos que un array con 3 posiciones abarca desde la posición 0 a la 2.

for (i=0;i<miArray.length;i++){ 

     document.write(miArray[i]) 

}

Vamos a crear un array con 2 posiciones y rellenar su valor. Posteriormente introduciremos otro valor en otra posición del array que denominaremos con el número 5. Finalmente imprimiremos todas las posiciones del array:

var miArray = new Array(2) 

miArray[0] = "Colombia" 

miArray[1] = "Estados Unidos" 

miArray[5] = "Brasil" 

for (i=0;i<miArray.length;i++){ 

  document.write("Posición " + i + " del array: " + miArray[i])

Se puede apreciar que hacemos un recorrido por el array desde 0 hasta el número de posiciones del array (indicado por la propiedad length). Vemos en el ejemplo como en el recorrido vamos imprimiendo el número de la posición seguido del contenido del array:

Posición 0 del array: Colombia 

Posición 1 del array: Estados Unidos 

Posición 2 del array: null 

Posición 3 del array: null 

Posición 4 del array: null 

Posición 5 del array: Brasil

El número de posiciones es 6, de la 0 a la 5. Lo que ha ocurrido es que al introducir un dato en la posición 5, todas las casillas que no estaban creadas hasta la quinta se crean también.

7.2 Arrays multidimensionales

Un array multidimensional es una estructura de datos que guarda más valores por cada posición, es decir, es como si los elementos del array fueran a su vez otros arrays.

En este ejemplo vamos a crear un array de dos dimensiones donde tendremos por un lado ciudades y por el otro la temperatura media que hace en cada una durante de los meses de invierno:

var temperaturas_medias_ciudad0 = new Array(3) 

temperaturas_medias_ciudad0[0] = 12

temperaturas_medias_ciudad0[1] = 10 

temperaturas_medias_ciudad0[2] = 11 

var temperaturas_medias_ciudad1 = new Array (3) 

temperaturas_medias_ciudad1[0] = 5 

temperaturas_medias_ciudad1[1] = 0 

temperaturas_medias_ciudad1[2] = 2 

var temperaturas_medias_ciudad2 = new Array (3) 

temperaturas_medias_ciudad2[0] = 10 

temperaturas_medias_ciudad2[1] = 8 

temperaturas_medias_ciudad2[2] = 10

Con las anteriores líneas hemos creado tres arrays de 1 dimensión y tres elementos, como los que ya conocíamos. Ahora crearemos un nuevo array de tres elementos e introduciremos dentro de cada una de sus casillas los arrays creados anteriormente, con lo que tendremos un array de arrays, es decir, un array de 2 dimensiones. 

var temperaturas_cuidades = new Array (3) 

temperaturas_cuidades[0] = temperaturas_medias_ciudad0 

temperaturas_cuidades[1] = temperaturas_medias_ciudad1 

temperaturas_cuidades[2] = temperaturas_medias_ciudad2

Para introducir el array entero hacemos referencia al mismo sin paréntesis ni corchetes, sólo con su nombre. El array temperaturas_cuidades es nuestro array bidimensinal.

Para realizar un recorrido por un array de dos dimensiones tenemos que hacer un bucle que pase por cada una de las casillas del array bidimensional y dentro de éstas hacer un nuevo recorrido para cada una de sus casillas internas. Es decir, un recorrido por un array dentro de otro. 

Para hacer este recorrido necesitamos colocar un bucle dentro de otro, lo que se llama un bucle anidado. En este ejemplo vamos a meter un bucle FOR dentro de otro. Además, vamos a escribir los resultados en una tabla, lo que complicará un poco el script, pero así podremos ver cómo construir una tabla desde Javascript a medida que realizamos el recorrido anidado al bucle.

document.write("<table width=200 border=1 cellpadding=1 cellspacing=1>"); 

for (i=0;i<temperaturas_cuidades.length;i++){ 

   document.write("<tr>") 

   document.write("<td><b>Ciudad " + i + "</b></td>") 

   for (j=0;j<temperaturas_cuidades[i].length;j++){ 

   document.write("<td>" + temperaturas_cuidades[i][j] + "</td>") 

 } 

   document.write("</tr>") 

} 

document.write("</table>")

La primera acción consiste en escribir la cabecera de la tabla, es decir, la etiqueta <TABLE> junto con sus atributos. Con el primer bucle realizamos un recorrido a la primera dimensión del array y utilizamos la variable i para llevar la cuenta de la posición actual. Por cada iteración de este bucle escribimos una fila y para empezar la fila abrimos la etiqueta <TR>.

Además, escribimos en una casilla el numero de la ciudad que estamos recorriendo en ese momento. Posteriormente ponemos otro bucle que va recorriendo cada una de las casillas del array en su segunda dimensión y escribimos la temperatura de la ciudad actual en cada uno de los meses, dentro de su etiqueta <TD>.

7.3.1 Inicialización de arrays

Para introducir valores a un array se hace igual, pero poniendo entre los paréntesis los valores con los que deseamos rellenar las casillas separados por coma.

var diasSemana = new Array("Lunes","Martes","Miércoles,","Jueves","Viernes","Sábado","Domingo")

Ahora vamos a ver algo más complicado, se trata de declarar el array bidimensional que utilizamos antes para las temperaturas de las ciudades en los meses en una sola línea, introduciendo los valores a la vez. 


var temperaturas_cuidades = new Array(new Array (12,10,11), new Array(5,0,2),new Array(10,8,10))

En el ejemplo introducimos en cada casilla del array otro array que tiene como valores las temperaturas de una ciudad en cada mes.

Javascript todavía tiene una manera más resumida que es la que se explica en el primer apartado, simplemente escribimos entre corchetes los datos del array que estamos creando:

var arrayMuchasDimensiones = [1, ["hola", "que", "tal", ["estas", "estamos", "estoy"], ["bien", "mal"], "acabo"], 2, 5];

En este ejemplo hemos creado un array muy poco uniforme, porque tiene casillas con contenido de simples enteros y otras con contenido de cadena y otras que son otros arrays. Podríamos acceder a algunas de sus casillas y mostrar sus valores de esta manera:

alert (arrayMuchasDimensiones[0])
alert (arrayMuchasDimensiones[1][2])
alert (arrayMuchasDimensiones[1][3][1])