Javascript의 Reduce() 메서드

reduce () 방법은 내가 자바스크립트를 공부할 때 그룹 방법에 흥미를 느끼는 방법 중의 하나이다.그것의 문법과 용어를 살펴본 후, 나는 가능한 한 달아났고, 다시는 뒤돌아보지 않았다.(하하!)

나는 분수를 잊지 않으려고 너무 집중했다 (;)나는 일이 그렇게 곤혹스러워 보이지 않을 때 이 문제를 다시 이야기하겠다고 그때 말했다.
그래서 이곳에서 나는 나의 첫 번째 블로그에 이 실제적인 놀라운 방법에 대해 썼다.

묘사

reduce () 방법은 그룹을 하나의 출력으로 간소화합니다.
더 많은 상하문을 추가하기 위해서, 그룹의 모든 요소에reducer 함수를 실행하고, 마지막 요소를 교체한 후에 하나의 출력 값을 되돌려줍니다.단일 출력 값을 통해 정수, 그룹 또는 대상이 될 수 있습니다.
너는 그것을 간소화 개념으로 간주할 수 있다. 너는 간소화 방법이 하나 있고, 이 방법 중에서 너는 간소화 방법이 하나 있다.뭐?!

나는 문법을 분해하면 이것을 더욱 쉽게 이해할 수 있다고 생각한다.

문법

array.reduce(callback( accumulator, currentValue, index, array ) {
  // return accumulator result from executing something
},[initialValue]);

매개 변수

리셋은 감속기다.그것은 수조의 모든 요소에 대한 함수입니다.

자세히 생각해 보면, 그것은'리셋'이나'리셋'수조의 모든 원소의 함수입니다.
리셋은 네 개의 매개 변수를 사용합니다: 누적기,currentValue, 인덱스와 그룹.
a, 누적기는 반복 반환 값의 운행 총수입니다.
b. CurrentValue는 에서 실행 중인 현재 요소를 리셋합니다.
c. Index는 에서 실행 중인 현재 요소의 인덱스를 리셋합니다(선택 사항).
d, Array는 이 방법을 호출하는 배열입니다.(옵션)
인덱스와 그룹 파라미터는 선택할 수 있습니다.만약 그것들이 없다면, Reduce 방법은 여전히 유효하다.잠시 후에 우리는 그것들이 필요한 예시를 볼 것이다.

initialValue (제공된 경우) 는 초기 누적기로 첫 번째 리셋에 전달되는 값입니다.이것은 선택할 수 있습니다. 당신이 시도하는 출력에 달려 있습니다.만약 숫자를 조합하려고 시도했을 뿐 초기 값을 제공하지 않는다면, 그룹의 첫 번째 인덱스는 누적기의 기본값이 되고, 첫 번째 리셋은 그룹의 두 번째 인덱스에서 실행됩니다.

이제 우리 모두 심심해졌다 (하지만 중요해!)물건을 내려놓고 시작합시다!

예제 1 - 배열의 정수와

일반적으로, 그룹의 정수의 총계를 얻기 위해 for 순환을 사용합니다.

let array = [5, 10, 15, 20]; 
let total = 0

for(let i = 0; i < array.length; i++){total += array[i]}
total // 50

reduce () 를 사용하여 같은 답을 얻습니다.

const array = [5, 10, 15, 20]; 
const sum = array.reduce(function(acc, cv){return acc + cv})
sum // 50

reduce를 사용하면 범위 밖의 변수를 정의할 필요가 없습니다. reduce 방법에는 모든 리셋의 반환 값을 기억하는 데 사용되는 누적기 (acc) 가 있습니다.
우리의 주요 목표는 숫자를 추가하는 것이기 때문에 초기 값을 제공할 필요가 없다.누적기 (acc) 의 초기 값이 제공되지 않을 때, 수조의 첫 번째 요소, 즉 5로 설정됩니다.
첫 번째 리셋 (함수) 은 두 번째 요소에서 실행되기 때문에currentValue는 10입니다.
이 함수에서, 우리의 리셋은currentValue를 누적기에 추가하는 것입니다.모든 원소에 이런 상황이 발생할 수 있다.모든 요소에 대한 리셋을 실행하면 이 방법은 최종 누적기 값을 되돌려줍니다.
일리가 있죠?(...없어요? 네, 계속 읽어요!)

예 2 객체 배열 줄이기

대상 그룹에reduce () 를 사용하여 최종적으로 대상을 얻을 수 있습니다!
예를 들어, 너는 너의 음식을 기록하기 시작하기로 결정했다.
(나는 매 끼니를 대표하는 부정확한 시계를 만들었으니 나를 평가하지 마라)

const meals = [
  {meal: 'breakfast', carbs: 90, fat: 200, calories: 600,},
  {meal: 'lunch', carbs: 70, fat: 100, calories: 400},
  {meal: 'salad', carbs: 100, fat: 80, calories: 800,}
];

우리는 리듀스 () 를 사용하여 하나의 대상을 출력할 것이다. 이 대상은 각 종류 (탄수화물, 지방, 칼로리) 의 일일 총 섭취량을 포함할 것이다.

const intake = meals.reduce(
  ({ carbs, fat, calories }, meal) => ({
    carbs: carbs + meal.carbs,
    fat: fat + meal.fat,
    calories: calories + meal.calories,
  }),
  {carbs: 0, fat: 0, calories: 0}
)
intake // { carbs: 260, fat: 380, calories: 1800 }

우리는 특정한 출력을 원하기 때문에, total (누적기) 의 초기 값으로 대상을 성명했습니다.우리는 또한 지향값 0의 키로 분류를 제공했다.모든 리셋에 대해 우리는 얻는다.탄수화물.지방적절한 속성에 추가합니다.마지막으로, 모든 종류의 총수를 포함하는 대상이 있어야 합니다.
아직도 읽고 있나...버텨, 나 하나 더 있어!

예 3 - 평균값 얻기

let grades = [90, 85, 94, 87];

이 그룹에서 reduce () 를 사용하여 평균값을 얻을 수 있습니다

let average = grades.reduce((total, grade, index, array) => {
 return total += grade/array.length
}, 0);
 average // 89

만약 주의하신다면, 인자로 색인과 그룹을 추가했습니다.이 방법을 호출하는 원시 그룹에 접근함으로써 누적기의 총수를 수조의 길이로 나누어 평균값을 얻을 수 있습니다.비록 우리는 이곳에서 색인을 사용하지 않았지만, 우리는 그것을 제공해야 한다.만약 우리가 색인을 제공하지 않고 수조만 전달했다면, 우리의 방법은 우리가 색인을 호출하고 있다고 생각할 것이다.수조가 아닌 길이.길다

결론

제가 제공한 예시를 제외하고,reduce로 계수를 만들고, 평수 그룹을 펼치고, 맵 () 을 바꾸는 방법 등등을 사용할 수 있습니다!내가 그것을 좋아하는 곳은 리셋에서 서로 다른 함수를 작성하고 수조의 모든 요소에 대해 같은 논리를 반복할 수 있는 것이다.
나는 Reduce () 방법의 전문가가 아니다. 매일 나는 그것을 사용하는 여러 가지 방법을 배우고 있다.
프로그래밍 초보자로서 내가 이 글을 쓴 것은 나 같은 초보자들에게 말하기 위해서이다. 비록 이것은 무섭게 보이지만, 그것을 배우는 것은 너에게 유리할 뿐이다.reduce () 방법의 기능이 강력합니다.