¿Cómo funciona la matriz anidada en JavaScript?

En JavaScript, cuando se agrega una matriz o sub-array interna a una matriz, se conoce como un "Multidimensiónl "o"Anidado"Array. JavaScript no proporciona un formato explícito para crear una matriz anidada; Por lo tanto, necesitamos anidar las subrayas requeridas dentro de una sola matriz exterior. Además, se accede a los elementos de las matrices internas en función de su índice en la matriz exterior.

Después de declarar una matriz anidada en JavaScript, puede realizar diferentes operaciones en ella, como agregar sub-matrices, acceder a los elementos de las sub-matrices, iterando sobre todos los elementos de las sub-matrices, eliminando una sub-matriz, o su elemento relacionado, y reduciendo la dimensionalidad de la matriz anidada.

Este artículo explicará el laboral del matrices anidadas en Javascript con la ayuda de ejemplos adecuados. Entonces, comencemos!

Cómo crear una matriz anidada en JavaScript

Para crear una matriz anidada en JavaScript, debe seguir la sintaxis dada a continuación:

LET array = [[inner_array1], [inner_array2], [inner_array3] ...];

Aquí "formación"Representa la matriz anidada que contiene múltiples matrices internos como"inner_array1","inner_array2","inner_array3".

Ejemplo: cómo crear una matriz anidada en JavaScript

Crearemos una matriz multidimensional o anidada llamada "aficiones"Eso comprende además cinco matrices internas:

Deja pasatiempos = [
['Lectura', 4],
['Jardinería', 2],
['Juegos', 1],
['Pintura', 8],
['Cocina', 5]
];

En el declarado "aficiones"Array, la primera dimensión agregada representa la"pasatiempo,"Y el segundo indica el número máximo de"horas" gastado mientras hacía esa actividad.

Ahora, para mostrar el creado "aficiones"Array anidada, utilizaremos el"consola.mesa()"Método mientras pasa el"aficiones"Array como argumento:

consola.tabla (pasatiempos);

La ejecución del código anterior mostrará los valores del "aficiones"Array en un formato de tabla, donde el primera columna representa el índice de matrices internas y el otro Dos columnas contienen sus elementos que están presentes en el primero "[0]" y segundo "[1]"Índice:

Cómo acceder a elementos de matrices anidadas en JavaScript

Necesita acceder a los elementos de una matriz anidada? En caso afirmativo, eche un vistazo a la sintaxis dada por debajo:

formación.[a] [b]

Aquí, "a"Representa el índice del"interno"Array en la matriz anidada creada, y"b"Representa el índice del"elemento"En el interior o subrainal especificado.

Ejemplo: Cómo acceder a elementos de matrices anidadas en JavaScript

Por ejemplo, queremos acceder al "Cocinando"Hobby que existe como el"Primero" elemento "[0] "De la quinta matriz interna" [4] ":

Para realizar la operación especificada, ejecutaremos la instrucción de código dado a continuación:

consola.log (pasatiempos [4] [0]);

Como puede ver en la salida, hemos accedido con éxito el valor del "aficionesArray que se coloca en el primer índice de la quinta matriz interna:

Cómo agregar elementos a la matriz anidada en JavaScript

JavaScript ofrece dos formas de agregar elementos a una matriz anidada ya creada; O puedes adjuntar un elemento en el fin de una matriz usando el "empujar()"Método o inserte en un posición específica con la ayuda del "empalme()" método.

Ejemplo: Cómo agregar elementos a la matriz anidada en JavaScript

Para empujar el "[Ciclismo, 6]"Sub-Array al final del"aficiones"Array anidada, lo pasaremos como un argumento al"aficiones.empujar()" método:

aficiones.push (['ciclismo', 6]);
consola.tabla (pasatiempos);

Cuando el dado "aficiones.empujar()"Se ejecuta, agregará la sub-matriz especificada al final del"aficiones"Array:

Mientras que, para insertar una subarray en el medio de otras matrices internas, utilice el "empalme()Método de la siguiente manera:

aficiones.empalme (1, 0, ['Singing', 3]);
consola.tabla (pasatiempos);

Aquí el "aficiones.empalme()"El método sobrescribirá el"aficiones"Array y agregue el"['Singing', 3]Sub-Array en la segunda posición:

Hasta este punto, hemos aprendido el procedimiento para crear una matriz anidada y agregarle elementos. En la siguiente sección, hablaremos sobre iterar sobre los elementos de una matriz anidada en JavaScript.

Cómo iterar sobre los elementos de la matriz anidada en JavaScript

Puede saber que el JavaScript "paraEl bucle se utiliza principalmente para iterar sobre los elementos de una matriz. Sin embargo, como en nuestro caso, tenemos un "anidado"Array, por lo que agregaremos dos"para"Los bucles anidados dentro del otro.

Ejemplo: Cómo iterar sobre los elementos de la matriz anidada en JavaScript

El primero bucle "para"El bucle iterará sobre el matriz exterior elementos según su tamaño y sus anidados "para"Loop realizará la iteración sobre el sub-matrices:

para (leti = 0; ivarinnerArrayLength = Hobbies [i].longitud;
para (dejar j = 0; j consola.log ('[' + i + ',' + j + '] =' + hobbies [i] [j]);

La operación de iteración especificada mostrará todos los elementos del "aficiones"Array anidada:

También puedes usar el "Para cada()"Método para el mismo propósito.

Cómo aplanar una matriz anidada en JavaScript

Hay ciertos escenarios en los que es posible que necesite crear una matriz que comprenda todos los elementos de matriz de JavaScript anidados en su orden original. Si ese es el caso, entonces aplanar la matriz anidada creada para reducir su dimensionalidad.

El "Formación.departamento()El método está incrustado en ES6, que ayuda en aplastamiento una matriz de JavaScript anidada. Este método devuelve una nueva matriz después de concatenar todos los elementos de las sub-matrices.

Ejemplo: Cómo aplanar una matriz anidada en JavaScript

Por ejemplo, para aplanar el "aficiones"Array, ejecutaremos el siguiente código en la ventana de la consola:

consttatoRray = pasatiempos.departamento();
consola.log (FlatArray);

Lo dado "aficiones.departamento()"El método reducirá la dimensionalidad del"aficionesArray y aplanan los elementos de la matriz interna:

Cómo eliminar elementos de matriz anidada en JavaScript

Para eliminar elementos de cualquier subarray de una matriz anidada, use el "estallido()" método. El "estallido()El método ”generalmente elimina la última matriz interna de una matriz anidada; Sin embargo, también ayuda a eliminar elementos de las matrices internas.

Ejemplo: Cómo eliminar elementos de matriz anidada en JavaScript

Antes de utilizar el "estallido()"Método, tenemos las siguientes sub-matrices en el"aficiones"Array anidada:

Ahora cuando invocamos el "estallido()"Método, la última sub-matriz se eliminará junto con sus elementos:

aficiones.estallido();
consola.tabla (pasatiempos);

Producción

Para eliminar el segundo elemento de cada uno "subarray", Iteraremos a través del"aficiones"Array usando el"para cada()"Método, y en cada iteración el"estallido()El método "elimina el elemento colocado en el primer índice:

aficiones.foreach ((hobby) =>
pasatiempo.Pop (1);
);
consola.tabla (pasatiempos);

Se puede ver en la salida dada de abajo que el elemento que representa el número máximo de horas gastadas en cada pasatiempo se elimina para todas las sub-matrices:

Hemos compilado toda la información esencial relacionada con el funcionamiento de las matrices anidadas en JavaScript. Puede explorarlos más de acuerdo con sus preferencias.

Conclusión

Cuando se agrega una matriz o subrainal interna a una matriz externa, se llama matriz anidada. Después de crear una matriz anidada de JavaScript, puede usar el "empujar()" y "empalme()"Método para agregar elementos", "en bucle" y "para cada()"Método para iterar sobre los elementos de las matrices internas", "departamento()"Método para reducir la dimensionalidad y"estallido()Método para eliminar sub-matrices o sus elementos de las matrices anidadas. Este artículo explicó el funcionamiento de los bucles anidados en JavaScript.