Métodos de arrays más importantes en JavaScript (filter, map, ...)
Uno de los aspectos más importantes cuando trabajamos con arrays en javascript es el amplio y coherente abanico de métodos que existen para manipular los datos. En este post, veremos los métodos más importantes de arrays en javascript.
En la siguiente imagen tomada de reddit, se resume los métodos más importantes en javascript y su aplicación. Es bastante intuitiva!.
map
Este método crea un nuevo array a partir de cada elementos del array original.
const numbers = [1,2,3]
const squares = numbers.map(number => {
return number * number
})
console.log(squares)
El resultado sería el siguiente:
[1,4,9]En objetos es comúnmente usada para hacer un pluck de alguna propiedad.
const devs = [
{name: 'Steave', role: 'frontend'},
{name: 'Andrew', role: 'backend'}
]
const names = devs.map(dev => {
return dev.name
})
console.log(names)
El resultado sería el siguiente:
['Steave', 'Andrew']Otro uso común es modificar una o más propiedades del array original. Esto de hecho no lo considero una buena práctica debido a que contradice uno de los principios de la programación funcional y debido a que se modifica el array original no tiene sentido retornar uno nuevo.
const devs = [
{name: 'Steave', role: 'frontend'},
{name: 'Andrew', role: 'backend'}
]
const allDevs = devs.map(dev => {
dev.role = 'backend'
return dev
})
console.log(devs)
La contraparte del ejemplo anterior, es retornar un nuevo array con algunas propiedades modificadas si alterar el original.
const devs = [
{name: 'Steave', role: 'frontend'},
{name: 'Andrew', role: 'backend'}
]
const allDevs = devs.map(dev => {
return {
...dev,
role: 'backend'
}
})
console.log(devs)
filter
Este método crea un nuevo array con todos los elementos que pasan el test en la condición de la función.
const devs = [
{name: 'Steave', role: 'frontend', age: 24},
{name: 'Andrew', role: 'backend', age: 28},
{name: 'James', role: 'backend', age: 17}
]
const filtered = devs.filter(dev => {
return dev.age > 20
})
console.log(filtered)
El resultado sería el siguiente:
[
{name: 'Steave', role: 'frontend', age: 24},
{name: 'Andrew', role: 'backend', age: 28},
]En estos términos podemos decir que el resultado es un subconjunto del array principal.
find
Este método retorna el elemento del array que cumpla la condición dada por la función.
const devs = [
{name: 'Steave', role: 'frontend', age: 24},
{name: 'Andrew', role: 'backend', age: 28},
{name: 'James', role: 'backend', age: 17}
]
const filtered = devs.find(dev => {
return dev.age === 17
})
console.log(filtered)
El resultado sería el siguiente:
{name: 'James', role: 'backend', age: 17}findIndex
Este método retorna el índice del primer elementos que cumpla con la condición provista en la función. Si no encuentra ningún elemento retorna -1.
const devs = [
{name: 'Steave', role: 'frontend', age: 24},
{name: 'Andrew', role: 'backend', age: 28},
{name: 'James', role: 'backend', age: 17}
]
const index = devs.findIndex(dev => {
return dev.age < 20
})
console.log(index)
El resultado sería el siguiente:
2fill
Este método cambia todos los elementos indicados en el array por un valor estático y retorna el array modificado.
const devs = ['Steave', 'Andrew', 'James', 'Bashir']
const cleaned = devs.fill(null, 1, 3)
console.log(cleaned)
El resultado sería el siguiente. El script llena los resultados desde la posición 1 hasta la 3 sin incluir esta última.
['Steave', null, null, 'Bashir']some
Este método true si al menos uno de los elementos en el array pasa la validación de la función.
const devs = [
{name: 'Steave', role: 'frontend', age: 24},
{name: 'Andrew', role: 'backend', age: 28},
{name: 'James', role: 'backend', age: 17}
]
const some = devs.some(dev => {
return dev.age < 20
})
console.log(some)
El resultado sería el siguiente:
trueevery
Este método true si todos los elementos en el array pasa la validación de la función.
const devs = [
{name: 'Steave', role: 'frontend', age: 24},
{name: 'Andrew', role: 'backend', age: 28},
{name: 'James', role: 'backend', age: 17}
]
const every = devs.every(dev => {
return dev.age < 20
})
console.log(every)
El resultado sería el siguiente:
false