JavaScript에서 Reduce를 사용하는 방법

reduce는 그룹을 하나의 값으로 변환하는 데 도움을 주는 그룹 방법입니다.보아하니 이렇다.

const callback = (accumulator, currentValue, index) => {
  // return something here
}
const result = array.reduce(callback, initialValue)

initialValue는 시작하려는 값입니다.

누적기는 지난번에 반복해서 되돌아온 값이다.첫 번째 교체는initialValue이 될 것이다.

currentValue는 현재 반복의 배열 항목입니다.

우리 몇 가지 예를 봅시다.

화해를 구하다

만약 네가 숫자 목록을 가지고 있다면.너는 이 숫자들의 총계를 찾아내고 싶다.

const numbers = [1, 2, 3, 4, 5]

이것은 이 숫자들에 대해 화합을 구하는 코드다.

const total = numbers.reduce((acc, num) => acc + num, 0)
console.log(total) // 15

무슨 일이 일어났는지 한 걸음 한 걸음 봅시다.
우선initialValue을 reduce에 전달한다.이 값initialValue은 다음과 같은 이유로 0이어야 합니다.
우리는 accumulator가 하나의 숫자가 되기를 바란다.우리는 initialValue 총수에 영향을 미치는 것을 원하지 않는다. 초기값은 0으로 설정
1차 교체accumulator는initialValue이 될 것이다.currentValue가 첫 번째 수조 항목이 될 것이다.
누적기 값은 0
currentValue는 배열의 첫 번째 항목입니다.
리셋에서 값을 되돌려야 합니다.이 값은 다음 값accumulator으로 사용됩니다.우리는 화해를 원하기 때문에 accumulator와currentValue의 화해로 돌아간다.
다음 반환값 계산accumulator 두 번째 교체에서 반환 값을 받아들인다.currentValue가 두 번째 수조 항목이 될 것이다.
이전 반환값은 다음 누적기로 사용
currentValue가 배열의 두 번째 항목이 됨
우리는 두 값의 총계, accumulator와 currentValue를 되돌려 주었다.이 과정은 전체 진열에서 순환할 때까지 지속된다.최종 값은 함수 호출에 되돌아옵니다.
반환값 계산 및 반복

배열을 객체로 축소

이 예에서 우리는 함께 reduce 방법을 만들 것이다.
만약 우리가 일련의 과일을 가지고 있다면.우리는 모든 과일의 수량을 알고 싶다.

const fruits = ['apple', 'apple', 'banana', 'banana', 'orange', 'pear', 'apple']

// What you want
// {
//   apple: 3,
//   banana: 2,
//   orange: 1,
//   pear: 1
// }

우선, 우리는 빈 대상을 reduce로 전달해야 한다. 왜냐하면 우리는 대상을 만들고 싶기 때문이다.

const tally = fruits.reduce((accumulator, fruit) => {
  // Do something
}, {})

1차 교체initialValue는accumulator이 될 것이다.{}는 fruit가 될 것이다.
첫 번째 교체에서, 우리는 누적기가 아직 결과가 없다는 것을 안다.apple 없음{}.여기apple를 apple에 추가하고 싶습니다.accumulator를 apple에 추가하는 동시에 애플의 수량을 1로 설정합니다.

const tally = fruits.reduce((accumulator, fruit) => {
  return accumulator[fruit] = 1
}, {})

두 번째 교체에서accumulator는 이전에 되돌아온 값을 받아들인다.accumulator는 또 다른 사과다.

fruit : accumulator

{ apple: 1 } : fruit

여기서 우리는 사과의 수를 늘리고 싶다apple.이를 위해 accumulator에 apple 속성이 있는지 확인해야 합니다.만약 그렇다면, 우리는 그 값을 1로 늘릴 것이다.

const tally = fruits.reduce((accumulator, fruit) => {
  if (accumulator[fruit]) {
    accumulator[fruit] = accumulator[fruit] + 1
  } else {
    accumulator[fruit] = 1
  }

  return accumulator
}, {})

이렇게!다른 과일들도 이 과정을 반복할 것이다.로그인accumulator하면 우리가 원하는 대상을 볼 수 있습니다.

{
  apple: 3,
  banana: 2,
  orange: 1,
  pear: 1
}

다음은 Reduce 함수를 정리합니다.우리는 삼원 연산자로 실현할 수 있다.

const tally = fruits.reduce((accumulator, fruit) => {
  const fruitCount = accumulator[fruit]
  fruitCount
    ? accumulator[fruit] = fruitCount + 1
    : accumulator[fruit] = 1
  return accumulator
}, {})

패턴 벤드펴기

만약 우리가 수조를 포함하는 수조가 있다고 가정한다면.우리는 이 그룹을 모든 값을 포함하는 그룹으로 바꾸고 싶다.이 과정을 편평화라고 한다.

const array = [
  [1, 2, 3, 4, 5],
  [6, 7, 8, 9, 10]
]

// What we want:
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

어레이를 벤드펴기하려면 어레이부터 시작해야 합니다tally.이것은 우리가 출력이 하나의 그룹이기를 희망하기 때문이다.

const flattened = array.reduce((accumulator, item) => {
  // Do something
}, [])

첫 번째 교체 중, reduce 은 빈 그룹이 될 것이다.accumulator는 다섯 항목을 포함하는 수조가 될 것이다.

item : accumulator

[] : item

우리는 [1, 2, 3, 4, 5]를 item로 합병하고 싶다.우리는 accumulator를 사용하여 이 점을 실현할 수 있다.

const a1 = []
const a2 = [1, 2, 3, 4, 5]
const merged = a1.concat(a2)
console.log(merged) // [1, 2, 3, 4, 5]

이 방법은 누적기에 값이 포함되어 있어도 유효합니다.

const a1 = [1, 2, 3]
const a2 = [4, 5]
const merged = a1.concat(a2)
console.log(merged) // [1, 2, 3, 4, 5]

concat 코드는 다음과 같습니다.

const flattened = array.reduce((accumulator, item) => {
  return accumulator.concat(item)
}, [])

짧게 하려면 그룹 확장 연산자를 사용할 수 있습니다.

const flattened = array.reduce(
  (accumulator, item) => [...accumulator, ...item], []
)

읽어주셔서 감사합니다.본문은 최초로 my blog에 발표되었다.더 많은 글을 원하시면 더 좋은 전단 개발자가 되도록 도와주십시오. my newsletter