Javascript reduce 101

Javascriptreduce() 함수는 유용한 배열 방법입니다.불행히도, 나는 그것을 이해하는 데 너무 많은 시간을 들인 적이 없다. 왜냐하면 그것은 너무 복잡해 보이기 때문이다.사실은, 이 점은 모두 어렵지 않다!우리는 그것을 충분한 작은 덩어리로 분해하기만 하면 된다.그럼 우리는 아직도 무엇을 기다리고 있습니까?우리 그것을 이해해 봅시다!

그것은 어떤 작용을 합니까?
PerMozilla:

The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in a single output value.

나는 이 묘사가 약간 오도된 것 같다. 왜냐하면 내가 '단값' 을 들으면 간단한 숫자/문자열 출력을 생각하지만, Reduce는 한 대상이나 다른 수조로 쉽게 되돌아갈 수 있기 때문이다.

예.
무수한 예들이 사용할 수 있다.기본 3가지 영역을 살펴보겠습니다.

단일 숫자

로 감소

를 수조로 축소

물체로 축소한다.

하나의 숫자로 감소
reduce에서 가장 자주 사용하는 용법은 수조의 모든 원소를 더하는 것이다.

const arr = [1,2,3,4];
arr.reduce((acc, currentVal) => acc + currentVal);
// returns 10

그래, 방금 무슨 일이 있었지?
Reduce는 배열의 모든 요소를 반복합니다. (우리가 시작 값을 주지 않으면 첫 번째 요소를 시작 값으로 사용합니다.)매번 교체할 때마다, 항상 하나의 누적기와 현재 값이 있다.네가 예를 읽을 때.매번 교체할 때마다 누가 누적기이고 누가 현재치인지 생각해 보자.

1차 교체에서 acc는 1이고currentVal은 2이다.그것은 acc + currentVal;1 + 2.

두 번째 교체에서 acc는 현재 3이고currentVal은 3이다.그것은 acc + currentVal;3 + 3.

세 번째 교체에서 acc는 현재 6이고currentVal은 4이다.그것은 acc + currentVal;6 + 4.

우리가 수조의 끝에 도달했기 때문에 교체가 멈춘다.Acc는 10살입니다.이것은 acc의 최종 값 10을 되돌려줍니다.

배열로 축소
가령 우리가 하나의 수조를 얻었다고 가정한다면

const wealthiestPeople = [
    {name: "Gates", worth: 105700000000},
    {name: "Bezos", worth: 131000000000},
    {name: "Buffet", worth: 82500000000},
    {name: "Arnault", worth: 76000000000},
    {name: "Helu", worth: 75600000000}
]

얘야, 너는 이 돈으로 무엇을 할 수 있느냐🤑? 어쨌든 우리는 순자산이 1000억 위안보다 낮은 모든 자산을 비추고 여과하며 같은 그룹으로 돌아가기를 바란다.

wealthiestPeople.reduce((acc, currentVal) => {
  if(currentVal.worth > 100000000000){
    return acc
  }
  acc.push(currentVal)
  return acc
 }, [])

// returns [ { name: 'Buffet', worth: 82500000000 },
  { name: 'Arnault', worth: 76000000000 },
  { name: 'Helu', worth: 75600000000 } ]

reduce는 동시에 비추고 필터할 수 있어요. 멋있지 않아요?우리 그것을 분해합시다.

리듀스 함수를 사용한 후에 초기 값 [] 을 전달했습니다.여느 때와 마찬가지로, 우리는 모든 원소를 교체하고 있다.

첫 번째 교체에서 우리의 acc는[],currentVal은{name: "Gates", worth: 105700000000}이다.그것은 가치 테스트를 통과하지 못했기 때문에 acc, 즉 []로 되돌아왔다.

두 번째 교체에서 우리의 acc는[]이다.currentVal은 {name: "Bezos", worth: 131000000000}입니다.그것도 가치 테스트를 통과하지 못했다.그것은 acc, 즉 [] 을 되돌려줍니다.

세 번째 교체에서 우리의 acc는[]이다.currentVal은 {name: "Buffet", worth: 82500000000}입니다.그것은 가치 테스트를 통과했다.Buffet 객체를 acc로 밀어 넣고 acc[{name: "Buffet", worth: 82500000000}]로 돌아갑니다.

네 번째 교체에서 우리의 acc는[{name: "Buffet", worth: 82500000000}]이다.currentVal은 arnault 객체입니다.그것은 가치 테스트를 통과했다.그것은 {name: "Arnault", worth: 76000000000} acc에 밀어넣었다. 이것은 acc, 즉 [{name: "Buffet", worth: 82500000000}, {name: "Arnault", worth: 76000000000}] 로 되돌아왔다.

다섯 번째 교체에서 우리의 acc는[{name: "Buffet", worth: 82500000000}, {name: "Arnault", worth: 76000000000}]이다.currentVal은 Helu 객체입니다.그것은 가치 테스트를 통과했다.그것은 물체를 밀고 있다.그것은 acc, 즉 [ { name: 'Buffet', worth: 82500000000 },{ name: 'Arnault', worth: 76000000000 },{ name: 'Helu', worth: 75600000000 } ] 을 되돌려줍니다.

나는 너희들이 그 속에서 떠오르는 패턴을 보기 시작하길 바란다.
한 훌륭한 독자는 필터를 사용하면 이 점을 쉽게 할 수 있다고 말했다.

wealthiestPeople.filter(function(p) {
  return p.worth < 1100000000000
})

이 경우 .filter()는 더 좋은 작업 도구이다.
reduce가 가장 유용한 예는 맵과 필터를 동시에 사용해야 한다는 것이다.예를 들어 우리가 가치에 따라 필터를 할 뿐만 아니라 금액을 문자열로 바꾸고 $ 값을 추가해야 한다. 예를 들어 다음과 같다.

// same reduce cod as above, except
// add this line before push
currentVal.worth = `$${currentVal.worth}.00`
acc.push(currentVal)
// returns
[ { name: 'Buffet', worth: '$82500000000.00' },
  { name: 'Arnault', worth: '$76000000000.00' },
  { name: 'Helu', worth: '$75600000000.00' } ]

또 다른 훌륭한 독자는 리듀스가 맵+Filter 조합보다 더 유용하다고 말했다. 왜냐하면 우리는 두 번이 아니라 한 번만 그룹을 교체할 수 있기 때문이다. 맵 기간에 한 번, Filter 기간에 한 번 교체할 수 있기 때문이다.맵 + Filter를 실행할 때마다 Reduce를 어떻게 사용하는지 고려하십시오!
예를 들어, 만약 당신이 그들의 모든 재산을 합치고 싶다면:

wealthiestPeople.reduce((acc, currentVal) => {
  return acc + currentVal.worth;
}, 0)

한 물체로 환원하다
우리의 마지막 임무는 그것을 하나의 물체로 간소화하는 것이다.같은 그룹을 지정하면, 우리는 그것을 하나의 대상으로 간소화하고, 그 이름을 키로 하고, {worth: xxx}를 값으로 할 수 있습니까?예를 들면 다음과 같습니다.

{
  'Buffet': {worth: xxx},
  'Gates': {worth: xxx},
  // etc
}

계속 읽기 전에, 당신은 왜 5-10분 동안 발버둥치지 않고, 스스로 그것을 해결해 보지 않습니까?만약 네가 끊겼다면 걱정하지 말고 (나도 처음 배울 때 끊겼다) 따라 읽어라!이것이 관건이니 적어도 한번 시도해 보아라.
.
.
.

wealthiestPeople.reduce((acc, currentVal) => {
  acc[currentVal.name] = {worth: currentVal.worth}
  return acc
}, {})

언제 Reduce를 사용할 줄 알았습니까?
언제든지, 우리가 하나의 그룹을 입력으로 얻기만 하면, Reduce를 사용할 기회가 있다.하나의 그룹이 완성될 때마다 다른 그룹, 대상, 값을 되돌려야 할 때, Reduce가 당신을 도와 완성할 수 있습니다.
다른 때는 Reduce를 사용하는 방법이 유용하다고 생각하십니까?아래
만약 무슨 문제/걱정이 있으면 저에게 알려 주세요.여기까지 읽어줘서 고마워요.즐거운 코딩!