Arrays multidimensionales JavaScript

Arrays multidimensionales JavaScript

Arrays multidimensionales JavaScript

En este tutorial aprenderemos cómo trabajar con arrays de más de una dimensión en JavaScript. Un array de dos dimensiones no es más que un array dentro de otro, es decir, un array de arrays.

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 y 10 columnas.

Cómo declaramos un array bidimensional

Veamos un ejemplo sencillo de un array de 2 X 2

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

Acceder a los datos de un array bidimensional

Para acceder a cada elemento 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
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;

El resultado sería algo como:

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

Si queremos acceder al array anterior lo haríamos de este modo

var dato = nuevoArray[0][1];
//dato ahora vale 12

Aunque se pueden crear arrays bidimensionales de manera manual como en el ejemplo anterior, lo normal es hacerlo mediante bucles. Veamos un ejemplo de un array bidimensional de 10 x 10

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

Recorrer un Array de 2 dimensiones

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

//Bucle que recorre el primer array
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++) {
        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 el 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++) {
        document.write(nuevoArray[i][j]);
    }
}

Arrays multidimensionales

Son arrays que, como su nombre indica, tienen más de una dimensión.

Anteriormente estudiamos los 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++) {
            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];
//Ejemplo
var dato = nuevoArray[3][6][0];

Ejemplo práctico de un array de 3 dimensiones

Vamos a crear una agenda de 1 año, en cada año metemos 12 meses, en cada mes 31 días y en cada día 24 horas. en cada hora podemos meter un evento.

Necesitamos un array de 3 dimensiones, es decir, un array para los 12 meses, en cada mes un array de 31 días, y en cada día un array de 24 horas. Pues vamos a ello

//Declaramos el array
var agenda = new Array(12);
//Vamos a recorrerlo para meter en cada posición un array de 31
for(var i=0; i<agenda.length; i++) {
    agenda[i] = new Array(31);
    //Lo recorremos para meter en cada posición un array de 24
    for(var j=0; j<agenda[i].length; j++) {
        agenda[i][j] = new Array(24);
    }
}

El array de 3 dimensiones está creado, pero vacío, si intentamos acceder a una posición el resultado será undefined.

Podemos crear eventos y guardarlos en su posición. Meses de 1 al 12, Días del 1 al 31 y horas de 0 a 23.

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)
agenda[3][22][18] = "Concierto";
//Tenemos que restarle 1 al mes y al día

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

//Queremos saber que evento hay el mes 6, día 3 a las 22 horas
var evento = agenda[5][2][22];
//Igual que antes tenemos que restar 1 al mes y al día

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

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++) {
            document.write("Evento: "+agenda[i][j][k]+", Mes: "+(i+1)+", Día: "+(j+1)+ ", Hora: "+k+"<br>");
        }
    }
}
//Ahora le sumaremos 1 al mes y al día para que lo muestre correctamente.

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

Hasta aquí los arrays multidimensionales.

Si te ha gustado no olvides compartir en redes sociales.

Espero que te haya servido. Cualquier duda deja un comentario. Un saludo

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Translate »
Ir a la barra de herramientas