La guía definitiva para los métodos de matriz de JavaScript: Reducir

Programación

El reduce()método reduce una matriz de valores a un solo valor. El valor único que se devuelve puede ser de cualquier tipo.

reduce()es como la navaja suiza de métodos de matriz. Mientras que a otros les gusta map()y filter()brindan una funcionalidad específica, reduce()se pueden usar para transformar una matriz de entrada en cualquier salida que desee, mientras se conserva la matriz original.

Sintaxis

const newValue = arr.reduce(function(accumulator, currentValue, index, array) { // Do stuff with accumulator and currentValue (index, array, and initialValue are optional) }, initialValue);
  • newValue - el nuevo número, matriz, cadena u objeto que se devuelve
  • arr - la matriz en la que se opera
  • accumulator - el valor devuelto de la iteración anterior
  • currentValue - el elemento actual en la matriz
  • index - el índice del artículo actual
  • array- la matriz original en la que reduce()se llamó
  • initialValue - un número, matriz, cadena u objeto que sirve como valor inicial para la salida eventual

Ejemplos

ES5

var numbers = [1, 2, 3]; var sum = numbers.reduce(function(total, current) { return total + current; }, 0); console.log(numbers); // [1, 2, 3] console.log(sum); // 6

ES6

const numbers = [1, 2, 3]; const sum = numbers.reduce((total, current) => { return total + current; }, 0); const sumOneLiner = numbers.reduce((total, current) => total + current, 0); console.log(numbers); // [1, 2, 3] console.log(sum); // 6 console.log(sumOneLiner); // 6

Todo sobre initialValue

initialValue Previsto

El initialValueargumento es opcional. Si se proporciona, se utilizará como valor acumulador inicial ( total) en la primera llamada a la función de devolución de llamada:

const numbers = [2, 3, 4]; const product = numbers.reduce((total, current) => { return total * current; }, 1); console.log(product); // 24

Dado que el initialValuede 1 se proporciona después de la función de devolución de llamada, reduce()comienza al principio de la matriz y establece el primer elemento (2) como el valor actual ( current). Luego itera por el resto de la matriz, actualizando el valor del acumulador y el valor actual en el camino.

initialValue Omitido

Si initialValueno se proporciona, la iteración comenzará en el segundo elemento de la matriz (en el índice 1), con accumulatorigual al primer elemento de la matriz e currentValueigual al segundo elemento:

const numbers = [2, 3, 4]; const product = numbers.reduce((total, current) => { return total * current; }); console.log(product);

En este ejemplo, no initialValuese proporciona, por lo que reduce()establece el primer elemento de la matriz como el valor del acumulador ( totales igual a 2) y establece el segundo elemento de la matriz como el valor actual ( currentValuees igual a 3). Luego itera por el resto de la matriz.

Al reducir una matriz de cadenas:

const strings = ['one', 'two', 'three']; const numberString = strings.reduce((acc, curr) => { return acc + ', ' + curr; }); console.log(numberString); // "one, two, three"

Si bien es fácil omitir el initialValueargumento si su reduce()método devolverá un número o una cadena simple, debe incluir uno si devolverá una matriz u objeto.

Devolver un objeto

Transformar una matriz de cadenas en un solo objeto que muestra cuántas veces aparece cada cadena en la matriz es simple. Simplemente pase un objeto vacío ( {}) como initialValue:

const pets = ["dog", "chicken", "cat", "dog", "chicken", "chicken", "rabbit"]; const petCounts = pets.reduce(function(obj, pet) { if (!obj[pet]) { // if the pet doesn't yet exist as a property of the accumulator object, // add it as a property and set its count to 1 obj[pet] = 1; } else { // pet exists, so increment its count obj[pet]++; } return obj; // return the modified object to be used as accumulator in the next iteration }, {}); // initialize the accumulator as an empty object console.log(petCounts); /* { dog: 2, chicken: 3, cat: 1, rabbit: 1 } */

Regreso y matriz

Generalmente, si planea devolver una matriz, map()suele ser una mejor opción. Le dice al compilador (y a otros que lean su código) que cada elemento de la matriz original será transformado y devuelto como una nueva matriz de igual longitud.

Por otro lado, reduce()indica que todos los elementos de la matriz original se transformarán en un nuevo valor. Ese nuevo valor podría ser una matriz, cuya longitud podría ser diferente a la original.

Supongamos que tiene una lista de la compra como una serie de cadenas, pero desea eliminar todos los alimentos que no le gustan de la lista. Puede usar filter()para filtrar todo lo que no le gusta y map()devolver una nueva matriz de cadenas, o simplemente puede usar reduce():

const shoppingList = ['apples', 'mangoes', 'onions', 'cereal', 'carrots', 'eggplants']; const foodsIDontLike = ['onions', 'eggplants']; const newShoppingList = shoppingList.reduce((arr, curr) => { if (!foodsIDontLike.includes(curr)) { arr.push(curr); } return arr; }, []); console.log(newShoppingList); // ["apples", "mangoes", "cereal", "carrots"]

Eso es todo lo que necesita saber sobre el reduce()método. Como una navaja suiza, no siempre es la mejor herramienta para el trabajo. Pero te alegrará tenerlo en tu bolsillo trasero cuando realmente lo necesites.