Arrays multidimensionales

  • Por
Vemos qué son los arrays multidimensionales (arrays de más de una dimensión) y cómo utilizarlos. Además explicamos cómo inicializar arrays en su declaración.
Como estamos viendo, los arrays son bastante importantes en Javascript y también en la mayoría de los lenguajes de programación. En concreto ya hemos aprendido a crear arrays y utilizarlos en artículos anteriores del Manual de Javascript. Pero aun nos quedan algunas cosas importantes que explicar, como son los arrays de varias dimensiones.

Los arrays multidimensionales son un estructuras de datos que almacenan los valores en más de una dimensión. Los arrays que hemos visto hasta ahora almacenan valores en una dimensión, por eso para acceder a las posiciones utilizamos tan solo un índice. Los arrays de 2 dimensiones guardan sus valores, por decirlo de alguna manera, en filas y columnas y por ello necesitaremos dos índices para acceder a cada una de sus posiciones.

Dicho de otro modo, un array multidimensional es como un contenedor que guardara más valores para cada posición, es decir, como si los elementos del array fueran a su vez otros arrays.

En Javascript no existe un auténtico objeto array-multidimensinal. Para utilizar estas estructuras podremos definir arrays que donde en cada una de sus posiciones habrá otro array. En nuestros programas podremos utilizar arrays de cualquier dimensión, veremos a continuación cómo trabajar con arrays de dos dimensiones, que serán los más comunes.

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


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

También es interesante ver cómo se realiza un recorrido por un array de dos dimensiones. Para ello 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.

El método para hacer un recorrido dentro de otro es 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>")


Este script resulta un poco más complejo que los vistos anteriormente. 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>. Una vez que acaba el segundo bucle se han impreso las tres temperaturas y por lo tanto la fila está terminada. El primer bucle continúa repitiéndose hasta que todas las ciudades están impresas y una vez terminado cerramos la tabla.

Podemos ver el ejemplo en marcha y examinar el código del script entero.

Inicialización de arrays

Para terminar con el tema de los arrays vamos a ver una manera de inicializar sus valores a la vez que lo declaramos, así podemos realizar de una manera más rápida el proceso de introducir valores en cada una de las posiciones del array.

El método normal de crear un array vimos que era a través del objeto Array, poniendo entre paréntesis el número de casillas del array o no poniendo nada, de modo que el array se crea sin ninguna posición. 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. Veámoslo con un ejemplo que crea un array con los nombres de los días de la semana.

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

El array se crea con 7 casillas, de la 0 a la 6 y en cada casilla se escribe el dia de la semana correspondiente (Entre comillas porque es un texto).

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 la que acabamos de ver, que explicamos en el primer artículo donde tratamos los arrays. Para ello simplemente escribimos entre corchetes los datos del array que estamos creando. Para acabar vamos a mostrar un ejemplo sobre cómo utilizar esta sintaxis para declarar arrays de más de una dimensión.

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])

Con esto hemos llegado al fin de los artículos que tratan sobre arrays en Javascript y ahora podemos continuar con una pequeña pausa y consejos que vendrán bien para mejorar nuestra relación con este lenguaje de programación.

Autor

Miguel Angel Álvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

José Antonio Echagüe Burgos

07/1/2002
A propósito de los arrays, adaptando un array que he visto que escribe el día del mes, el mes y el año, he tratado de derarrollar un array que escriba el día de la semana y tras mucho darle vueltas sólo he conseguido lo siguiente para que se escriban correctamente todos los días de la semana::

<SCRIPT language="JavaScript">
var diasemana=new Array("Domingo");
diasemana[1]="Lunes";
diasemana[2]="Martes";
diasemana[3]="Miércoles";
diasemana[4]="Jueves";
diasemana[5]="Viernes";
diasemana[6]="Sábado";
diasemana[7]="Domingo";
var time=new Date();
var ldiasemana=diasemana[time.getDay()];
document.write(ldiasemana);
</SCRIPT>

Si escribo el array de la forma "ortodoxa", es decir:

<SCRIPT language="JavaScript">
var diasemana=new Array(7);
diasemana[0]="Lunes";
diasemana[1]="Martes";
diasemana[2]="Miércoles";
diasemana[3]="Jueves";
diasemana[4]="Viernes";
diasemana[5]="Sábado";
diasemana[6]="Domingo";
var time=new Date();
var ldiasemana=diasemana[time.getDay()];
document.write(ldiasemana);
</SCRIPT>

se escriben correctamente todos los días de la semana excepto el domingo, en cuyo caso se escribe "undefined" ¿Por qué?.

RESPUESTA: Porque el método getDay() cuando estamos en domingo devuelve 0, con lo que en el primer array, funciona bien, porque el "Domingo" lo tienes guardado en la posición 0. En el segundo array tienes en la posición 0 a "Lunes", por eso te funciona mal. A mi lo que me sale en domingo es "Lunes" y no Undefined. (Undefined significa que estas accediendo a una posición del array donde no hay nada.

El script original del cual tomé la idea para escribir los días de la semana automáticamente, es el siguiente, por si alguien está interesado:

<SCRIPT LANGUAGE="JavaScript1.2">
<!-- Begin
var months=new Array(13);
months[1]="Enero";
months[2]="Febrero";
months[3]="Marzo";
months[4]="Abril";
months[5]="Mayo";
months[6]="Junio";
months[7]="Julio";
months[8]="Agosto";
months[9]="Septiembre";
months[10]="Octubre";
months[11]="Noviembre";
months[12]="Diciembre";
var time=new Date();
var lmonth=months[time.getMonth() + 1];
var date=time.getDate();
var year=time.getYear();
if (year < 2000) // Y2K Fix, Isaac Powell
year = year + 1900; // http://onyx.idbsu.edu/~ipowell
document.write(+ date + " de ");
document.write(lmonth + " de " + year);
// End -->
</SCRIPT>

También estaría muy agradecido si alguien me pudiese indicar otro array para escribir automáticamente el día de la semana.

RESPUESTA: Yo hubiese creado el array así.

var diasemana=new Array(7);
diasemana[0]="Domingo";
diasemana[1]="Lunes";
diasemana[2]="Martes";
diasemana[3]="Miércoles";
diasemana[4]="Jueves";
diasemana[5]="Viernes";
diasemana[6]="Sábado";

Saludos, José Antonio Echagüe.

Manuel

19/11/2009
ayuda
como hago para crear un array que voy a crear en una funcion pero q sirva para las demas funciones? el array que creo yo lo hago en una funcion (no un main) y de esa funcion que salga al main para yo poder llamarlo en otra funcion.

Paulo McNally

29/12/2009
En php
Para ver la estructura de un array en php se hace de esta manera:

<?php
echo print_r($myarray);
?>

Saludos

mario alfaro

15/4/2010
RESPUESTA
Te sale undefined debido a que cuando creas el primer array inicias el lunes en [1]

La cuenta deberia iniciar en [0]

Entonces a la hora de recorrer el array en el campo [0] no hay ningun valor, entonces javascript coloca undefied

Jailbreak

30/7/2010
Simplicidad
Me parece mucho mas sencillo la declaración e introducción de los valores como se hizo en la ultima parte es mas claro y no tan largo ademas permite maquetear la matriz mentalmente ya uqe visualmente se parece.

Bachmann

13/12/2011
Arrays
Hola:
Estoy siguiendo un curso de java script y la verdad me exprime lo que me queda del cerebro. Mi pregunta es siguiendo el ejemplo de los dias de la semana y meses.
Tengo un ejercicio donde tengo que elejir un dia de la semana,un mes del año y un idioma de tres.
Me podrian dar algunas pautas,para resolverlo?.
Gracias

Luis Alberto DArdis

20/11/2013
UNA COMA DE ERROR...
var diasSemana = new Array(&quot;Lunes&quot;,&quot;Martes&quot;,&quot;Miércoles,&quot;,&quot;Jueves&quot;,&quot;Viernes&quot;,&quot;Sábado&quot;,&quot;Domingo&quot;)<br />
<br />
Estimado amigo Miguel, sin querer se te corrió una coma en miércoles. salu2.<br />
<br />
var diasSemana = new Array(&quot;Lunes&quot;,&quot;Martes&quot;,&quot;Miércoles&quot;,&quot;Jueves&quot;,&quot;Viernes&quot;,&quot;Sábado&quot;,&quot;Domingo&quot;)

alvaro

12/12/2014
muy bueno
Muy buen explicado todo el contenido.
Enhorabuena, me alegra que haya gente que invierta su tiempo en difundir conocimiento.
Seria mas sencillo si en el ejemplo llamaras a ( temperaturas_medias_ciudad0 ) ( temperaturas_medias_barcelona ) para que se entienda mejor.
un saludo.