Arrays multidimensionales JavaScript

Arrays multidimensionales JavaScript

Los arrays multidimensionales son arrays de más de una dimensión, es decir, arrays dentro de arrays.

En este tutorial aprenderemos cómo trabajar con este tipo de arrays en JavaScript.

Si declaramos un array de 10 posiciones y en cada posición guardamos un array de 10 posiciones obtenemos un array bidimensional de 10 x 10, similar a una tabla de 10 filas por 10 columnas.

Declaración de arrays bidimensionales

Veamos un ejemplo sencillo de un array de 2 x 2

// Declaramos un array de 2 posiciones
var nuevoArray = new Array(2);
// En cada posición de array guardamos un nuevo array de 2 posiciones
nuevoArray[0] = new Array(2);
nuevoArray[1] = new Array(2);

Acceder a los datos de un array bidimensional

Para acceder a cada elemento de debemos indicar la posición en la que se encuentra. Si pensamos en filas y columnas indicaremos primero la fila y después la columna

// Accedemos a la fila 0, columna 1
var filaCeroUno = nuevoArray[0][1];

Veamos un ejemplo gráfico para entenderlo mejor. Declaramos un array de 2 x 2 en el que introduciremos números

// Declaramos el array bidimensional
var nuevoArray = new Array(2);
nuevoArray[0] = new Array(2);
nuevoArray[1] = new Array(2);
// Metemos un dato en cada posición
nuevoArray[0][0] = 25;
nuevoArray[0][1] = 12;
nuevoArray[1][0] = 34;
nuevoArray[1][1] = 6;

Este sería el resultado si lo vemos como una tabla

Tabla	Columna 0	Columna 1
Fila 0	Posición 0,0 = 25	Posición 0,1 = 12
Fila 1	Posición 1,0 = 34	Posición 1,1 = 6

Para acceder a las posiciones del array anterior lo haríamos de esta forma

var dato1 = nuevoArray[0][1];
// dato1 ahora vale 12
var dato2 = nuevoArray[1][1];
// dato2 vale 6

Aunque se pueden generar arrays bidimensionales de manera manual como hemos visto en los ejemplos, lo normal es hacerlo mediante bucles.

Veamos un ejemplo de creación de un array bidimensional de 10 x 10 dentro de un bucle for

// Declaración del array de 10 posiciones
var nuevoArray = new Array(10);
// Bucle para meter en cada posición otro array de 10
for ( var i = 0; i < 10; i ++ ) {
    nuevoArray[i] = new Array(10);
}

Recorrer array de 2 dimensiones

Si para recorrer un array de una posición utilizábamos un bucle for, haremos lo mismo para recorrer el array del ejemplo anterior usando dos bucles for anidados, uno dentro de otro.

// Bucle que recorre el primer array de 10 posiciones
for (var i=0; i<10; i++) {
    // Bucle que recorre el array que está en la posición i
    for(var j=0; j<10; j++) {
        // Pinta todas las posiciones del array
        document.write(nuevoArray[i][j]);
    }
}

En el ejemplo anterior sabemos que se trata de un array bidimensional de 10×10, pero puedo que no conozcamos el tamaño del array. Veamos un ejemplo utilizando el método length

// Bucle que recorre todas las posiciones del primer array
for(var i=0; i < nuevoArray.length; i++) {
    // Bucle que recorre el array que está en la posición i
    for(var j=0; j < nuevoArray[i].length; j++) {
        // Pinta todas las posiciones del array
        document.write(nuevoArray[i][j]);
    }
}

Vamos a ver el mismo ejemplo pero usando variables para las posiciones

// Bucle que recorre todas las posiciones del primer array
for(var i=0; i < nuevoArray.length; i++) {
    // Declaramos la posición actual en una variable
    var arrayActual = nuevoArray[i];
    // Bucle que recorre el array arrayActual
    for(var j=0; j < arrayActual.length; j++) {
        // Pinta todas las posiciones del array
        document.write(arrayActual[j]);
    }
}

Arrays multidimensionales

Los arrays multidimensionales, como su nombre indica, son arrays con múltiples dimensiones. Arrays dentro de arrays dentro de arrays……

Hasta ahora hemos visto arrays de 2 dimensiones, pero puede darse el caso que necesitemos utilizar un array de 3 dimensiones o más. En ese caso la estructura sigue siendo la misma

// Declaramos el primer array
var nuevoArray = new Array(10);
// Metemos un array en cada posición
for(var i=0; i<nuevoArray.length; i++) {
    nuevoArray[i] = new Array(10);
}
// Volvemos a recorrer los arrays para la 3ª dimensión
// Recorremos el primer array
for(var i=0; i < nuevoArray.length; i++) {
    // Recorremos el array de cada posición i
    for(var j=0; j < nuevoArray[i].length; j++) {
        //Creamos un array en cada posición
        nuevoArray[i][j] = new Array(10);
    }
}

Para recorrer el array anterior de 3 dimensiones haríamos lo siguiente

// Recorremos el primer array
for(var i=0; i < nuevoArray.length; i++) {
    // Recorremos el array de cada posición i
    for(var j=0; j < nuevoArray[i].length; j++) {
        // Recorremos el array de cada posición i j
        for(var k=0; k < nuevoArray[i][j].length; k++) {
            // Pinta todas las posiciones del array
            document.write(nuevoArray[i][j][k]);
        }
    }
}

Se puede complicar todo lo que queramos pero la estructura sigue siendo la misma. En el ejemplo anterior, si queremos acceder a una posición en concreto lo podemos hacer directamente

// Indicando los índices de cada dimensión
var dato = nuevoArray[i][j][k];
// Obtenemos el valor de la posición concreta del array
var dato = nuevoArray[3][6][0];

Ejemplo práctico

Para finalizar vamos a crear un ejemplo práctico sobre todo lo que hemos aprendido. Crearemos un array de 3 dimensiones para gestionar los datos de una agenda

Ejemplo agenda

Vamos a crear una agenda para todo un año. Para el año crearemos un array de 12 posiciones para los meses. En cada posición meteremos un array de 31 posiciones para los días y en cada uno meteremos un array de 24 posiciones para las horas. Por último en cada hora podremos meter una nota.

Necesitamos entonces un array de 3 dimensiones. La primera para los meses, la segunda para los días y la tercera para las horas.

// Declaramos el array para el año
var agenda = new Array(12);
// En cada posicón meteremos los días
for(var i=0; i < agenda.length; i++) {
    agenda[i] = new Array(31);
    // En cada posición meteremos las horas
    for(var j=0; j < agenda[i].length; j++) {
        agenda[i][j] = new Array(24);
    }
}

Ya hemos creado el array de 3 dimensiones vacío. Si intentamos acceder a una de sus posiciones, el resultado será undefined, porque aun no hemos añadido ninguna nota.

Pues vamos a añadir alguna. Hay que tener en cuenta que si creamos un array de 12 posiciones para los meses, lo que creamos es un array que va desde 0 hasta 11, y pasa lo mismo con el de los días, que irá desde 0 hasta 30. Entonces a la hora de introducir los datos vamos a tener que restarle 1 a los meses y a los días

// Metiendo datos en la agenda 
// Vamos a meter (Concierto, mes 4, día 23, hora 19)
//Tenemos que restarle 1 al mes y al día
agenda[3][22][18] = "Concierto"; 
// Vamos a añadir (Cita médica el mes 6, día 11 a las 11)
agenda[5][10][11] = "Cita médica";

Para acceder a un dato de la agenda realizaremos la misma operación

// Queremos saber que evento hay el mes 6, día 11 a las 11 horas
// Igual que antes tenemos que restar 1 al mes y al día
var evento = agenda[5][10][11];
// El evento será Cita médica

Imaginemos que queremos imprimir toda la agenda. Realizaríamos algo como lo siguiente

for(var i=0; i<agenda.length; i++) {
    for(var j=0; j < agenda[i].length; j++) {
        for(var k=0; k < agenda[i][j].length; k++) {
            //Ahora le sumaremos 1 al mes y al día para que lo muestre correctamente.
            document.write("Evento: " + agenda[i][j][k] + ", Mes: " + (i+1) + ", Día: " + (j+1)+ ", Hora: " + k +"<br>");
        }
    }
}

El resultado sería una línea por cada evento y, si alguno está sin definir mostrará undefined.

Más tutoriales de JavaScript