Métodos de iteración de matriz (map, filter, reduce)

El lenguaje JavaScript tiene una clara preferencia por las matrices sobre otras estructuras de datos. Tienen muchas características específicas convenientes, por ejemplo, un conjunto completo de métodos de iteración: map, filter, reduce.

map

El método map() crea una nueva matriz con el resultado de llamar a la función especificada⚙️ para cada elemento de la matriz.

Video

Sintaxis

let new_array = arr.map(function callback( currentValue[, index[, array]]) {
    // Devuelve el elemento para new_array
}[, thisArg])

El método map llama a la función callback pasada ⚙️ una vez para cada elemento, en el orden en que aparecen, y construye una nueva matriz a partir de los resultados de su llamada. La función ⚙️ callback solo se llama para índices de matriz que tienen valores asignados, incluido undefined. No se llama para elementos de matriz faltantes (es decir, índices que nunca se establecieron, eliminaron o nunca se les asignó un valor).

La función ⚙️ callback se llama con tres argumentos:

• valor del elemento,
• índice de elementos
• y la matriz a través de la cual se realiza el paso.

Si el parámetro thisArg se pasó al método map, se usará como el valor de this al llamar a callback. De lo contrario, undefined se usará como el valor de this. En última instancia, el valor de this visto desde la función callback⚙️ se determina de acuerdo con las reglas habituales para definir this visto desde la función⚙️.

El método map no cambia la matriz a la que se llamó (¡aunque la función ⚙️ puede hacerlo!).

El rango de elementos procesados ​​por el método map se establece antes de la primera llamada a la función ⚙️ devolución de llamada. Los elementos agregados a la matriz después de que el método map haya comenzado a ejecutarse no serán visitados por la función ⚙️ callback. Si los elementos de matriz existentes son modificados por la función ⚙️ callback, sus valores pasados ​​a la función⚙️ serán los valores en el momento en que el método map los visite. Los elementos eliminados no serán visitados.

Ejemplos:

ejemplo sencillo

Tienes una matriz con muchos objetos, cada uno representando a una persona diferente. Puede haber una gran cantidad de datos aquí: nombre, edad, color de cabello y personaje de película favorito, pero por el momento todo esto no es obligatorio; solo desea obtener una serie de números de pasaporte de estas personas para darles una conferencia. pasa

Editor en vivo

function learnJavaScript() { const friends = [ { passport: '03005988', name: 'Joseph Francis Tribbiani Jr', age: 32, sex: 'm' }, { passport: '03005989', name: 'Chandler Muriel Bing', age: 33, sex: 'm' }, { passport: '03005990', name: 'Ross Eustace Geller', age: 33, sex: 'm' }, { passport: '03005991', name: 'Rachel Karen Green', age: 31, sex: 'f' }, { passport: '03005992', name: 'Monica Geller', age: 31, sex: 'f' }, { passport: '03005993', name: 'Phoebe Buffay', age: 34, sex: 'f' } ] let passports = friends.map(friend => friend.passport + ' ') return passports }

function learnJavaScript() {
  const friends = [
    { passport: '03005988', name: 'Joseph Francis Tribbiani Jr', age: 32, sex: 'm' },
    { passport: '03005989', name: 'Chandler Muriel Bing', age: 33, sex: 'm' },
    { passport: '03005990', name: 'Ross Eustace Geller', age: 33, sex: 'm' },
    { passport: '03005991', name: 'Rachel Karen Green', age: 31, sex: 'f' },
    { passport: '03005992', name: 'Monica Geller', age: 31, sex: 'f' },
    { passport: '03005993', name: 'Phoebe Buffay', age: 34, sex: 'f' }
  ]
  let passports = friends.map(friend => friend.passport + ' ')
  return passports
}

Resultado

Loading...

En ciertos casos, es posible que deba mostrar una matriz de objetos con teclas seleccionadas como una cadena :

Editor en vivo

function learnJavaScript() { const users = [ { id: 11, name: 'Adam', age: 23, group: 'editor' }, { id: 47, name: 'John', age: 28, group: 'admin' }, { id: 85, name: 'William', age: 34, group: 'editor' }, { id: 97, name: 'Oliver', age: 28, group: 'admin' } ] let result = users.map(({ id, age, group }) => `\n${id} ${age} ${group}`).join('') return result }

function learnJavaScript() {
  const users = [
    { id: 11, name: 'Adam', age: 23, group: 'editor' },
    { id: 47, name: 'John', age: 28, group: 'admin' },
    { id: 85, name: 'William', age: 34, group: 'editor' },
    { id: 97, name: 'Oliver', age: 28, group: 'admin' }
  ]

  let result = users.map(({ id, age, group }) => `\n${id} ${age} ${group}`).join('')

  return result
}

Resultado

Loading...

Crear una matriz de valores Fahrenheit a partir de una matriz de valores Celsius:

Un ejemplo con el procesamiento de cada elemento de la matriz con una fórmula dada :

Editor en vivo

function learnJavaScript() { let celsius = [-15, -5, 0, 10, 16, 20, 24, 32] let fahrenheit = celsius.map(t => t * 1.8 + 32 + ' ') return fahrenheit }

function learnJavaScript() {
  let celsius = [-15, -5, 0, 10, 16, 20, 24, 32]

  let fahrenheit = celsius.map(t => t * 1.8 + 32 + ' ')

  return fahrenheit
}

Resultado

Loading...

Mostrando una matriz de números usando una función que contiene un argumento :

Editor en vivo

function learnJavaScript() { const numbers = [1, 4, 9] const doubles = numbers.map(num => num * 2 + ' ') return doubles }

function learnJavaScript() {
  const numbers = [1, 4, 9]

  const doubles = numbers.map(num => num * 2 + ' ')

  return doubles
}

Resultado

Loading...

filter

El método filter() crea una nueva matriz con todos los elementos que pasan la prueba especificada en la función pasada⚙️.

El resultado de filter es siempre una matriz. Si la función ⚙️ para un elemento devuelve true (o cualquier valor "verdadero"), ese elemento se incluye en el resultado; de lo contrario, no.

Sintaxis

let newArray = arr.filter(function callback(element[, index, [array]])[, thisArg])

Descripción

El método filter() llama a la función pasada⚙️ callback una vez por cada elemento presente en la matriz y construye una nueva matriz con todos los valores para los que la⚙️ función callback devolvió true o un valor que se convierte en true cuando se convierte en boolean. La función ⚙️ callback se llama solo para índices de matriz que tienen valores asignados; no se llama para índices que se han descartado o nunca se les ha asignado un valor. Los elementos de la matriz que fallan en la función ⚙️ callback simplemente se omiten y no se incluyen en la nueva matriz.

La función ⚙️ callback se llama con tres argumentos:

• valor del elemento;
• índice de elementos;
• la matriz a través de la cual se realiza el paso.

Si se pasó un parámetro thisArg al método filter(), se usará como el valor de this al llamar a la función⚙️. De lo contrario, undefined se usará como el valor de this. En última instancia, el valor de this visto desde una función⚙️ se determina de acuerdo con las reglas habituales para definir this visto desde una función⚙️.

El método filter() no cambia la matriz a la que fue llamado.

El rango de elementos procesados ​​por el método filter() se establece antes de la primera llamada a la función ⚙️ callback. Los elementos agregados a la matriz después de que el método filter() haya comenzado a ejecutarse no serán visitados por la función ⚙️ callback. Si los elementos existentes de la matriz cambian, los valores pasados ​​a la función ⚙️ callback serán los valores en el momento en que el método filter() los visite. Los elementos eliminados no serán visitados.

Ejemplo

Filtrado de todos los valores pequeños

El siguiente ejemplo usa filter() para crear una matriz filtrada con todos los elementos mayores o iguales a value y todos los menores que value eliminados.

Editor en vivo

function learnJavaScript() { const isBigEnough = value => value >= 10 let filtered = [12, 5, 8, 130, 44].filter(isBigEnough) + ' ' return filtered }

function learnJavaScript() {
  const isBigEnough = value => value >= 10

  let filtered = [12, 5, 8, 130, 44].filter(isBigEnough) + ' '

  return filtered
}

Resultado

Loading...

reduce

El método reduce también se ejecuta en el contexto de una matriz y llama a la función ⚙️ para cada elemento, pero además, acumula los resultados de todas las llamadas en un solo valor. Este comportamiento se puede controlar.

reduce no pretende cambiar los elementos de una colección como lo hace map. Su tarea es calcular la "suma" de todos los elementos de una forma u otra y devolverla.

El valor resultante puede ser cualquier cosa: un número, una cadena, un objeto, una matriz; todo depende de la tarea que esté resolviendo el desarrollador de JavaScript.

El método reduce toma 2 parámetros:

• una función, como map, que se llamará secuencialmente para cada elemento de la colección;
• el valor inicial del acumulador.

La función ⚙️ también tiene 2 argumentos:

• el primero es el valor acumulado (acumulador);
• elemento de matriz directamente.

Sintaxis

array.reduce(function callback[, initialValue])

Descripción

El método reduce() ejecuta la función ⚙️ callback una vez para cada elemento presente en el arreglo, excepto los vacíos, tomando cuatro argumentos: el valor inicial (o el valor de la anterior llamada callback), el valor de el elemento actual, el índice actual y la matriz para iterar.

Cuando se llama a la función por primera vez⚙️, los parámetros accumulator y currentValue pueden tomar uno de dos valores. Si se pasa el argumento valorinicial al llamar a reduce(), entonces el valor de accumulator será igual al valor de initialValue, y el valor de currentValue será igual al primer valor en el formación. Si no se proporciona el argumento initialValue, entonces el valor de acumulador será igual al primer valor de la matriz, y el valor de currentValue será igual al segundo valor de la matriz.

Si la matriz está vacía y no se proporciona ningún argumento initialValue, se lanzará una excepción TypeError. Si la matriz consta de un solo elemento (independientemente de su posición en la matriz) y no se especifica el argumento initialValue, o si se especifica el argumento initialValue, pero la matriz está vacía, entonces se devolverá este valor sin llamar a la función⚙️ callback.

Valor inicial del acumulador

Echemos un vistazo al valor inicial. En el ejemplo, es igual a 0, ya que estamos contando un valor numérico: la suma de las edades. En lugar de cero, puede haber cualquier otro número/cadena (vacía o no)/objeto/matriz: cualquier valor desde el que comience la acumulación. Por ejemplo, combinemos los nombres de todos los amigos en una línea :

Editor en vivo

function learnJavaScript() { const Amigos = [ { passport: '03005988', name: 'Joseph Francis Tribbiani Jr', age: 32, sex: 'm' }, { passport: '03005989', name: 'Chandler Muriel Bing', age: 33, sex: 'm' }, { passport: '03005990', name: 'Ross Eustace Geller', age: 33, sex: 'm' }, { passport: '03005991', name: 'Rachel Karen Green', age: 31, sex: 'f' }, { passport: '03005992', name: 'Monica Geller', age: 31, sex: 'f' }, { passport: '03005993', name: 'Phoebe Buffay', age: 34, sex: 'f' } ] const names = friends.reduce((accumulator, friend) => `${accumulator} ${friend.name}, `, 'Friends: ') return names }

function learnJavaScript() {
  const Amigos = [
    { passport: '03005988', name: 'Joseph Francis Tribbiani Jr', age: 32, sex: 'm' },
    { passport: '03005989', name: 'Chandler Muriel Bing', age: 33, sex: 'm' },
    { passport: '03005990', name: 'Ross Eustace Geller', age: 33, sex: 'm' },
    { passport: '03005991', name: 'Rachel Karen Green', age: 31, sex: 'f' },
    { passport: '03005992', name: 'Monica Geller', age: 31, sex: 'f' },
    { passport: '03005993', name: 'Phoebe Buffay', age: 34, sex: 'f' }
  ]

  const names = friends.reduce((accumulator, friend) => `${accumulator} ${friend.name}, `, 'Friends: ')

  return names
}

Resultado

Loading...

Aquí, el valor inicial fue la cadena "Amigos:", a la que se agregaron gradualmente los nombres de todos los amigos.

Si no especifica explícitamente un valor de origen, implícitamente se convierte en el primer elemento 1️⃣ de la matriz. En este caso, ya no se llama a la función ⚙️.

Ejemplo

Suma de todos los valores en una matriz:

Editor en vivo

function learnJavaScript() { const initialValue = 0 const sum = [1, 2, 3].reduce((accumulator, currentValue) => { return accumulator + currentValue }, initialValue) return sum }

function learnJavaScript() {
  const initialValue = 0

  const sum = [1, 2, 3].reduce((accumulator, currentValue) => {
    return accumulator + currentValue
  }, initialValue)

  return sum
}

Resultado

Loading...

Y lo mismo en una línea de código:

Editor en vivo

function learnJavaScript() { const sum = [1, 2, 3].reduce((x, y) => x + y) return sum }

function learnJavaScript() {
  const sum = [1, 2, 3].reduce((x, y) => x + y)

  return sum
}

Resultado

Loading...

chaining

La programación de JavaScript admite un patrón conveniente de "encadenamiento": combina varias funciones ⚙️ en una cadena con transferencia secuencial del resultado.

Los tres métodos analizados se llaman en el contexto de una matriz, y dos 2️⃣ de ellos también devuelven una matriz. Por lo tanto, son muy fáciles de combinar.

Por ejemplo, calculemos la edad total de todos los niños :

Editor en vivo

function learnJavaScript() { const friends = [ { passport: '03005988', name: 'Joseph Francis Tribbiani Jr', age: 32, sex: 'm' }, { passport: '03005989', name: 'Chandler Muriel Bing', age: 33, sex: 'm' }, { passport: '03005990', name: 'Ross Eustace Geller', age: 33, sex: 'm' }, { passport: '03005991', name: 'Rachel Karen Green', age: 31, sex: 'f' }, { passport: '03005992', name: 'Monica Geller', age: 31, sex: 'f' }, { passport: '03005993', name: 'Phoebe Buffay', age: 34, sex: 'f' } ] let totalBoysYears = friends .filter(friend => friend.sex === 'm') .reduce((accumulator, friend) => accumulator + friend.age, 0) return totalBoysYears }

function learnJavaScript() {
  const friends = [
    { passport: '03005988', name: 'Joseph Francis Tribbiani Jr', age: 32, sex: 'm' },
    { passport: '03005989', name: 'Chandler Muriel Bing', age: 33, sex: 'm' },
    { passport: '03005990', name: 'Ross Eustace Geller', age: 33, sex: 'm' },
    { passport: '03005991', name: 'Rachel Karen Green', age: 31, sex: 'f' },
    { passport: '03005992', name: 'Monica Geller', age: 31, sex: 'f' },
    { passport: '03005993', name: 'Phoebe Buffay', age: 34, sex: 'f' }
  ]
  let totalBoysYears = friends
    .filter(friend => friend.sex === 'm')
    .reduce((accumulator, friend) => accumulator + friend.age, 0)
  return totalBoysYears
}

Resultado

Loading...

O recopilemos los números de pasaporte de las niñas para comprarles boletos de avión a Las Vegas :

Editor en vivo

function learnJavaScript() { const friends = [ { passport: '03005988', name: 'Joseph Francis Tribbiani Jr', age: 32, sex: 'm' }, { passport: '03005989', name: 'Chandler Muriel Bing', age: 33, sex: 'm' }, { passport: '03005990', name: 'Ross Eustace Geller', age: 33, sex: 'm' }, { passport: '03005991', name: 'Rachel Karen Green', age: 31, sex: 'f' }, { passport: '03005992', name: 'Monica Geller', age: 31, sex: 'f' }, { passport: '03005993', name: 'Phoebe Buffay', age: 34, sex: 'f' } ] let girlsPassports = friends.filter(friend => friend.sex === 'f').map(friend => friend.passport) + ' ' return girlsPassports }

function learnJavaScript() {
  const friends = [
    { passport: '03005988', name: 'Joseph Francis Tribbiani Jr', age: 32, sex: 'm' },
    { passport: '03005989', name: 'Chandler Muriel Bing', age: 33, sex: 'm' },
    { passport: '03005990', name: 'Ross Eustace Geller', age: 33, sex: 'm' },
    { passport: '03005991', name: 'Rachel Karen Green', age: 31, sex: 'f' },
    { passport: '03005992', name: 'Monica Geller', age: 31, sex: 'f' },
    { passport: '03005993', name: 'Phoebe Buffay', age: 34, sex: 'f' }
  ]
  let girlsPassports = friends.filter(friend => friend.sex === 'f').map(friend => friend.passport) + ' '
  return girlsPassports
}

Resultado

Loading...

Conclusión

Con el uso de estas maravillosas funciones⚙️ el código se ha vuelto más legible. Entonces, a continuación hay una lista de artículos que cubren este tema con más detalle.

¿Problemas?

Escribe en Discord o Telegram chat y suscríbete a nuestras noticias

Preguntas:

¿Función llamada para cada elemento de la matriz?

1. currentValue
2. array
3. callback

Un método que crea una nueva matriz con el resultado de llamar a la función especificada para cada elemento de la matriz:

1. map
2. filter
3. reduce

El valor del resultado del método reduce puede ser:

1. Número
2. matriz
3. Cualquier cosa

La suma de todos los valores en una matriz se logra mediante el método:

1. map
2. filter
3. reduce

Un método que crea una nueva matriz con todos los elementos que pasaron la prueba especificada en la función aprobada:

1. map
2. filter
3. reduce

Combinación de varias funciones en una cadena con transferencia secuencial del resultado:

1. unity
2. chaining
3. merger

Para comprender cuánto ha aprendido esta lección, realice una prueba en la aplicación móvil de nuestra escuela sobre este tema o en nuestro bot de Telegram.

Enlaces:

1. Simplifique su JavaScript: use mapa, reduzca y filtre
2. 15 ejemplos útiles de javascript de map(), reduce() y filter()
3. Array.prototype.map()
4. Array.prototype.filter()
5. Array.prototype.reduce()

Contributors ✨

Thanks goes to these wonderful people (emoji key):

AlisaNasibullina

Dmitriy Vasilev 💵

Resoner2005 🐛 🎨 🖋

Navernoss 🖋 🐛 🎨