Trabaje con matrices de JavaScript como un jefe

Sepa de una vez por todas cómo indexar, agregar y eliminar elementos en arreglos

Steinar Inglaterra — https://unsplash.com

El Array en JavaScript es un objeto global que contiene una lista de elementos.

Es similar a cualquier variable, ya que puede usarla para contener cualquier tipo de datos. Sin embargo, tiene una diferencia importante: puede contener más de un elemento de datos a la vez.

Una matriz es una colección ordenada de valores : cada valor se denomina elemento y cada elemento tiene una posición numérica en la matriz, conocida como su índice .

Un elemento dentro de una matriz puede ser de cualquier tipo, y los diferentes elementos de la misma matriz pueden ser de diferentes tipos : cadenas, booleanos , incluso objetos u otras matrices. Esto significa que es posible crear una matriz que tenga una cadena en la primera posición, un número en la segunda, un objeto en la tercera, etc.

Las matrices en Javascript están basadas en cero , lo que significa que el índice del primer elemento es 0. Esto es muy importante, porque significa que siempre habrá un desplazamiento de una unidad: el primer elemento tiene un índice de 0, el segundo elemento tiene un índice de 1, y así sucesivamente.

Aquí hay un esquema de una matriz con diferentes tipos de elementos:

Aquí en el índice 0 encontramos una cadena, en el índice 1 un número entero, en el índice 2 un booleano y en el índice 3 otra matriz. Esto es muy útil cuando necesita almacenar colecciones de datos en un solo lugar; ahora veamos cómo crear y trabajar con arreglos.

Declarar una matriz

Las matrices pueden ser muy útiles ya que puede almacenar tantos elementos de datos en una matriz como desee (dentro de los límites del idioma, que son 2^(32) elementos).

Entonces, ¿cómo se crea una matriz? Debe declarar una variable con la palabra clave var , pero la sintaxis para definir los valores de la matriz es muy específica: debe decirle a Javascript que desea que sea una matriz.

Para hacerlo, tiene dos opciones: la matriz literal [] o la new palabra clave.

Sintaxis corta: con la notación literal de matriz []

La notación literal de matriz es simplemente una lista separada por comas de elementos de matriz entre corchetes.

var myArray = [ "Jack", "Sawyer", "John", "Desmond" ];

El contenido de la matriz se define entre los corchetes de apertura y cierre, y cada valor está separado por una coma.

Los valores se introducen de la misma manera que las variables simples, lo que significa que, por ejemplo, las cadenas deben declararse entre comillas.

Para definir una nueva matriz vacía, solo tiene que usar corchetes vacíos:

var miArray = [];

Sintaxis larga: con el constructor Array()

var lostArray = new Array("Jack", "Sawyer", "John", "Desmond" );var twinPeaksArray = new Array("Laura", 2, ["Bob", "Leland", "Dale"]);

La nueva palabra clave de esta sintaxis le pide a Javascript que defina una nueva matriz, cuyos elementos se pasan como parámetros.

Si sabe de antemano cuántos elementos contendrá la matriz, puede pasar el conteo como un parámetro al constructor, y la matriz se creará automáticamente con esa cantidad de ranuras para elementos (cada elemento se inicializará con el valor undefined ) :

var miArray = new Array(80);

Esto creará una matriz vacía con 80 ranuras inicializadas con el valor undefined .

Para definir una nueva matriz vacía sin un número particular de elementos, simplemente puede inicializar una nueva matriz sin parámetros:

var miArray = new Array();

Acceder a los elementos de una matriz

El valor de índice de cada elemento le permite referirse a cada pieza de datos dentro de su matriz: puede acceder a ella usando el operador [] :

var myArray = ["Jack", "Sawyer", "John", "Desmond"];

consola.log(miArray[0]); // Imprime “Jack”console.log(myArray[3]); // Imprime "Desmond"

Recuerde que los valores del índice comienzan en 0, no en 1. Esto significa que los índices de los arreglos comienzan en 0 y aumentan hasta el número de elementos, menos 1. Entonces, nuestro arreglo de cuatro elementos tiene índices de 0 a 3.

Como vimos, los arreglos pueden tener varias dimensiones, lo que significa que un elemento de arreglo puede contener un arreglo, cuyos elementos pueden contener arreglos, etc. Entonces, ¿cómo accedo a estos arreglos dentro de arreglos o arreglos multidimensionales?

Tomemos el ejemplo de una matriz que representa una familia, donde los hijos de la familia están contenidos en su propia matriz dentro de la matriz principal:

var familyArray = ["Marge", "Homer", ["Bart", "Lisa", "Maggie"]];

Podríamos representar esta matriz así:

Si quiero acceder al valor "Lisa", ¿cómo lo lograré?

Podemos visualizar la posición de "Lisa" aquí en naranja: en el índice 1 dentro de la matriz anidada, en el índice 2 de la matriz principal:

Para acceder al valor "Lisa", escribiré:

var lisa = familyArray[2][1];

consola.log(lisa); // Imprime "Lisa"

Esto puede continuar casi indefinidamente y permitirnos almacenar colecciones de datos muy bien organizadas anidadas unas dentro de otras, que serán accesibles a través de sus índices.

Agregar elementos a una matriz

Agregar un índice

Vimos que puede acceder a cada elemento en una matriz llamando a su índice correspondiente. Esto también nos permite agregar (o modificar) elementos declarando, por ejemplo:

var myArray = [ "Kate", "Sun"];myArray[2] = "Juliet";

consola.log(miArray); // Imprime "Kate, Sun, Juliet"

Aquí simplemente agregué un elemento en el índice 2 de la matriz, que no existía antes pero ahora contiene el valor "Julieta".

¿Qué sucede si declaro un elemento en un índice dado y no hay elementos intermedios? La matriz creará todos los elementos e inicializará aquellos que no tienen un valor con undefined :

var myArray = ["Kate", "Sol"];

miArray[5] = "Juliet";console.log(myArray.length); // Imprime "6"console.log(myArray); // Imprime ["Kate", "Sun", indefinido, indefinido, indefinido, "Juliet"]

Puede encontrar la longitud de una matriz usando la propiedad Array llamada length : aquí podemos ver que la matriz ahora tiene seis elementos, y los tres elementos a los que no se les ha asignado un valor no están definidos.

El método push()

El método push() permite agregar uno o varios elementos a una matriz. El método push() puede recibir una cantidad ilimitada de parámetros y cada parámetro representa un elemento para agregar al final de la matriz.

var myArray = [ "Kate", "Sol"];

miArray.push("Julieta"); // Agrega "Juliet" al final de la matrizmyArray.push("Libby", "Shannon");// Agrega "Libby" y "Shannon" al final de la matriz.

consola.log(myaArray); // Imprime ["Kate", "Sol", "Julieta", "Libby", "Shannon"]

El método unshift()

El método unshift() funciona como push() , excepto que los elementos se agregan al principio de la matriz.

var myArray = [ "Kate", "Sol"];

miArray.unshift("Juliet"); // Agrega "Juliet" al comienzo de la matrizmyArray.unshift("Libby", "Shannon");// Agrega "Libby" y "Shannon" al comienzo de la matriz.

consola.log(myaArray); // Imprime ["Libby", "Shannon", "Juliet", "Kate", "Sun"]

Suprimir elementos de una matriz

Los métodos pop() y shift()

Eliminan respectivamente el último y el primer elemento de la matriz:

var myArray = ["Jack", "Sawyer", "John", "Desmond", "Kate"];

miArray.pop(); // Elimina "Kate"myArray.shift(); // Elimina "Jack"

consola.log(miArray); // Imprime ["Sawyer", "John", "Desmond"]

El método splice()

El método splice() nos permite agregar/eliminar elementos a/de una matriz, e indicar específicamente el índice de los elementos que deben agregarse/eliminarse:

En el siguiente ejemplo, el splice agrega dos elementos que comienzan en el índice 2 (el tercer elemento):

var fruitArray = ["manzana", "melocotón", "naranja", "limón", "lima", "cereza"];fruitArray.splice(2, 0, "melón", "plátano");

consola.log(frutaArray); // Imprime ["manzana", "melocotón", "melón", "plátano", "naranja", "limón", "lima", "cereza"]

• El primer parámetro es el índice: especifica en qué posición de la matriz agregar/eliminar elementos. Aquí elegimos el índice 2 (con el valor “naranja”).
• El segundo parámetro es el número de elementos que se eliminarán. Aquí lo establecemos en 0, por lo que no se eliminarán elementos.
• Los siguientes parámetros opcionales son los nuevos elementos que se agregarán a la matriz. Aquí queremos agregar "melón" y "plátano" comenzando en el índice 2.

Para eliminar solo un elemento en el índice 2 ("naranja"), por ejemplo, tendría que escribir:

var fruitArray = ["manzana", "melocotón", "naranja", "limón", "lima", "cereza"];fruitArray.splice(2,1);

consola.log(frutaArray); // Imprime ["manzana", "melocotón", "limón", "lima", "cereza"]

Consulte también el método slice() para conocer otra forma de eliminar elementos de una matriz, pero esta vez devolverá una nueva matriz en lugar de modificar la original.

Querer aprender más ? Echa un vistazo a mis otros artículos sobre los conceptos básicos de JavaScript :

• Izar en JavaScript: una guía rápida
• Comprenda el alcance variable de JavaScript con facilidad
• Obtener su cabeza alrededor de "esto"
• Cómo usar los cierres de JavaScript con confianza
• Comprender "Por valor" y "Por referencia" en JavaScript
• Un manual rápido para fechas en JavaScript

Espero que haya disfrutado de esta descripción general rápida de cómo trabajar con arreglos en JavaScript.

¡Siéntase libre de comentar y darle me gusta a este artículo para que otros puedan encontrarlo fácilmente en Medium!