Array Multidimensional de JavaScript

Resumen: en este tutorial, aprenderás a trabajar con el array multidimensional de JavaScript.

Introducción al array multidimensional de JavaScript

JavaScript no proporciona el array multidimensional de forma nativa. Sin embargo, se puede crear un array multidimensional definiendo un array de elementos, donde cada elemento es también otro array.

Por esta razón, podemos decir que un array multidimensional de JavaScript es un array de arrays. La forma más sencilla de definir un array multidimensional es utilizar la notación literal de array.

Para declarar un array multidimensional vacío, se utiliza la misma sintaxis que para declarar un array unidimensional:

let activities = ;
Code language: JavaScript (javascript)

El siguiente ejemplo define un array bidimensional llamado activities:

let activities = , , , , ];
Code language: JavaScript (javascript)

En el array activities, la primera dimensión representa la actividad y la segunda muestra el número de horas dedicadas al día a cada una.

Para mostrar el array activities en la consola, se utiliza el método console.table() de la siguiente manera:

console.table(activities);
Code language: JavaScript (javascript)

A continuación se ilustra la salida:

┌─────────┬─────────────┬───┐│ (index) │ 0 │ 1 │├─────────┼─────────────┼───┤│ 0 │ 'Work' │ 9 ││ 1 │ 'Eat' │ 1 ││ 2 │ 'Commute' │ 2 ││ 3 │ 'Play Game' │ 1 ││ 4 │ 'Sleep' │ 7 │└─────────┴─────────────┴───┘
Code language: JavaScript (javascript)

Nota que la columna (index) es para la ilustración que indica los índices del array interior.

Para acceder a un elemento del array multidimensional, primero se utilizan corchetes para acceder a un elemento del array exterior que devuelve un array interior; y luego se utiliza otro corchete para acceder al elemento del array interior.

El siguiente ejemplo devuelve el segundo elemento del primer array interno en el array activities anterior:

console.log(activities); // 9
Code language: JavaScript (javascript)

Añadir elementos al array multidimensional de JavaScript

Puedes utilizar los métodos Array como push() y splice() para manipular elementos de un array multidimensional.

Por ejemplo, para añadir un nuevo elemento al final del array multidimensional, se utiliza el método push() de la siguiente manera:

activities.push();console.table(activities);
Code language: CSS (css)

┌─────────┬─────────────┬───┐│ (index) │ 0 │ 1 │├─────────┼─────────────┼───┤│ 0 │ 'Work' │ 9 ││ 1 │ 'Eat' │ 1 ││ 2 │ 'Commute' │ 2 ││ 3 │ 'Play Game' │ 1 ││ 4 │ 'Sleep' │ 7 ││ 5 │ 'Study' │ 2 │└─────────┴─────────────┴───┘
Code language: JavaScript (javascript)

Para insertar un elemento en medio del array, se utiliza el método splice(). Lo siguiente inserta un elemento en la segunda posición del array de actividades:

activities.splice(1, 0, );console.table(activities);
Code language: CSS (css)

Aquí está la salida:

┌─────────┬───────────────┬───┐│ (index) │ 0 │ 1 │├─────────┼───────────────┼───┤│ 0 │ 'Work' │ 9 ││ 1 │ 'Programming' │ 2 ││ 2 │ 'Eat' │ 1 ││ 3 │ 'Commute' │ 2 ││ 4 │ 'Play Game' │ 1 ││ 5 │ 'Sleep' │ 7 ││ 6 │ 'Study' │ 2 │└─────────┴───────────────┴───┘
Code language: JavaScript (javascript)

Este ejemplo calcula el porcentaje de las horas dedicadas a cada actividad y anexa el porcentaje al array interior.

activities.forEach(activity => { let percentage = ((activity / 24) * 100).toFixed(); activity = percentage + '%';});console.table(activities);
Code language: JavaScript (javascript)

A continuación se muestra la salida en la consola:

┌─────────┬───────────────┬───┬───────┐│ (index) │ 0 │ 1 │ 2 │├─────────┼───────────────┼───┼───────┤│ 0 │ 'Work' │ 9 │ '38%' ││ 1 │ 'Programming' │ 2 │ '8%' ││ 2 │ 'Eat' │ 1 │ '4%' ││ 3 │ 'Commute' │ 2 │ '8%' ││ 4 │ 'Play Game' │ 1 │ '4%' ││ 5 │ 'Sleep' │ 7 │ '29%' ││ 6 │ 'Study' │ 2 │ '8%' │└─────────┴───────────────┴───┴───────┘
Code language: JavaScript (javascript)

Eliminar elementos del array multidimensional de JavaScript

Para eliminar un elemento de un array, se utiliza el método pop() o splice().

Por ejemplo, la siguiente sentencia elimina el último elemento del array activities.

activities.pop();console.table(activities);
Code language: CSS (css)

Salida:

┌─────────┬───────────────┬───┬───────┐│ (index) │ 0 │ 1 │ 2 │├─────────┼───────────────┼───┼───────┤│ 0 │ 'Work' │ 9 │ '38%' ││ 1 │ 'Programming' │ 2 │ '8%' ││ 2 │ 'Eat' │ 1 │ '4%' ││ 3 │ 'Commute' │ 2 │ '8%' ││ 4 │ 'Play Game' │ 1 │ '4%' ││ 5 │ 'Sleep' │ 7 │ '29%' │└─────────┴───────────────┴───┴───────┘
Code language: JavaScript (javascript)

De forma similar, puedes eliminar los elementos del array interior del array multidimensional utilizando el método pop(). El siguiente ejemplo elimina el elemento porcentaje de los arrays interiores del array activities.

activities.forEach((activity) => { activity.pop(2);});console.table(activities);
Code language: JavaScript (javascript)

Salida:

┌─────────┬───────────────┬───┐│ (index) │ 0 │ 1 │├─────────┼───────────────┼───┤│ 0 │ 'Work' │ 9 ││ 1 │ 'Programming' │ 2 ││ 2 │ 'Eat' │ 1 ││ 3 │ 'Commute' │ 2 ││ 4 │ 'Play Game' │ 1 ││ 5 │ 'Sleep' │ 7 │└─────────┴───────────────┴───┘
Code language: JavaScript (javascript)

Iterando sobre los elementos del array multidimensional de JavaScript

Para iterar un array multidimensional, se utiliza un bucle for anidado como en el siguiente ejemplo.

// loop the outer arrayfor (let i = 0; i < activities.length; i++) { // get the size of the inner array var innerArrayLength = activities.length; // loop the inner array for (let j = 0; j < innerArrayLength; j++) { console.log(' = ' + activities); }}
Code language: JavaScript (javascript)

El primer bucle itera sobre los elementos del array exterior y el bucle anidado itera sobre los elementos del array interior.

A continuación se muestra la salida del script en la consola:

 = Work = 9 = Eat = 1 = Commute = 2 = Play Game = 1 = Sleep = 7 = Study = 2

O puedes utilizar el método forEach() dos veces:

activities.forEach((activity) => { activity.forEach((data) => { console.log(data); });});
Code language: JavaScript (javascript)

Salida:

Work9Eat1Commute2Play Game1Sleep7Study2

En este tutorial, has aprendido a utilizar un array de arrays para crear un array multidimensional en JavaScript.