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 a los desarrolladores que mantienen JavaScript les gusta mi mes de nacimiento porque es cuando se lanzaron la mayoría de sus versiones.
Si acabas de aprender JavaScript, ES6 te hará la vida mucho más fácil. No sólo proporciona métodos de array, sino que también proporciona cosas como la desestructuración, funciones de flecha, una mejor manera de escribir código orientado a objetos y modular, entre otras cosas.
La mayoría de estos métodos de array de ES6 toman una función de devolución de llamada, y como resultado se llaman métodos de array de orden superior. Las funciones de flecha son muy comunes en las funciones de orden superior, ya que simplifica nuestro código
El método map
Si hay algún método de array de ES6 que usarás casi todo el tiempo, es este método. Es mi mejor método de array tanto en JavaScript como en Python. Aunque algunos desarrolladores de JavaScript han tratado de implementar map
antes de ES6, el método estándar map
fue introducido en JavaScript en ES6. En el fragmento de código de abajo, implementé el map
de tres maneras:
- Usando funciones regulares de JavaScript: Aquí pasé dos argumentos a la función, primero
item
, que es el elemento sobre el que quiero hacer algo, y un argumento opcional,index
, que es el índice de cada elemento - Usando funciones de flecha: También pasé dos argumentos como en el primer ejemplo, pero la función de devolución de llamada aquí es una función de flecha, lo que hace que el código sea mucho más ordenado.
- También utilicé funciones de flecha, pero pasé sólo un argumento – el elemento sobre el que quiero iterar. Esto es útil si no necesito el índice.

El método del filtro
El método filter
es otro método de matriz de orden superior que deberías usar hoy. Lo que hace filter
es sencillo. Dado un array de elementos, queremos devolver un nuevo array a partir del array inicial, donde una condición particular es true
. La función callback debe devolver un booleano, y el elemento que obedezca a la condición es el que estará en el nuevo array.

El método reduce
Este es muy bonito, 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 utilizar un callback particular para reducir el array. Por ejemplo, si quiero encontrar la suma de todos los elementos de un array o el producto de todos los elementos de un array, este método es un buen método para usar, en lugar de hacer un bucle e incrementar la suma o el producto inicial.

El método forEach
Este método es similar al método map
, pero en este caso, no devuelve un nuevo array. Es más bien el bucle habitual de for
en JavaScript pero de una forma más limpia y avanzada. Toma tres parámetros, como ya sabrás. El primero es el elemento del array, el segundo es el índice del elemento (que es opcional), y el tercero es el objeto del array al que pertenece el elemento actual.
En el fragmento de código de abajo, he utilizado forEach
para manipular el Modelo de Objetos del Documento (DOM), lo que está bastante bien. Puedo actualizar el array, y los elementos de la lista representados en el DOM cambiarán automáticamente.

El método concat
Hay casos en los que querrás unir o fusionar dos o más arrays. Entonces, esta función será muy útil. Al llamar a concat
sobre dos arrays se produce un nuevo array formado por los dos arrays combinados.

Los métodos every y some
Estos métodos son útiles si quieres saber si todos los elementos de un array pasan una condición y si algunos de los elementos de un array pasan una condición, respectivamente.

Otros métodos incluyen:
El método fill
Rellena cada elemento del array con un valor que se pasa como parámetro: .fill(1)
// .
El método entries
Hace que el array 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 un array que pasa una prueba. Toma una función de devolución de llamada, que devuelve un booleano.
El método splice
Este método toma un número infinito de parámetros -los dos primeros son el índice en el que se quiere empezar a insertar y eliminar elementos y el número de elementos que se quieren eliminar, respectivamente- y el resto de parámetros son los elementos que se quieren añadir al array. Devuelve un array con los elementos eliminados y muta el array.
El método inverso
El método inverso invierte el array. Tenga en cuenta que lo muta, es decir, cambia el array en lugar de sólo crear la copia del mismo.

El método join
Este método convierte un array en un array en una cadena. Tenga en cuenta que no muta la matriz – sólo crea una copia de la misma. El reverso de este método es el método split
, que convierte una cadena en un array. Toma una cadena como parámetro, que es lo que se usará para unir cada elemento del array.
El método flat
El método flat
es un nuevo método que se añadió en ES11 (ES11 se creó este junio). Este método aplana un array.
Digamos que tenemos un array que contiene otro array, y queremos encontrar la suma y el producto de cada elemento de los arrays dentro del array. Lo que quiero decir es que si tengo un array que está definido por , ]
, la suma debería ser 10
y el producto debería ser 24
.
Una forma de hacerlo es hacer un bucle a través del array inicial y hacer un bucle a través de cada elemento y obtener la suma y el producto.
Con ES6, puedo hacer un bucle a través del array inicial y usar el método reduce
para obtener la suma y el producto de cada elemento en el array principal – usando eso para obtener la suma y el producto totales. Pero con el array flat
, puedo aplanar el array principal, devolviendo así un único array que contenga sólo 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 dada y luego aplana la matriz resultante.
Digamos que nos gustaría obtener el cuadrado de cada elemento en una matriz no aplanada, y nos gustaría aplanarla. Este método nos facilitará la vida. En la parte donde usé el método flatMap
en el fragmento de código de abajo, toma un elemento que es un array, y devolví un nuevo array, que es el cuadrado de los elementos. Y finalmente, aplana el array resultante.
