Tutoriales de matrices de JavaScript explicados con ejemplos para principiantes

Mientras aprendemos cualquier lenguaje de programación, nos encontramos con el aprendizaje de las matrices. Las matrices son útiles cuando es necesario almacenar varios valores diferentes en una sola variable. La aplicación de matrices se ve en muchos lugares, como implementar las matrices, estructuras de datos o almacenar datos en forma tabular.

El concepto de matrices provino del arreglo de objetos en la vida real. La forma en que organizamos objetos en la vida real, podemos organizar los datos en la programación. Entonces, esta publicación se trata de aprender los conceptos básicos y básicos de las matrices en JavaScript. Vamos a sumergirnos y tener una comprensión clara de una matriz, cómo crearla y usarla para asignar, acceder y cambiar los valores.

Que es una matriz?

Una matriz es un tipo variable en cualquier lenguaje de programación utilizado para almacenar múltiples valores simultáneamente. Las matrices almacenan los datos en forma de segmentos, también conocidos como elementos de la matriz, por lo que en palabras simples, una matriz es una colección de elementos.

Por lo general, los usamos para almacenar el mismo tipo de valores o la lista de elementos en un lugar/variable, como el nombre de los animales ["Lion", "oso", "mono"] o lista de estudiantes ["John", "Bob", "Ivan"].

Sin embargo, podemos almacenar múltiples tipos de datos en matrices, como cadenas, enteros, matrices o incluso funciones.

Los tipos de matriz relacionados con la implementación se dividen en cuatro tipos:

• Matrices homogéneas
• Matrices heterogéneas
• Matrices multidimensionales
• Matrices irregulares

Tengamos una breve introducción de cada tipo.

Matriz homogénea:

La matriz en la que los elementos son del mismo tipo de datos se conoce como una matriz homogénea. Por ejemplo, valores de cadena, enteros o bool.

var stringarr = ["John", "Bob", "Ivan"];
var intarr = [23, 45, 67];

Matriz heterogénea

La matriz en la que se almacenan los valores de múltiples tipos de datos se conoce como matriz heterogénea. Por ejemplo:

Var estudiante = ["John", 25, "hombre"]

Matriz multidimensional:

La matriz que contiene más matrices como elementos en ella se conoce como una matriz multidimensional. Por ejemplo, lista de estudiantes:

Var estudiante = [["John", 25, "hombre"], ["Steve", 21, "masculino"], ["Angela", 22, "mujer"]]]

Matriz irregular:

Jagged es casi lo mismo que una matriz multidimensional pero con una diferencia sutil en el número de elementos en las sub-matrices dentro de una matriz. La matriz multidimensional en la que los conjuntos de datos de matrices adicionales no son uniformes.

Var estudiante = [["John"], ["Steve", 21, "hombre"], ["Angela", "mujer"]]]

Nota: Usaremos la consola del navegador para demostrar ejemplos realizados en esta publicación. Para abrir la consola del navegador:

• utilizar el Clave F12 en Chrome y otros navegadores a base de cromo.
• usar Ctrl + Shift + K teclado teclas de atajo para Mozilla.
• usar Opción + teclado ⌘ + C teclas de acceso directo en Safari (si el menú de desarrollador no aparece, luego abra las preferencias presionando ⌘ +, y en verificación de pestaña avanzada "Mostrar el menú Desarrollar en la barra de menú").

Cómo crear una matriz?

Dado que JavaScript es un lenguaje de secuencias de comandos, primero no tenemos que declarar el tipo y asignar algunos valores a una variable. Podemos escribir directamente el nombre de la variable sin mencionar el tipo de datos de la variable y asignar valores a él.

Por ejemplo:

VAR Languages ​​= ["JavaScript", "Python", "Java"];

Cómo asignar valores a una matriz?

Aunque podemos asignar valores a una matriz al crear la matriz, hay otra forma de asignar valores es asignando valores a índices específicos. La ubicación donde un artículo está presente en una matriz se conoce como su índice.

Por ejemplo:

VAR Idiomas = [];
Idiomas [0] = "JavaScript";
Idiomas [1] = "Python";

Nota: En las matrices, los números de índice comienzan desde "0" (cero):

Cómo cambiar el valor de un elemento de matriz?

El valor de un elemento presente en una matriz se puede cambiar de la misma manera que podemos asignar sus valores.

Por ejemplo, si queremos cambiar el valor del primer índice de la matriz de "idiomas", la declaración sería así:

Idiomas [0] = "TypeScript";

Propiedades y métodos de matriz incorporados:

El verdadero beneficio de JavaScript son sus propiedades y métodos incorporados para matrices. Las propiedades y métodos de matriz más comunes presentes en JavaScript son:

formación.Propiedad de longitud:

El "formación.longitudLa propiedad se puede usar para obtener el número de elementos/elementos presentes en una matriz. Por ejemplo:

VAR Languages ​​= ["JavaScript", "Python", "Java"];
consola.Registro (idiomas.longitud);

formación.Método sort ():

Este Formación.Método sort () clasifica los elementos presentes en una matriz en orden ascendente.

Supongamos que tenemos una variedad de tres lenguajes de programación:

VAR Languages ​​= ["JavaScript", "Python", "Java"];

Y queremos resolverlos en orden alfabético para que la función de clasificación vaya así:

Letedlang = idiomas.clasificar();
consola.log (sortedlang);

En la salida, puede ver que la matriz está ordenada como deseamos:

Cómo acceder a los elementos/elementos de una matriz?

Se puede acceder a los elementos de matriz mencionando el número de índice.

Por ejemplo, queremos acceder al segundo elemento de una matriz; La declaración sería así:

Let SecondLanguage = Idiomas [1];

Nota: El número de índice de Array comienza desde cero "0":

Cómo acceder al primer elemento/elemento de una matriz?

Dado que los índices de matriz comienzan desde "0,"Para que podamos acceder al primer elemento de una matriz mencionando"0"En los soportes cuadrados como se muestra a continuación:

Let FirstLanguage = Idiomas [0];

Cómo acceder al último elemento/elemento de una matriz?

Para obtener el último elemento de una matriz, el "formación.longitud"La propiedad viene en ayuda. Podemos acceder al último elemento presente en una matriz mencionando "formación.Longitud -1"En los soportes cuadrados como se muestra a continuación:

Deje que LastLanguage = Idiomas [Idiomas.longitud - 1];

Cómo recorrer una matriz?

Para obtener todos los elementos presentes en una matriz, la mejor manera es recorrer una matriz. Las formas más convenientes y eficientes son usar:

• En bucle
• Método de Foreach de la matriz

En bucle:

Para obtener todos los elementos que usan un bucle for For es la forma más fácil. Simplemente ejecute el código que se da a continuación para recorrer la matriz completa y obtener todos los elementos uno por uno:

VAR Languages ​​= ["JavaScript", "Python", "Java"];
para (deja i = 0; yo < languages.length; i++)
Const Language = Languages ​​[i];
consola.registro (idioma);

En el código anterior, puede ver que usamos lenguas.longitud propiedad en la cláusula condicional de bucle para bucle para recorrer toda la matriz sin conocer el número total de elementos en la matriz.

Método foreach de la matriz:

Javascript también proporciona el método foreach de la matriz para recorrer toda la matriz. La sintaxis de usar el método foreach es como sigue:

VAR Languages ​​= ["JavaScript", "Python", "Java"];
lenguas.foreach (onelang);
función onElang (lenguaje)
consola.registro (idioma);

La sintaxis proporcionada anteriormente se puede acortar utilizando la función de devolución de llamada en línea como se da a continuación:

lenguas.foreach ((lenguaje) =>
consola.registro (idioma);
)

Matrices asociativas en JavaScript?

Las matrices asociativas son las matrices que han nombrado índices. JavaScript no admite tales matrices. Si lo hace, JavaScript lo tomará como un objeto, y los métodos y propiedades de la matriz no se aplicarán a él.

Las matrices JavaScript son objetos:

Sí, el tipo de Matriz en JavaScript es objeto. Es por eso que las matrices pueden contener diferentes tipos de variables. Las matrices pueden contener objetos, funciones e incluso matrices dentro de una matriz como elemento.

Si usamos el typyOf Operator sobre una variable de matriz:

VAR Languages ​​= ["JavaScript", "Python", "Java"];
consola.log (typeof (idiomas));

Mostrará que el tipo de "lenguas"La variable de matriz es un objeto.

Sin embargo, todavía hay algunas diferencias conceptuales entre matrices y objetos:

Diferencia entre matrices y objetos:

• En las matrices, los índices se denotan por números.
• Mientras que, en los objetos, los índices pueden ser denotados por nombres (números o alfabetos).

Por lo tanto, es mejor elegir el tipo de variable correcto en el lugar correcto:

• Use matrices cuando tenga una gran lista de elementos.
• Use objetos cuando necesite asignar nombres a los índices.

Ahora, surge la pregunta, cómo identificar si una variable es un objeto o una matriz.

Cómo identificar una variable de matriz?

Para identificar, una variable es una matriz o no, JavaScript proporciona un Formación.función isarray ().

Por ejemplo:

VAR Languages ​​= ["JavaScript", "Python", "Java"];
consola.registro (matriz.isarray (idiomas));

El código anterior devolverá verdadero.

Nota: El Formación.función isarray () fue introducido en Ecmascript 5.

Conclusión

Esta publicación contiene todo el conocimiento básico y necesario requerido para comenzar con matrices en JavaScript. Primero presentamos qué matrices son, luego aprendimos a crear, asignar y cambiar los valores de una matriz.

Además, hemos aprendido algunas propiedades y funciones básicas incorporadas de matrices en JavaScript para obtener más interactivos con las matrices. Al final, discutimos el tipo de datos de matriz y la diferencia entre matrices y objetos en detalle.