Cada método de matriz de JavaScript

Hola, les saluda Luis y hoy les traigo un nuevo post.

Shift, unshift, push, pop, map y más

Las matrices son un aspecto importante de cualquier lenguaje de programación, ya que podemos almacenar datos dentro de números, cadenas, objetos e incluso otras matrices.

Ser capaz de trabajar con matrices de forma eficaz es una habilidad importante para cualquier desarrollador, sin importar el lenguaje de programación. JavaScript proporciona muchos métodos para facilitar el trabajo en matrices.

Podemos definir una matriz de las siguientes formas:

Las matrices son uno de los tipos de datos presentes en JavaScript. Se utilizan para almacenar datos de cualquier tipo de datos, pero a diferencia de los objetos en JavaScript (similar al diccionario en Python), el índice de cada elemento es importante.

Aunque las matrices se pueden usar para almacenar datos de cualquier tipo, a menudo es útil almacenar datos similares en una matriz, como una matriz de usuarios que se inscribieron en un evento o una matriz de elementos pendientes.

Desde el fragmento de código anterior, definí dos métodos que puede usar:

El segundo método rara vez se usa, pero también es útil. Vamos a sumergirnos en el objetivo principal de este artículo. Estoy emocionado de guiarte a través de algunos de estos métodos. Espero que también estés emocionado de comenzar.

Métodos de matriz

Hay varios métodos que tiene una matriz de JavaScript. Este artículo lo guiará a través de algunos de ellos.

Comenzaré con los más comunes:

La mayoría de las veces, dada una matriz, querrá agregar un elemento al final o al principio, eliminar el primer o último elemento. Implementar lo siguiente es algo fácil.

El método push

El primer método del que hablaré es el método push. Este método simplemente agrega un elemento al final de la matriz y devuelve la longitud de la matriz usersData después de agregar el elemento.

El fragmento de código anterior define una matriz usersData, que imita el resultado de una llamada a la base de datos / API.

Luego creamos un nuevo usuario y nos gustaría agregar este nuevo usuario a nuestro usersData. En lugar de codificar las ID, una forma de lidiar con eso sin trabajar con bases de datos reales es establecer el valor de la ID en la longitud de la matriz antes de agregar el elemento más uno.

El método pop

El método pop simplemente elimina el último elemento de la matriz y devuelve ese elemento.

El fragmento de código anterior define una matriz usersData que imita el resultado de una llamada a la base de datos / API. Luego, eliminamos el último elemento de los datos.

El método shift

El método shift, a diferencia del método pop, simplemente elimina el primer elemento de la matriz y devuelve ese elemento. El fragmento de código anterior define una matriz usersData, que imita el resultado de una llamada a una base de datos / API.

El método unshift

El método unshift, a diferencia del método push, simplemente agrega un elemento al comienzo de la matriz y devuelve la longitud de la nueva matriz.

El fragmento de código anterior define una matriz usersData que imita el resultado de una llamada a la base de datos / API. Luego creé un nuevo objeto de usuario, que queremos agregar al comienzo de la matriz.

Métodos ES6

ES6, que es la forma abreviada de ECMAScript 6, es la versión de JavaScript que se lanzó en junio de 2015. Parece que los desarrolladores que mantienen JavaScript como mi mes de nacimiento porque es cuando se lanzaron la mayoría de sus versiones.

Si recién está aprendiendo JavaScript, ES6 le hará la vida mucho más fácil. Proporciona no solo métodos de matriz, sino que también proporciona cosas como desestructuración, funciones de flecha, una mejor manera de escribir código modular y orientado a objetos, entre otras cosas.

La mayoría de estos métodos de matriz de ES6 toman una función de devolución de llamada y, como resultado, se denominan métodos de matriz de orden superior. Las funciones de flecha son muy comunes en funciones de orden superior, ya que simplifican nuestro código

El método map

Si hay algún método de matriz ES6 que usará casi todo el tiempo, es este método. Es mi mejor método de matriz tanto en JavaScript como en Python.

Aunque algunos desarrolladores de JavaScript han intentado implementar map antes de ES6, el estándar map El método se introdujo en JavaScript en ES6. En el siguiente fragmento de código, implementé el map de tres formas:

Si quisiera implementar esta función sin los métodos de ES6, tendría que recorrer la matriz de forma nativa usando el estándar lazo for: for (let i = 0; i < arr.length; i++) doSomething(). Pero gracias a ES6, podemos hacer esto:

El método filter

El método filter es otro método de matriz de orden superior que debería utilizar hoy. Lo qué filter hace es simple. Dada una matriz de elementos, queremos devolver una nueva matriz de la matriz inicial, donde una condición particular es true.

La función de devolución de llamada debe devolver un valor booleano, y el elemento que obedece a la condición es el que estará en la nueva matriz.

El método reduce

Esto es muy bueno y creo que es el más difícil de todos los métodos que he mencionado hasta ahora. Lo que hace este método es usar una devolución de llamada particular para reducir la matriz.

Por ejemplo, si quiero encontrar la suma de todos los elementos en una matriz o el producto de todos los elementos en una matriz, este método es un buen método para usar, en lugar de repetir e incrementar la suma o producto inicial.

El método forEach

Este método es similar al método map, pero en este caso, no devuelve una nueva matriz. Es más de lo regular bucle for en JavaScript pero de una manera más limpia y avanzada.

Se necesitan tres parámetros, como es posible que haya sabido. El primero es el elemento de la matriz, el segundo es el índice del elemento (que es opcional) y el tercero es el objeto de matriz al que pertenece el elemento actual.

En el siguiente fragmento de código, utilicé forEach para manipular el Modelo de objetos de documento (DOM), lo cual es bastante bueno. Puedo actualizar la matriz y los elementos de la lista representados en el DOM se cambiarán automáticamente.

El método concat

Hay casos en los que querrá unir o fusionar dos o más matrices. Entonces, esta función será muy útil. Vocación concat en dos matrices produce una nueva matriz que consta de las dos matrices combinadas.

Todos y algunos métodos

Estos métodos son útiles si desea saber si todos los elementos de una matriz pasan una condición y si algunos de los elementos de una matriz pasan una condición, respectivamente.

Otros métodos incluyen:

El método fill

Rellena todos los elementos de la matriz con un valor que se pasa como parámetro: [1, 2, 3, 4].fill(1) // [1, 1, 1, 1].

El método entries

Esto hace que la matriz se comporte como un objeto con un par clave-valor, donde la clave es el índice y el valor es el elemento.

El método find

Este método devuelve el primer elemento de una matriz que pasa una prueba. Toma una función de devolución de llamada, que devuelve un valor booleano.

El método splice

Este método toma una cantidad infinita de parámetros, los dos primeros son el índice donde desea comenzar a insertar y eliminar elementos y la cantidad de elementos que desea eliminar, respectivamente, y los parámetros restantes son los elementos que desea agregar. la matriz. Devuelve una matriz de los elementos eliminados y muta la matriz.

El método reverse

El método reverse invierte la matriz. Tenga en cuenta que lo muta, lo que significa que cambia la matriz en lugar de simplemente crear una copia de ella.

El método join

Este método convierte una matriz en una matriz en una cadena. Tenga en cuenta que no muta la matriz, solo crea una copia de ella. El reverso de este método es el método split, que convierte una cadena en una matriz.

Toma una cadena como parámetro, que es lo que se utilizará para unir cada elemento de la matriz.

El método flat

El método flat es un nuevo método que se agregó en ES11 (ES11 se creó en junio). Este método aplana una matriz.

Una forma de hacerlo es recorrer la matriz inicial y recorrer cada elemento y obtener la suma y el producto.

Con ES6, puedo recorrer la matriz inicial y usar el método reduce  para obtener la suma y el producto de cada elemento en la matriz principal, utilizándolo para obtener la suma total y el producto.

Pero con la matriz flat, puedo aplanar la matriz principal, devolviendo así una única matriz que contiene solo números, y puedo usar el método reduce en él.

El método flatMap

Esta es la combinación de flat y map. Asigna cada elemento de la matriz a una función de devolución de llamada determinada y luego aplana la matriz resultante.

Digamos que nos gustaría obtener el cuadrado de cada elemento en una matriz no plana y nos gustaría aplanarlo. Este método nos facilitará la vida.

En la parte donde usé el flatMap en el fragmento de código a continuación, toma un elemento que es una matriz, y devolví una nueva matriz, que es el cuadrado de los elementos. Y finalmente, aplana la matriz resultante.

Espero que te haya sido de utilidad. Gracias por leer este post.