Array.reduce() - 배열을 단일 값으로 줄이기 위해

이 기사는 의 10번째 기사입니다. 이 기사에서는 reduce 배열 방법이 무엇인지 설명합니다.

축소 방법이란 무엇입니까?

배열의 reduce 방법은 기본적으로 배열의 값을 단일 값으로 줄이는 고차 함수입니다. 이 단일 값은 숫자, 문자열, 객체 또는 배열일 수 있습니다.

이 방법은 루프에서 반환된 값이 배열의 끝까지 다음 루프에 적용되고 최종 값이 반환되는 반복 루프 프로세스를 거칩니다.

이 메서드는 배열을 수정하지 않습니다.

축소 방법의 구문

array.reduce(function(previousValue, currentValue, currentIndex, array){
  // do something with previousValue and currentValue
  // return a value
}, initialValue)

reduce 메서드는 콜백 함수와 선택적 initialValue의 두 가지 인수를 받습니다.

전달된 callbackFunction은 배열의 각 항목에 적용됩니다. 각 루프에서 콜백 함수에 전달되는 인수는 이전 루프의 previousValue, 현재 루프의 currentValue, 현재 값의 index 및 원본 array 입니다.

이전 값의 작동 방식

initialValue 인수를 전달하면 첫 번째 루프의 previousValue는 initialValue가 되고 currentValue는 배열의 첫 번째 항목이 됩니다. 두 번째 루프에서 previousValue는 첫 번째 루프의 콜백 함수에서 반환된 값이고 currentValue는 배열의 두 번째 항목입니다. 그리고 끝까지 그렇게 흘러갑니다.
initialValue 인수가 제공되지 않는다고 가정합니다. 이 경우 첫 번째 루프의 previousValue가 배열의 첫 번째 항목이 되고 currentValue가 배열의 두 번째 항목이 됩니다. 두 번째 루프에서 previousValue는 첫 번째 루프의 콜백 함수에서 반환된 값이고 currentValue는 배열의 세 번째 항목입니다.

5개 요소 배열의 경우 initialValue 인수를 전달하면 5개의 루프(각 항목에 대한 각 루프)가 되지만 initialValue 인수를 지정하지 않으면 4개의 루프가 됩니다(처음 두 항목에 대한 첫 번째 루프, 세 번째 항목 등)

감소 방법 없이

reduce 메서드는 배열을 줄이기 위해 반복 루프 프로세스를 수행하는 추상화된 함수입니다. 다음은 reduce 방법을 모방한 예입니다.

먼저 초기 값으로:

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

let initialValue = 5
let finalValue = initialValue

for (let i = 0; i < array.length; i++) {
  const previousValue = finalValue
  const currentValue = array[i]

  finalValue = previousValue + currentValue
}

console.log(finalValue)
// 20

그리고 초기값 없이:

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

let finalValue = array[0]

for (let i = 1; i < array.length; i++) {
  const previousValue = finalValue
  const currentValue = array[i]

  finalValue = previousValue + currentValue
}

console.log(finalValue)
// 15

1 인덱스 값이 이미 초기 값으로 사용되었기 때문에 0 인덱스부터 루프가 시작됩니다.

이 루프 방식은 reduce 메서드가 백그라운드에서 수행하는 것과 유사합니다. 이전 루프의 값을 다음 항목에 공급하여 반복적인 방식으로 각 항목을 반복합니다. 다음 항목은 이전 값을 사용하여 더하기, 곱하기, 연결하여 배열을 형성하는 등의 작업을 수행할 수 있습니다.

감소 방법으로

다음은 reduce로 이전 결과를 얻는 방법입니다.

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

const finalValue = array.reduce(function(previousValue, currentValue) {
    return previousValue + currentValue
})

console.log(finalValue)

나는 initialValue 를 전달하지 않았으므로 첫 번째 항목을 시작 값으로 사용하여 4개의 루프만 수행합니다.
reduce 메서드를 사용하면 읽기가 더 쉬워집니다.

이 방법을 사용하여 값 배열을 단일 값으로 줄이려고 합니다. 이 단일 값은 여전히 ​​배열이거나 객체일 수 있음을 기억하십시오.

다음은 배열 단일 값 예입니다.

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

const finalValue = array.reduce(function(previousValue, currentValue) {
  return [currentValue * 2].concat(previousValue)
})

console.log(finalValue)
// [ 10, 8, 6, 4, 1 ]

반환 값은 현재 값에 2를 곱한 배열을 반환한 다음 이전 값과 연결하여 단일 배열 결과를 볼 수 있습니다.