Matrices con Arrays

Un tablero de ajedrez, una hoja de cálculo, el mapa de un buscaminas. Todos son lo mismo: datos colocados en filas y columnas. En matemáticas y en programación a eso se le llama matriz, y en JavaScript se representa de la forma más sencilla posible: con un array de arrays.

Creación de Matrices#

Cada array de dentro es una fila, y cada elemento de esa fila ocupa una columna. Esta es una matriz de 2x3, es decir, dos filas y tres columnas:

const matriz = [  [1, 2, 3],  [4, 5, 6]]

Acceso a los Elementos de una Matriz#

Con un array normal te bastaba un índice. Aquí necesitas dos: primero el de la fila y después el de la columna.

Por ejemplo, para llegar al número 6 de la matriz anterior:

let numero = matriz[1][2]console.log(numero) // -> 6

Vamos por partes. El primer índice, [1], apunta a la segunda fila, que es [4, 5, 6]. El segundo, [2], apunta a la tercera columna de esa fila. Ahí está el 6.

Iteración sobre Matrices#

Para pasar por todos los elementos necesitas recorrer las filas y, dentro de cada fila, sus columnas. Eso son dos bucles, uno dentro de otro. Fíjate en las líneas marcadas con {1} y {2}:

for (let i = 0; i < matriz.length; i++) { // {1}  for (let j = 0; j < matriz[i].length; j++) { // {2}    console.log(matriz[i][j])  }}

El bucle externo {1} recorre cada fila de la matriz. Por cada una, el bucle interno {2} recorre todos los elementos de esa fila concreta. Hasta que no termina una fila entera, no se pasa a la siguiente.

No estás atado al for: también valen while y for...of. Y con el método forEach() la idea es la misma, anidar dos llamadas, una para las filas y otra para los elementos de cada fila:

matriz.forEach((fila, filaIndex) => {  fila.forEach((elemento, columnaIndex) => {    console.log('Fila ' + filaIndex)    console.log('Columna ' + columnaIndex)    console.log('Elemento ', elemento)    console.log('')  })})

Ejemplo práctico de Matrices#

Vamos con un ejemplo sencillo de entender y muy útil: el juego del 3 en raya. Los jugadores se turnan para colocar sus fichas en una cuadrícula de 3x3, y gana quien consigue tres en una fila, una columna o una diagonal.

Una cuadrícula de 3x3 pide a gritos una matriz de 3x3. Cada elemento puede ser una cadena de texto que represente una ficha:

const tablero = [  ['X', 'O', 'X'],  ['O', 'X', 'O'],  ['O', 'O', 'X']]

Ahora toca buscar si hay un ganador. Hay que comprobar tres tipos de línea: las horizontales, las verticales y las dos diagonales. Si en alguna las tres fichas son iguales, tenemos ganador.

En el código, mira qué índice se queda fijo y cuál cambia en cada comprobación:

// Verifica las líneas horizontalesfor (let i = 0; i < 3; i++) {  if (    tablero[i][0] === tablero[i][1] &&    tablero[i][1] === tablero[i][2]  ) {    console.log(`El ganador es: ${tablero[i][0]}`);  }}// Verifica las líneas verticalesfor (let i = 0; i < 3; i++) {  if (    tablero[0][i] === tablero[1][i] &&    tablero[1][i] === tablero[2][i]  ) {    console.log(`El ganador es: ${tablero[0][i]}`);  }}// Verifica la diagonal de arriba izquierda a derecha abajoif (  tablero[0][0] === tablero[1][1] &&  tablero[1][1] === tablero[2][2]) {  console.log(`El ganador es: ${tablero[0][0]}`);}// Verifica la diagonal de derecha arriba a izquierda abajoif (  tablero[0][2] === tablero[1][1] &&  tablero[1][1] === tablero[2][0]) {  console.log(`El ganador es: ${tablero[0][2]}`);}

En las horizontales la fila i se mantiene y cambia la columna. En las verticales pasa al revés. Las diagonales son solo dos, así que se comprueban a mano. Con nuestro tablero, gana X por la diagonal que baja de izquierda a derecha.

Las matrices son necesarias en muchos juegos (ajedrez, damas, buscaminas…) y aplicaciones (hojas de cálculo, bases de datos…), así que merece la pena que te familiarices con ellas.

const matrix = [  ['HTML', 'CSS', 'JavaScript'],  ['Java', 'C++', 'Python'],  ['Ruby', 'Go', 'Swift']]const position = findJavaScript(matrix)console.log(position) // -> [0, 2]