Esta guía tiene como objetivo mostrarle sucintamente cómo se pueden crear y utilizar matrices multidimensionales en el lenguaje de programación JavaScript.
¿Qué son las matrices?
Las matrices son un componente clave en cualquier tipo de aplicación que desee crear:las matrices le permiten almacenar una lista ordenada de variables o valores de cualquier longitud en una sola variable, lista para repetirse, mostrarse o procesarse de otra manera.
Por ejemplo, una matriz podría contener una lista de contactos para una aplicación de mensajería instantánea, o una podría contener una lista de elementos que el jugador ha recopilado en un videojuego.
Las matrices forman la columna vertebral de casi todos los programas que puede escribir en PHP o cualquier otro lenguaje de programación.
Las matrices son un tipo de variable que contiene una lista ordenada de valores. Estos valores pueden ser de cualquier tipo y se denominan elementos o elementos en la matriz.
Índices de matrices
A medida que se ordenan las matrices, cada elemento de la matriz tiene una posición numérica que determina en qué parte de la matriz aparece.
Esto se llama el índice . Índices empezar a contar en la posición 0 , por lo que el primer elemento de una matriz está en el índice 0 , el segundo elemento está en el índice 1 y así sucesivamente.
¿Qué son las matrices multidimensionales?
Los arreglos son unidimensionales. Son una lista de valores, comparable a una sola columna en una tabla u hoja de cálculo
Sin embargo, las matrices pueden contener otras matrices. Esto agrega una segunda dimensión, como agregar filas a la hoja de cálculo además de la columna.
Esto probablemente se muestra mejor visualmente:
var oneDimensionalArray = ['a', 'b', 'c', 'd];
var twoDimensionalArray = [
['a1', 'a2', 'a3', 'a4'],
['b1', 'b2', 'b3', 'b4'],
['c1', 'c2', 'c3', 'c4']
]; La variable oneDimensionalArray es una matriz unidimensional:una matriz que contiene una lista de letras.
matriz AR bidimensional sin embargo, es una matriz que contiene otras matrices . Esto se puede tratar como una tabla con filas y columnas:dos dimensiones. He formateado la declaración de las matrices en filas y columnas para que pueda ver el efecto. El valor b1 se encuentra en la primera columna de la segunda fila.
No hay límite para la cantidad de matrices que se pueden anidar. El número de matrices anidadas se denomina profundidad de la matriz multidimensional. Una matriz multidimensional que tiene una matriz, dentro de una matriz, dentro de una matriz tiene una profundidad de 3 es una matriz tridimensional (desafortunadamente, después de las matrices bidimensionales, se vuelven un poco difíciles de ilustrar ).
¿Para qué se utilizan las matrices multidimensionales en JavaScript?
Como se muestra arriba, las matrices multidimensionales se usan con mayor frecuencia para representar datos tabulados. Cada elemento de la matriz que contiene los datos de una sola fila o registro.
Las matrices multidimensionales también se usan comúnmente cuando se desarrollan videojuegos. La naturaleza de cuadrícula de las matrices bidimensionales es perfecta para construir áreas de juego bidimensionales, cada elemento de la matriz contiene información sobre lo que debe colocarse en ese punto de la cuadrícula (un árbol, el jugador, el césped, etc.). Estas cuadrículas también se pueden apilar para que los elementos del juego puedan aparecer uno encima del otro, creando matrices multidimensionales aún más complejas.
Esto suena complicado, pero como las matrices están indexadas, facilita la administración de lo que contienen según su posición.
Los arreglos también se pueden buscar, reordenar, clonar y procesar de otra manera.
Declaración de matrices multidimensionales
Ya ha visto cómo se declaran las matrices multidimensionales en JavaScript anteriormente en este artículo. A continuación, se declara una matriz bidimensional:
var twoDimensionalArray = [
['a1', 'a2', 'a3', 'a4'],
['b1', 'b2', 'b3', 'b4'],
['c1', 'c2', 'c3', 'c4']
]; Nuevamente, esta es una matriz que contiene varias sub-matrices. La matriz externa que contiene filas y la sub-matriz que contiene valores de columna.
Tenga en cuenta que los subconjuntos de un conjunto multidimensional no ¡tienen que ser del mismo tamaño! Así que lo siguiente es perfectamente válido:
var twoDimensionalArray = [
['a1', 'a2'],
['b1', 'b2', 'b3', 'b4'],
['c1', 'c2', 'c3']
]; Si tener arreglos de diferentes longitudes presentará un problema o no, dependerá de lo que esté tratando de lograr programáticamente.
Acceso a valores en matrices multidimensionales
Todas las matrices en JavaScript están indexadas. Todos los índices se completan, por lo que si se elimina un elemento de una matriz, se vuelve a indexar para que no se salten números en la lista de índices de esa matriz.
En una matriz unidimensional, para acceder a un valor por su índice, haría lo siguiente:
oneDimensionalArray[1] // Access the second value in a single dimensional array
Los corchetes se utilizan después del nombre de la variable de matriz para especificar el índice del elemento que se va a recuperar.
Los arreglos multidimensionales funcionan exactamente de la misma manera:solo especifica el índice del primer arreglo, seguido del índice de los subarreglos a los que desea acceder, hasta que haya alcanzado la profundidad del valor que desea recuperar.
twoDimensionalArray[1][0] // Access the value on the second row (index 1), first column (index 0) from a two dimensional array
Arriba, se definen dos índices, el primero para la matriz más externa en la matriz bidimensional que se muestra arriba, y el segundo para la matriz en el segundo nivel de la matriz. Esto recuperaría el valor b1 .
Si su matriz tuviera tres niveles, simplemente seguiría especificando índices:
threeDimensionalArray[1][0][2] // Access the value of a three dimensional array
Iterar/recorrer matrices multidimensionales
JavaScript foreach() loop se usa para iterar sobre arreglos.
Las matrices multidimensionales, al ser matrices anidadas, se pueden iterar anidando múltiples foreach() bucles Esto se demuestra mejor con un ejemplo de código:
// Declare a multidimensional array
var twoDimensionalArray = [
['a1', 'a2', 'a3', 'a4'],
['b1', 'b2', 'b3', 'b4'],
['c1', 'c2', 'c3', 'c4']
];
// Loop through the outermost array
twoDimensionalArray.forEach(function(rowValue, rowIndex){
// Loop through each of the sub-arrays
rowValue.forEach(function(columnValue, columnIndex){
// Print the index of the outer and inner arrays
console.log('row: ' + rowIndex + ', column: ' + columnIndex);
// Print the value stored at the current row, column position
console.log(columnValue);
});
}); El código anterior generará:
row: 0, column: 0 a1 row: 0, column: 1 a2 row: 0, column: 2 a3 row: 0, column: 3 a4 row: 1, column: 0 b1 row: 1, column: 1 b2 row: 1, column: 2 b3 row: 1, column: 3 b4 row: 2, column: 0 c1 row: 2, column: 1 c2 row: 2, column: 2 c3 row: 2, column: 3 c4
Cada uno de los subconjuntos está atravesado por el primer foreach() bucle en orden, con cada elemento dentro de esas matrices atravesado por el segundo foreach() bucle antes de que el primer bucle foreach pase al siguiente subarreglo.
Búsqueda de arreglos multidimensionales
También es posible buscar matrices anidadas/multidimensionales con una combinación de bucles anidados y los métodos de búsqueda de matriz de JavaScript integrados.
Encontrar el primer valor coincidente con find() Método
// Declare a multidimensional array
var twoDimensionalArray = [
['a1', 'a2', 'a3', 'a4'],
['b1', 'b2', 'b3', 'b4'],
['c1', 'c2', 'c3', 'c4']
];
// Declare a variable to hold the search result when it is found
var found;
// Loop through the outermost array
for (const [rowIndex, rowValue] of twoDimensionalArray.entries()) {
// Use the find() method to find the first matching value in the sub-array and assign it to the found variable
found = rowValue.find(function(columnValue, columnIndex){
if(columnValue == 'b3') {
console.log('Found! row: ' + rowIndex + ', column: ' + columnIndex);
return true;
} else {
return false;
}
});
// If a result has been found we can break out of the for loop as the job is done
if(typeof found !== 'undefined') break;
};
console.log(found); // Confirm the result Esto generará:
Found! row: 1, column: 2 b3
Hay formas de hacer esto que requieren menos líneas de código, pero esto ilustra lo que sucede debajo del capó y cómo se recorren las matrices.
Encontrar todos los valores coincidentes con filter() Método
// Declare a multidimensional array - note there are some duplicate 'b2' values in this one!
var twoDimensionalArray = [
['a1', 'a2', 'a3', 'b2'],
['b1', 'b2', 'b3', 'b4'],
['c1', 'c2', 'b2', 'c4']
];
// Declare a variable to hold the search results when it is found - there may be multiple results, so it is an array
var results = [];
// Loop through the outermost array
for (const [rowIndex, rowValue] of twoDimensionalArray.entries()) {
// Find all matching values in the sub array using the filter() function
var found = rowValue.filter(function(columnValue, columnIndex){
if(columnValue == 'b2') {
console.log('Found! row: ' + rowIndex + ', column: ' + columnIndex);
return true;
} else {
return false;
}
});
// Merge what was found in this iteration with the final results
results = results.concat(found);
};
console.log(results); // Confirm the results Esto generará:
Found! row: 0, column: 3 Found! row: 1, column: 1 Found! row: 2, column: 2 Array(3) [ "b2", "b2", "b2" ]
Lo que confirma que los tres elementos de la matriz con el valor b2 de la matriz multidimensional.
Clonación/Copia de matrices multidimensionales
Clonar y copiar arreglos, especialmente arreglos multidimensionales, requiere un poco de consideración:¡no es tan simple como parece en JavaScript!
Recomiendo leer el artículo vinculado anteriormente para averiguar por qué Las matrices de JavaScript no se pueden copiar simplemente asignando su valor a una nueva variable, pero si desea ver cómo hacerlo, aquí está:
var multiDimensionalArrayCopy = JSON.parse(JSON.stringify(multiDimensionalArray));
Esto creará una nueva variable, multiDimensionalArrayCopy , que será un clon/copia completo de la variable denominada multiDimensionalArray .