Arrays bidimensionales en JavaScript

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

Un array de dos dimensiones no es más que un array dentro de otro, es decir, un array de arrays.

Para trabajar con arrays de más de 2 dimensiones puedes ver nuestro tutorial

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.

Declaración de 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 arrays bidimensionales

Podemos acceder a los datos de la siguiente forma:

// 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 accediendo a cada posición del array de la siguiente forma

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 creado dentro de un bucle for. Cada vuelta del bucle añadirá un elemento al array.

// 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 arrays bidimensionales

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 puede que no conozcamos el tamaño del array. Para estos casos vamos a ver 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]);
    }
}

Métodos de arrays en JavaScript

Más tutoriales de JavaScript

Arrays bidimensionales en JavaScript