JavaScript에서 reduce() 방법을 사용하십시오.

reduce() es un método bastante 특유, ampliamente usado pero al mismo tiempo incomprendido por las comunidades de desarrollo. Junto con map() Y filter() Completan lo que me gusta deminar como la Trinidad de los métodos JavaScript.

En este pequeño post trataré de resumir y explicar las principales características del método reduce() 실용주의.

Al igual que map() Y filter() , reduce() itera sobre un arreglo dado.

Sintaxis

array.reduce( (acc, item, index, arr)=>{
//cuerpo de la funcion
}, inicilizador del acumulador)

reduce() 4개의 매개변수에 대한 콜백 수신:

acc: 변수 acumuladora donde se almacenarán valores parciales en cada iteración del arreglo.

항목: elemento actual del arreglo que se itera.

인덱스: posición del elemento anterior mencionando.

arr: arreglo como tal, sobre el cual se trabaja.

En la práctica, casi para cualquier cao se uso se acostumbra solo usar la variableacc eitem , por lo que una sintaxis más resumida se vería de la siguiente manera:

array.reduce( (acc, item)=>{
//cuerpo de la funcion
}, inicilizador del acumulador)

El inicializador del acumulador se explicará a detalle con los ejemplos practicos.

reduce()의 특성

reduce() 감소(valga la redundancia) el arreglo a un solo valor, en otras palabras, devolverá un solo valor.

Ejecuta un callback para cada elemento del arreglo.

El valor de retorno de la función se almacena en una variable acumuladora ( acc ).

No se ejecuta en arreglos vacíos.

Es 불변, no altera ni modifica el arreglo original.

Basta de conceptos teóricos, ahora anicemos ejemplos prácticos:

Imaginemos que tenemos un array de números y deseamos sumar todos sus valores, podríamos usar reduce() de la siguiente manera:

let numeros =[2,9,7,16,3,78];
let suma = numeros.reduce((acc,numero) => acc + numero);
console.log(suma);
//salida: 115

자세한 설명은 다음과 같습니다.

Al no usar un valor de inicialización, acc = 2 , por ser el primer elemento de nuestro arreglo.
La iteración del arreglo, por ende, comenzará desde el index 1, osea, el número 9: numero = 9다음은 프로그램에 대한 설명입니다:


반복
acc
숫자
acc + 숫자


1ra 반복
2
9
11

2일 반복
11
7
18

3차 반복
18
16
34

4회 반복
34
삼
37

5초 반복
37
78
115


Analizando iteración a iteración se comprende mucho mejor de donde sale el resultado final.

Veamos otro 예:
Imaginemos que tenemos un arreglo de objetos que contienen pedidos de comida, entonces el chef nos pide que le indiquemos cuantos son los pedidos cuyo plato principal sea "sajta", ¿cómo podríamos hacer esto con reduce() ? El arreglo de objetos es el siguiente:

let pedidos = [
  {entrada:'ensalada de pepinos', principal: 'sajta', postre: "platano"},
  {entrada:'ensalada de tomates', principal: 'silpancho', postre: "helado"},
  {entrada:'ensalada simple', principal: 'sajta', postre: "yogurt"},
  {entrada:'ensalada simple', principal: 'anticucho', postre: "yogurt"},
  {entrada:'ensalada de tomates', principal: 'sajta', postre: null}
];

La sajta es un plato típico boliviano elaborado en base a pollo, ají, papas, y salsa

가능한 해결책은 다음과 같습니다.

let cantidadSajta = pedidos.reduce((contador,pedido)=>{
  if(pedido.principal === "sajta")
    return contador+1;
  else
    return contador;
},0)
console.log(cantidadSajta); //salida: 3

Podemos observar que en este ejemplo si escribimos una inicialización para la variable contador que es 0, ( contador = 0 ). Esto hace que el iterador recorra el arreglo desde el índice 0 y no desde el índice 1 como vimos en el anterior ejemplo.

Encontrar el 미니모 오 맥시모

Los métodos min() Y max() de Math usadas con reduce() facilitan encontrar el mínimo y máximo en un arreglo de números:

let numeros =[8,3,7,9,4,0];
const max = numeros.reduce((acc,numero) => Math.max(acc,numero))
console.log(max); //salida: 9

let numeros =[8,3,7,9,4,0];
const min = numeros.reduce((acc,numero) => Math.min(acc,numero))

console.log(min); //salida: 0

Trabajar con arreglos anidados

Imaginemos que contamos con un arreglo anidado y necesitamos convertirlo en un arreglo plano.

let numeros =[1,2,[3,4,5],6,7,[8],[9,10]];
const planos = numeros.reduce((acc,item) =>{
  return acc.concat(item)
},[]);

console.log(planos);
//salida: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

결론

reduce() itera y compara cada elemento de un arreglo, aplicando un callback y devolviendo un solo valor.

El callback recibe 4 parametros pero en la práctica solo usamos 2: acc eitem .

Es un método inmutable.

참조

https://www.w3schools.com/jsref/jsref_reduce.asp