Mapa, reducción y filtrado de JavaScript: funciones de matriz JS explicadas con ejemplos de código

Mapear, reducir y filtrar son todos métodos de matriz en JavaScript. Cada uno iterará sobre una matriz y realizará una transformación o cálculo. Cada uno devolverá una nueva matriz basada en el resultado de la función. En este artículo, aprenderá por qué y cómo usar cada uno.

Aquí hay un resumen divertido de Steven Luscher:

Mapa / filtro / reducción en un tweet:

mapa ([?,?,?], cocinar)

=> [?,?,?]

filtro ([?,?,?], es vegetariano)

=> [?,?]

reducir ([?,?], comer)

=>?

- Steven Luscher (@steveluscher) 10 de junio de 2016

Mapa

El map()método se utiliza para crear un nuevo arreglo a partir de uno existente, aplicando una función a cada uno de los elementos del primer arreglo.

Sintaxis

var new_array = arr.map(function callback(element, index, array) { // Return value for new_array }[, thisArg])

En la devolución de llamada, solo elementse requiere la matriz . Por lo general, se realiza alguna acción sobre el valor y luego se devuelve un nuevo valor.

Ejemplo

En el siguiente ejemplo, cada número de una matriz se duplica.

const numbers = [1, 2, 3, 4]; const doubled = numbers.map(item => item * 2); console.log(doubled); // [2, 4, 6, 8]

Filtrar

El filter()método toma cada elemento de una matriz y le aplica una declaración condicional. Si este condicional devuelve verdadero, el elemento se envía a la matriz de salida. Si la condición devuelve falso, el elemento no se envía a la matriz de salida.

Sintaxis

var new_array = arr.filter(function callback(element, index, array) { // Return true or false }[, thisArg])

La sintaxis de filteres similar a map, excepto que la función de devolución de llamada debe regresar truepara mantener el elemento, o de falseotra manera. En la devolución de llamada, solo elementse requiere el.

Ejemplos

En el siguiente ejemplo, los números impares se "filtran", dejando solo números pares.

const numbers = [1, 2, 3, 4]; const evens = numbers.filter(item => item % 2 === 0); console.log(evens); // [2, 4]

En el siguiente ejemplo, filter()se usa para obtener todos los estudiantes cuyas calificaciones son mayores o iguales a 90.

const students = [ { name: 'Quincy', grade: 96 }, { name: 'Jason', grade: 84 }, { name: 'Alexis', grade: 100 }, { name: 'Sam', grade: 65 }, { name: 'Katie', grade: 90 } ]; const studentGrades = students.filter(student => student.grade >= 90); return studentGrades; // [ { name: 'Quincy', grade: 96 }, { name: 'Alexis', grade: 100 }, { name: 'Katie', grade: 90 } ]

Reducir

El reduce()método reduce una matriz de valores a un solo valor. Para obtener el valor de salida, ejecuta una función reductora en cada elemento de la matriz.

Sintaxis

arr.reduce(callback[, initialValue])

El callbackargumento es una función que se llamará una vez para cada elemento de la matriz. Esta función toma cuatro argumentos, pero a menudo solo se usan los dos primeros.

  • acumulador : el valor devuelto de la iteración anterior
  • currentValue : el elemento actual en la matriz
  • índice : el índice del elemento actual
  • matriz : la matriz original en la que se llamó a reducir
  • El initialValueargumento es opcional. Si se proporciona, se utilizará como valor acumulador inicial en la primera llamada a la función de devolución de llamada.

Ejemplos

El siguiente ejemplo suma todos los números en una matriz de números.

const numbers = [1, 2, 3, 4]; const sum = numbers.reduce(function (result, item) { return result + item; }, 0); console.log(sum); // 10

En el siguiente ejemplo, reduce()se usa para transformar una matriz de cadenas en un solo objeto que muestra cuántas veces aparece cada cadena en la matriz. Observe esta llamada para reducir pasa un objeto vacío {}como initialValueparámetro. Esto se utilizará como valor inicial del acumulador (el primer argumento) pasado a la función de devolución de llamada.

var pets = ['dog', 'chicken', 'cat', 'dog', 'chicken', 'chicken', 'rabbit']; var petCounts = pets.reduce(function(obj, pet){ if (!obj[pet]) { obj[pet] = 1; } else { obj[pet]++; } return obj; }, {}); console.log(petCounts); /* Output: { dog: 2, chicken: 3, cat: 1, rabbit: 1 } */

Explicación del video

Vea el video a continuación del canal de YouTube freeCodeCamp.org. Cubre los métodos de matriz discutidos, además de algunos más.