JS Array.reduce() 메소드를 둘러 보는 데 어려움이 있습니까?
https://dev.to/harrison_codes/3-simple-snippets-to-help-you-understand-array-reduce-1628
그렇다면 걱정하지 마십시오. 혼자가 아닙니다. 어떤 이유로 든 reduce 방법은 많은 개발자가 클릭하는 데 시간이 걸리는 것 같습니다. 나는 이 보트에 직접 있었다. 다행히도 일단 문제를 해결하면 복잡하지 않습니다.
이 기사의 목표는 다음과 같습니다.
정신 모델
Reduce는 배열을 단일 값으로 줄이는 방법으로 종종 도입됩니다. 이것이 실제로 하는 일이지만, 이것이 어떻게 작동하는지 또는 내가 할 수 있는 일을 이해하는 데 특히 도움이 되지는 않았습니다.
저에게 .reduce()에 대해 생각하는 가장 간단한 방법은 .forEach()의 멋진 사례입니다. 필수 사항은 비슷합니다.
중요한 차이점은 .reduce()의 차이점입니다.
실제로 .forEach() 주위에 슬림 래퍼를 사용하여 reduce 함수를 직접 구현할 수 있습니다.
const reduce = (array, callback, initialValue) => {
// Originally stores the initialValue then updated
// on each iteration with the return value of the callback.
let previousReturnValue = initialValue
// Iterate over the array items, updating the currentReturn value at each step.
array.forEach((item, index) => {
const result = callback(previousReturnValue, item, index, array)
previousReturnValue = result;
})
// Return the final value once all array items have been iterated over
return previousReturnValue
}이제 .reduce()를 사용하는 몇 가지 예를 살펴보고 실행 경로를 단계별로 살펴 보겠습니다.
1. 숫자 배열 추가
이 일반적인 예에서는 최종 합에 도달하기 위해 숫자 배열을 추가합니다.
const initialValue = 0
const numbersToAdd = [ 1, 2, 3, 4 ]
const addFunction = (runningTotal, numberToAdd) => {
return runningTotal + numberToAdd;
}
const sum = numbersToAdd.reduce(addFunction, initialValue)
console.log(sum)
// => 10
// =======================================================
// How was this calculated? Lets step through it:
// The addFunction callback is invoked for each array item:
// -- FIRST CALLBACK INVOCATION --
// Array Item => 1
// Previous return value => first invocation (so the initialValue is used)
// Callback invocation => numbersToAdd(0, 1)
// Callback return value => 1
// -- SECOND CALLBACK INVOCATION --
// Array Item => 2
// Previous return value => 1
// Callback invocation => numbersToAdd(1, 2)
// Callback return value => 3
// -- THIRD CALLBACK INVOCATION --
// Array Item => 3
// Previous return value => 3
// Callback invocation => numbersToAdd(3, 3)
// Callback return value => 6
// -- FOURTH (AND LAST) CALLBACK INVOCATION --
// Array Item => 4
// Previous return value => 6
// Callback invocation => numbersToAdd(6, 4)
// Callback return value => 10
// Final Result: 102. 가장 큰 숫자 배열 찾기
여기서는 reduce를 사용하여 배열의 최대 값을 찾습니다.
이것은 우리가 초기 값 인수를 .reduce()에 제공하지 않았기 때문에 약간 특별한 경우입니다.
이 때문에 .reduce()는 첫 번째 배열 항목의 콜백을 건너 뛰고 대신 두 번째 배열 항목의 콜백 호출 초기 값으로 사용합니다.
const numbers = [ 10, 40, 4, 50, 101 ]
const findLarger = (currentMax, numberToCheck) => {
if (numberToCheck > currentMax) {
return numberToCheck;
}
return currentMax;
}
const largest = numbers.reduce(findLarger)
console.log(largest)
// => 101
// =======================================================
// How was this calculated? Lets step through it:
// The findLarger callback is invoked for each array item:
// -- FIRST CALLBACK INVOCATION --
// Array Item => 10
// Previous return value => first invocation, and no initialValue provided
// Callback invocation => Not Invoked
// Callback return value => N/A
// -- SECOND CALLBACK INVOCATION --
// Array Item => 40
// Previous return value => nothing, however first array item will be used as the initialValue
// Callback invocation => findLarger(10, 40)
// Callback return value => 40
// -- THIRD CALLBACK INVOCATION --
// Array Item => 4
// Previous return value => 40
// Callback invocation => findLarger(40, 4)
// Callback return value => 40
// -- FOURTH CALLBACK INVOCATION --
// Array Item => 50
// Previous return value => 40
// Callback invocation => findLarger(40, 50)
// Callback return value => 50
// -- FIFTH (AND LAST) CALLBACK INVOCATION --
// Array Item => 101
// Previous return value => 50
// Callback invocation => findLarger(50, 101)
// Callback return value => 101
// Final Result: 1013. 배열을 짝수 / 홀수로 분류.
물론 .reduce()의 콜백에서 숫자를 반환하도록 제한되지 않습니다. 원하는 것을 반환 할 수 있습니다. 이 경우 배열 값을 짝수 / 홀수 버킷으로 분류하는 객체를 반환합니다.
const initialValue = { even: [], odd: [] }
const numbersToCategorise = [1, 3, 4, 8, 10]
const categorisingReducer = (categories, numberToCategorise) => {
const isEven = numberToCategorise % 2 === 0
if (isEven) {
categories.even.push(numberToCategorise)
} else {
categories.odd.push(numberToCategorise)
}
return categories
}
const categories = numbersToCategorise.reduce(categorisingReducer, initialValue)
console.log(categories)
// => { even: [4, 8, 10], odd: [1, 3] }
// =======================================================
// How was this calculated? Again, lets step through it:
// The categorisingReducer callback is invoked for each array item:
// -- FIRST CALLBACK INVOCATION --
// Array Item => 1
// Previous return value => first invocation (so the initialValue is used)
// Callback invocation => categorisingReducer({ even: [], odd: [] }, 1)
// Callback return value => { even: [], odd: [1] }
// -- SECOND CALLBACK INVOCATION --
// Array Item => 3
// Previous return value => { even: [], odd: [1] }
// Callback invocation => categorisingReducer({ even: [], odd: [1] }, 3)
// Callback return value => { even: [], odd: [1, 3] }
// -- THIRD CALLBACK INVOCATION --
// Array Item => 4
// Previous return value => { even: [], odd: [1, 3] }
// Callback invocation => categorisingReducer({ even: [], odd: [1, 3] }, 4)
// Callback return value => { even: [4], odd: [1, 3] }
// -- FOURTH CALLBACK INVOCATION --
// Array Item => 8
// Previous return value => { even: [4], odd: [1, 3] }
// Callback invocation => categorisingReducer({ even: [4], odd: [1, 3] }, 8)
// Callback return value => { even: [4, 8], odd: [1, 3] }
// -- FIFTH (AND LAST) CALLBACK INVOCATION --
// Array Item => 10
// Previous return value => { even: [4, 8], odd: [1, 3] }
// Callback invocation => categorisingReducer({ even: [4, 8], odd: [1, 3] }, 10)
// Callback return value => { even: [4, 8, 10], odd: [1, 3] }
// Final Result: { even: [4, 8, 10], odd: [1, 3] }이것이 유용했는지 또는 .reduce() 메소드에 대해 여전히 확실하지 않은 경우 의견에 알려주십시오!
등록된 댓글이 없습니다.
