Matrices en JavaScript

Las matrices en JavaScript pueden resultar inicialmente confusas y difíciles de entender, especialmente cuando se trata de conceptos avanzados. Al principio, a mí también me costó entender las matrices en JavaScript. En este artículo, mi objetivo es desmitificar las matrices en JavaScript, desglosando todo lo que necesitas saber para que puedas trabajar con ellas con confianza.

Definición

¿Qué es una matriz?

Una matriz es una estructura de datos que almacena una colección de elementos, cada uno de los cuales es accesible mediante un índice. En muchos lenguajes de programación, las matrices almacenan elementos en ubicaciones de memoria contiguas. En JavaScript, las matrices son objetos similares a listas de alto nivel que se utilizan para almacenar múltiples valores en una sola variable. Están indexados a cero, lo que significa que el primer elemento está en el índice 0.

Matrices en JavaScript

Dado que JavaScript es un lenguaje de tipo dinámico, las matrices pueden contener elementos de diferentes tipos. Una matriz puede contener números, cadenas, valores booleanos, objetos e incluso otras matrices. Esto difiere de los lenguajes de tipo estático como Java o C, donde las matrices suelen ser homogéneas y deben contener elementos del mismo tipo de datos.

¿Por qué utilizar una matriz?

Las matrices ayudan a administrar datos de manera eficiente al permitirle almacenar, acceder y manipular valores. Se utilizan para cualquier cosa que involucre listas o colecciones, como administrar artículos en un carrito de comercio electrónico o realizar un seguimiento de las entradas de los usuarios.

Cómo crear una matriz en JavaScript

Hay varias formas de crear matrices en JavaScript, repasaré algunas de ellas:

1. Usando literales de matriz []

En JavaScript, puedes simplemente crear una matriz asignando [] a una variable o una constante

const numbers = [1, 2, 3];
const fruits = ["Apple", "Banana", "Orange"];

Observe que los elementos de una matriz están separados por comas,

2. Usando el constructor de matrices

También puede crear una matriz como una instancia de un constructor de matriz JavaScript nativo usando la siguiente sintaxis:
const miArray = nueva matriz()
El constructor Array toma uno o más argumentos (tienen que ser números) y se comporta de manera diferente según la cantidad de argumentos que le pases.
Si pasa un argumento: const myArray = new Array(4), ¡esto creará una nueva matriz con 4 elementos vacíos!

Si pasa más de un argumento: const myArray = new Array(1, 2, 3), esto crea una matriz de 3 números 1, 2 y 3 respectivamente y es similar a escribir const myArray = [1, 2 , 3]!

Sé que esto parece confuso, pero créeme, ¡es fácil si haces más ejercicios con ellos!

3. Usando el método Array.of

Las matrices también se pueden crear usando este método Array.of y simplemente creará una matriz que contiene todos los elementos que le pase como argumentos. ¡La diferencia entre usar Array.of y el constructor Array radica en cómo se comportan cuando reciben un argumento!

const array1 = Array.of(1); // This returns [1]
const array2 = Array.of(2, true, "hello"); // This returns [2, true, 'hello']

Observe cómo se comporta Array.of cuando recibe un parámetro, a diferencia del constructor Array que simplemente crea una matriz de n elementos vacíos, Array.of simplemente crea una matriz con un solo elemento que es el que usted pasó.

4. Usando el método Array.from

¡También puedes usar el método Array.from(iterable), que recibe un argumento que también debe ser iterable y crea una matriz a partir de él! Por ejemplo, puedes pasar un conjunto a este método y crear una matriz a partir de los valores de ese conjunto.

const mySet = new Set([2, 3, 4, 5, 5]);
const arrayFromSet = Array.from(mySet);

Manipulación de matrices en JavaScript

Hemos visto qué es una matriz y cómo se pueden crear matrices en JavaScript, ahora el problema restante que quizás te estés preguntando es: ¿cómo uso y trabajo con matrices?
Bueno, ¡esa es una buena pregunta!

Forma tradicional de trabajar con matrices en JavaScript

Tradicionalmente, usamos bucles para iterar sobre los elementos almacenados en una matriz y usarlos.
El siguiente ejemplo muestra cómo puede recorrer una matriz de números y mostrar el doble de cada número dentro de la matriz:

const numbers = [1, 2, 3, 4];
for (let i = 0; i 

  
  
  Usando la sintaxis moderna del método de matriz de JavaScript


JavaScript viene con muchos métodos de matriz (funciones de orden superior) listos para usar, son accesibles para todas las instancias de matriz a través del objeto Array.prototype, usamos esos métodos proporcionados por JavaScript para manipular y trabajar con datos almacenados en matrices. Incluso podemos crear nuestros propios métodos de matriz (lo veremos en el próximo capítulo)

 ¡Son métodos de orden superior, porque toman otras funciones como argumentos y usan esas funciones para manipular los datos almacenados en matrices! 

Esos métodos de matriz también se clasifican en dos categorías:



Mutación: ¡Estos bucles sobre la matriz y, al aplicar la función de devolución de llamada, también mutan la matriz original!

No mutantes: Estos iteran sobre la matriz y aplican la función de devolución de llamada, pero en lugar de mutar la matriz original, devuelven una nueva matriz


  
  
  1. método para cada ()


forEach() es un método de matriz de orden superior que se utiliza para recorrer los elementos de una matriz y aplicar una función de devolución de llamada en cada elemento sin modificar la matriz original ni crear una nueva matriz.

La sintaxis de las funciones de devolución de llamada, que suele ser una función anónima (normalmente la misma en todos los demás métodos):

function (currentElement[, index, targetArray]) {}




Esto significa que en cada iteración, el método de matriz tiene acceso al elemento actual en la iteración (currentElement), su índice en el índice de matriz que es opcional y la referencia a la matriz de destino en la que se ejecuta el método. targetArray que también es opcional. Pero puedes llamar a esos parámetros como quieras, sólo necesitas prestar atención a sus posiciones.


const numbers = [1, 2, 3, 4];
numbers.forEach((element) => {
  console.log(element * 2);
});




  
  
  2. método mapa ()


 Al igual que forEach map, también es otra forma de iterar sobre los elementos de la matriz y aplicar la función de devolución de llamada en cada elemento, pero a diferencia de forEach map, es un método que no muta y, por lo tanto, crea y devuelve la nueva matriz como resultado de iteración y no cambia la matriz original!

const numbers = [1, 2, 3, 4];
const squaredNumbers = numbers.map((element) => element * 2);
console.log(squaredNumbers);




  
  
  3. método filtro ()


El método filter() se utiliza cuando desea filtrar la matriz eliminando los elementos que no desea, ¡este es un método que no muta y devuelve una nueva matriz!

Para cada iteración, la devolución de llamada dentro del filtro() debe devolver un valor booleano que indique si el elemento actual se incluirá o no en la nueva matriz filtrada

const numbers = [1, 2, 3, 4];
const evenNumbers = numbers.filter((element) => element % 2 === 0);
console.log(evenNumber); // [2, 4]




  
  
  4. método reducir ()


El método 
reduce() es un poco diferente de los anteriores. Piense en ello como una forma de combinar todos los elementos de una matriz en un solo valor aplicando una función a cada elemento, uno por uno. Devuelve un valor único de todos los elementos de la matriz, lo usará cuando desee un valor único de todos los elementos de una matriz como suma, promedio, máximo o mínimo, ¡solo por nombrar algunos!

La sintaxis también es diferente

Array.reduce(función(acumulador, elemento[, índice, targetArray]) [, valorinicial])

Este método toma dos argumentos, el primero es la función de devolución de llamada al igual que otros métodos, y el segundo será el valor inicial de la variable acumuladora. Este segundo argumento es opcional, si no se proporciona, la reducción utilizará el primer elemento de una matriz como valor inicial del acumulador

¡El acumulador contiene el resultado devuelto por la función de devolución de llamada en cada iteración y será el resultado final devuelto por la reducción una vez que finalice la iteración!

Intentemos encontrar una suma a partir de una serie de números:

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((accumulator, element) => accumulator   element);
console.log(sum);




  
  
  4. método de corte ()


slice() es otro método de matriz útil en JavaScript, que se utiliza para extraer una pequeña porción de una matriz. slice() crea una nueva matriz copiando una sección de una matriz existente sin modificar la matriz original.

La sintaxis del método slice() es la siguiente:

Array.slice(startIndex, endIndex) startIndex representa un punto de inicio de extracción y es inclusivo y endIndex representa el elemento final de extracción, es opcional y exclusivo. Cuando no se proporciona, los métodos de corte copian una matriz desde startIndex hasta el final de una matriz.

const fruits = ["apple", "banana", "orange", "mango"];
const slicedFruits = fruits.slice(1, 3); // ['banana', 'orange']




  
  
  5. método de empalme ()


splice() es un método de matriz en JavaScript, que se utiliza para agregar, eliminar y reemplazar elementos en una matriz. splice() cambia el contenido de una matriz agregando, eliminando o reemplazando elementos en la matriz.

La sintaxis del método splice() es la siguiente:

Array.splice(índice, elementosParaRemove, nuevoElemento1, nuevoElemento2, ..., nuevoElementon)

Esto puede parecer confuso, pero déjame intentar explicarlo:

índice significa el índice inicial en la matriz en la que se supone que comienza la eliminación del elemento y es inclusivo.

elementsToRemove representa la cantidad de elementos del índice que desea eliminar de la matriz; si solo desea agregar nuevos elementos, puede proporcionar 0 en esta posición.

newElement1, newElement2, etc. ¡Estos pueden ser cualquier número de elementos que desee agregar en su matriz y reemplazarán elementos para eliminar los elementos que especificó en su matriz!

Mucho hablar, veamos un ejemplo:

const fruits = ["apple", "banana", "orange", "mango"];
// If we want to replace 'banana' with 'pineapple'
const splicedFruits = fruits.splice(1, 1, "pineapple"); // This will return ['apple', 'pineapple', 'orange', 'mango']




fruits.splice(1, 1, "piña") esto significa que del índice 1, elimina 1 elemento y agrega 'piña'

Si solo quisiéramos agregar piña en la matriz sin reemplazar otro valor, podríamos haber escrito esto como 

frutas.splice(1, 0, "piña") esto agregaría piña después del elemento en index1 y no eliminará ningún otro elemento de esta matriz.


  
  
  Conclusión


Las matrices son una característica fundamental y versátil de JavaScript, que ofrece una estructura esencial para almacenar y manipular colecciones de datos. Desde la creación simple de matrices utilizando literales hasta métodos más avanzados como Array.of() y Array.from(), las matrices JavaScript proporcionan una variedad de formas de manejar diferentes tipos de datos. Al dominar la manipulación de matrices a través de bucles o métodos modernos como forEach(), map(), filter(), reduce(), slice() y splice(), puede realizar operaciones complejas de manera eficiente. Comprender estas características de la matriz es clave para dominar JavaScript, lo que le permitirá escribir código más limpio, conciso y potente.