Javascript – Arrays multidimensionales

Publicada el por

Vemos con un ejemplo cómo tratar las Arrays multidimensionales en Javascript. Crearemos, inicializaremos y trabajaremos un Array de dos dimensiones: filas y columnas.

Seguimos con nuestros tutoriales de Javascript, con uno que hace tiempo queríamos hacer: cómo crear, inicializar y trabajar con Arrays multidimensionales.

El código

Código HTML

Tenemos dos elementos:

  • El botón, que al pulsarlo ejecuta la función btn_multidimensional_array()
  • El bloque Div con id consoleOutput donde se escribirá el resultado.

Éste sería el código. En la parte inferior tenéis el código y podéis ejecutarlo

<h2>Console Output</h2>
<input type="button" onClick="javascript:btn_multidimensional_array()" value="Run multidimensional function" />
<div id="consoleOutput">
</div>

Código JavaScript

Por otro lado, tenemos el código JavaScript donde se realiza todo el trabajo: se declara, se inicializa y se recorre toda la tabla para mostrar sus valores.

function btn_multidimensional_array(){

  /* Declaración de variables */
  var primaryArray = new Array(4);
  // Entero aleatorio entre 0 y 1000
  var position = Math.floor(Math.random() * (1000 - 0 + 1)) + 0;
  var consoleOutput = document.getElementById("consoleOutput");

  for(index=0; index<4; index++) {
    primaryArray[index] = new Array(3);
  }

  /* Inicialización con datos */
  for (i=0; i<4; i++){
    for (j=0; j<3; j++){
      primaryArray[i][j]= position;
      position++;
    }
  }

  /* Escribimos los valores en el bloque Div con ID consoleOutPut */
  for (i=0; i<4; i++){
    for (j=0; j<3; j++){
      document.getElementById('consoleOutput').innerHTML += "<br />Row: "+ i +" - Col: "+ j +" Value: "+ primaryArray[i][j];
    }
  }
}

Como véis, es una función que será llamada cuando pulsemos el botón.

Primero declaramos las variables. Luego creamos la tabla primaryArray de 4 registros. En cada uno de los registros de la tabla, creamos una nueva tabla de 3 posiciones. Así pués, tenemos un array de 4 filas y 3 columnas.

Después de crear la array multidimensional, la inicializamos. Para ello recorremos sus 4 filas, y por cada fila, sus 3 columnas. A cada registro le asignamos el valor de la variable posicion + 1.

Por último, una vez la tabla ya tiene sus valores, la recorremos de igual manera, pero mostramos sus valores en el bloque Div.

Es un ejemplo absurdo, pero que muestra las tres cosas esenciales: creación, inicialización y trabajo con las tablas multidimensionales.

Ejemplo en CodePen

Aquí tenéis el ejemplo para poderlo ejecutar:

See the Pen Javascript – Multidimensional array by Trescomatres Multimèdia S.L. (@trescomatres) on CodePen.

Más información


Artículos relacionados: