Descubra las matrices de JavaScript y cómo usarlas

Como cualquier otro lenguaje de programación orientado a objetos, JavaScript proporciona muchas funciones y objetos para el desarrollo de software. En JavaScript, casi todo es un objeto y todos tienen su propio conjunto de poderosos beneficios. Por ejemplo, uno de los objetos más utilizados en JavaScript es una matriz.

En esta publicación, discutiremos el concepto de matrices de JavaScript, su sintaxis, el elemento de la matriz y cómo se manipulan las matrices en el software. También aprenderá a usarlos con ejemplos prácticos de matrices y métodos de matriz desde la perspectiva de un juego de navegador hipotético.

Empecemos.

¿Qué es una matriz de JavaScript?

Antes de continuar, si no está familiarizado con JavaScript o desea repasar el tema, consulte esta publicación que cubre los conceptos básicos de JavaScript y su uso.

Con eso en mente, echemos un vistazo a la sintaxis de matriz de JavaScript y discutamos las diferentes partes que componen una matriz.

¿Cuál es la forma correcta de escribir una matriz de JavaScript?

Esta pregunta tiene una respuesta que en verdad es algo ambigua. Es estándar tomar decisiones en función de sus propias necesidades y considere mantenerse en línea con el estilo de la declaración. Con eso en mente, veamos la sintaxis en términos de las diferentes formas de declarar una matriz.

Sintaxis de matriz de JavaScript

Hay dos formas diferentes de declarar e inicializar una matriz de JavaScript; el primero es crear una matriz usando el constructor Array. Este método es menos común, pero sigue siendo un método para crear e inicializar una matriz que debe conocer y conocer.

Sintaxis del generador de matrices de JavaScript

 
const array name = new Array(item1, item2, …);

En la mayoría de los casos, los desarrolladores usan este método para crear una nueva matriz cuando se conocen sus valores. Un gran ejemplo de esto sería usar este método para crear nuevas instancias de jugadores en el juego. El desarrollador puede proporcionar a este constructor una variable con datos ingresados ​​por todos los jugadores.

Vale la pena señalar que desde el lanzamiento de ECMAScript 6 (ES6), la creación de arreglos se ha hecho comúnmente usando el tipo de constante, ya que es más sólido y consistente. Además, no limita la capacidad de modificar la matriz. JavaScript le permite omitir Nuevo palabra clave al usar el generador de arreglos para construir arreglos. Esto significa que puede declarar una nueva matriz utilizando la siguiente sintaxis.

En el fragmento de código anterior, puede comenzar declarando uno nuevo constante variable seguida del nombre elegido para ella. Luego usa el constructor Array, que es una función para inicializar la nueva matriz. Luego, entre paréntesis, agrega los elementos que desea almacenar en la matriz, que pueden ser cualquier combinación de todos los tipos de datos en JavaScript.

Un literal de matriz de JavaScript

Un literal de matriz de JavaScript se parece a un método constructor. La diferencia más importante es el uso de la notación de llaves para crear e inicializar una nueva matriz con el nombre de la variable a la que la está asignando.

Inicialización de matriz vacía

Finalmente, la última forma de crear una matriz en JavaScript es inicializar una matriz vacía y agregarle elementos más adelante en su programa. La sintaxis para esto es simple, y es posible que ya lo hayas adivinado: inteligente, astuto si es así.

 
const array name = [ ];

Así es; es esencialmente un literal de matriz, pero sin elementos agregados. Armados con esta información, echemos un vistazo a cuáles son los elementos de la matriz y qué tipos de elementos están permitidos.

Elementos de matriz de JavaScript

Los elementos de matriz, también conocidos como elementos de matriz, no son más que los elementos almacenados en una matriz. Las entradas en una matriz suelen ser de diferentes tipos y, como resultado, se pueden usar para crear conjuntos de datos sólidos en estructuras complejas.

Los elementos de la matriz pueden ser cualquier objeto o tipo de datos compatible con JavaScript, incluidas cadenas, números enteros y valores booleanos. Las matrices de JavaScript también admiten colecciones de datos como elementos de matriz, lo que significa que una matriz puede contener elementos que también son matrices, matrices de matrices si lo desea.

Ahora que conoce los tipos de datos que pueden manejar los arreglos, echemos un vistazo a cómo acceder y manipular esos datos. A continuación, verá algunos ejemplos del uso de matrices en un juego de navegador hipotético.

Acceso a los elementos de la matriz

Para acceder a un elemento de matriz, debe usar la notación de llaves para indicar el índice del elemento de matriz deseado. Esta práctica es simple, pero con la advertencia de que el índice de la matriz comienza con cero, no con uno.

 
const player = [“Artemis”, 35, “5’11”, “06:23:00”]
Player[0]

Esta línea de código crea una matriz literal con cuatro valores y luego apunta al primer elemento de la matriz, que es nombre artemisa.

Método de longitud de matriz de JavaScript

Una discrepancia de índice puede parecer insignificante, pero en realidad causa más errores de programación de JavaScript de los que puede imaginar. Por ejemplo, al recorrer (o iterar) los elementos de una matriz, siempre es una buena idea considerar la longitud de la matriz. Esto es más fácil usando un método de matriz de JavaScript llamado longitudque devuelve el valor de la longitud de la matriz.

 
player.length

Si la matriz contiene diez elementos, la matriz de longitud devolverá ese valor. Sin embargo, el índice máximo de la matriz sería uno más pequeño. Por lo tanto, si tuviera que recorrer la matriz hasta el final con el método de longitud (), también tendría que restar uno del valor de retorno del método.

 
player.length -1

Ordenar matrices de JavaScript

Mesa clasificar() El método se utiliza para ordenar los elementos de la matriz. Por ejemplo, si una matriz contiene todos los números (cadenas meteorológicas o números enteros), el método de clasificación los ordenará según sus valores numéricos.

 
player.sort()

La página del desarrollador de Mozilla dice: «El orden de clasificación predeterminado es ascendente, creado al convertir elementos en cadenas y luego comparar su secuencia de valores de unidad de código UTF-16. «El uso del método sort() puede ser impredecible si se hace de forma incorrecta. Pero en general, todavía proporciona una forma sencilla de manejar las técnicas básicas de clasificación.

Para la mayoría de los usos básicos, el método de clasificación se comportará como se espera; consulte esta publicación de clasificación de JavaScript para obtener más ejemplos.

Un ejemplo de una matriz de JavaScript

Luego verá un ejemplo de codepen sobre cómo puede crear arreglos, interactuar con ellos e incluso modificarlos. En el mismo codepen, también verá un ejemplo de bucle de una matriz utilizando el método de longitud. Este codificador también es interactivo, lo que le permite jugar con el código y familiarizarse un poco más con el tema de las matrices.

ver la pluma Arreglos de JavaScript por HubSpot (@hubspot) en CódigoPen.

Si le gustó esta publicación, consulte nuestra publicación sobre el filtro de matriz de JavaScript y cómo funciona. El método de filtrado de matrices se basará aún más en la información de esta publicación, lo que lo preparará para comprender mejor cómo usar las matrices.

Antes de finalizar esta publicación, veamos un ejemplo de un video con matrices de JavaScript y cómo puede usarlas. En el próximo video, cubriremos los conceptos básicos y lo ayudaremos a visualizar los conceptos básicos detrás de las matrices de JavaScript.

Empezar a usar matrices de JavaScript

Aprendiste mucho sobre las matrices de JavaScript, cómo funcionan y cómo usarlas en tu programación. También aprendió algunas advertencias sobre los comportamientos de los arreglos y algunos métodos de arreglos. Ahora finalmente aprendió la sintaxis de una matriz de JavaScript y vio ejemplos de matrices combinadas con ellos.

Incluso tuviste la oportunidad de jugar con un ejemplo de código en vivo que cubre los temas de esta publicación. Más adelante, puede aprovechar esta información practicando diferentes usos de las matrices y diferentes formas de manipular, editar e incluso mostrar la información de la matriz en su navegador.