Escribe bucles de JavaScript usando mapa, filtrar, reducir y buscar

Cómo realizar operaciones comunes en JavaScript donde puede usar bucles, usando map (), filter (), reduce () y find ()

Buclesse utilizan generalmente, en cualquier lenguaje de programación, para realizar operaciones en matrices: dada una matriz, puede iterar sobre sus elementos y realizar un cálculo.

Veamos cómo elegir las necesidades comunes y realizarlas mediante unProgramación funcionalAcercarse, a diferencia de usar bucles.

NOTA: No recomiendo un enfoque sobre el otro. Solo quiero presentar diferentes formas de realizar lo mismo y tal vez presentarle nuevas funciones que quizás nunca haya usado hasta ahora.

map,filter,reduce,find

Esas son 3 funciones de matriz realmente poderosas:

  • mapdevuelve una matriz con la misma longitud,
  • filtercomo su nombre lo indica, devuelve una matriz con menos elementos que la matriz original
  • reducedevuelve un solo valor (u objeto)
  • finddevuelve los primeros elementos de una matriz que satisface una condición

map,filteryreducese introdujeron en ES5, por lo que puede usarlos de manera segura tal como se implementaron en todos los navegadores desde hace años.

findse introdujo en ES6 / ES2015.

Ofrecen un másenfoque declarativo, en lugar de un enfoque imperativo (describaquédebería suceder, no escribir cada pequeño procesamiento que debería suceder)

Ejecute algo en cada elemento conmap

Un bucle se vería así:

const performSomething = (item) => {
  //...
  return item
}
const items = ['a', 'b', 'c']
items.forEach((item) => {
  performSomething(item)
})

Con un enfoque declarativo, le dice a JavaScript que realice algo en cada elemento usando:

const items = ['a', 'b', 'c']
const newArray = items.map((item) => performSomething(item))

Esto genera una nueva matriz, sin editar la original (lo que llamamos inmutabilidad)

Dado que usamos una sola función en la función de devolución de llamada del mapa, podemos reescribir la muestra como:

const items = ['a', 'b', 'c']
const newArray = items.map(performSomething)

Encontrar un solo elemento en la matriz

A veces es necesario buscar un elemento específico en la matriz y devolverlo.

Así es como lo haría con un bucle:

const items = [
  { name: 'a', content: { /* ... */ }},
  { name: 'b', content: { /* ... */ }},
  { name: 'c', content: { /* ... */ }}
]
for (const item of items) {
  if (item.name === 'b') {
    return item
  }
}

Aquí está la versión sin bucle, usandofind()(ES6 +):

const b = items.find((item) => item.name === 'b')

Aquí está la misma funcionalidad usandofilter()(ES5 +):

const b = items.filter((item) => item.name === 'b').shift()

shift () devuelve el primer elemento de la matriz sin generar un error si la matriz está vacía (devuelveundefineden ese caso).

Nota:shift()muta la matriz, pero la matriz que muta es la que devuelvefilter(), no la matriz original. Si esto suena inaceptable, puede verificar si la matriz no está vacía y obtener el primer elemento usandob[0].

Para propósitos de aprendizaje (no tiene mucho sentido en la práctica), aquí está la misma funcionalidad usandoreduce():

const items = [
  { name: 'a', content: { /* ... */ }},
  { name: 'b', content: { /* ... */ }},
  { name: 'c', content: { /* ... */ }}
]

const b = items.reduce((result, item) => { if (item.name === ‘b’) { result = item } return result }, null)

filter()yreduce()iterará sobre todos los elementos de la matriz, mientras quefind()será más rápido.

Iterar sobre una matriz para contar una propiedad de cada elemento

Usarreduce()para obtener un solo valor de una matriz. Por ejemplo sumar los elementoscontent.valuepropiedad:

const items = [
  { name: 'a', content: { value: 1 }},
  { name: 'b', content: { value: 2 }},
  { name: 'c', content: { value: 3 }}
]

usando un bucle:

let count = 0
for (const item of items) {
  count += item.content.value
}

se puede escribir como

const count = items.reduce((result, { content: { value } }) => result + value, 0)

Más tutoriales de js: