리듀스(reduce) 라는 단어는 문자 그대로 "작게 만들다"를 의미합니다. 누산기와 배열의 각 요소에 대해 함수를 적용하여 단일 값으로 줄이는 함수형 프로그래밍 개념입니다. 이는 매우 강력한 개념이며 Redux 또는 Ramda 와 같은 복잡한 라이브러리 및 프레임워크 개발에 사용됩니다 .

JavaScript에서 reduce는 배열 메서드로 사용할 수 있습니다. 나는 오랫동안 내 작업에서 감소 방법을 사용해 왔습니다 . 그러나 많은 친구들과 동료들이 이 방법을 효과적으로 이해하고 사용하는 데 어려움을 겪고 있음을 알게 되었습니다. 그래서 리듀스 방법을 좀 더 쉽게 설명하기 위해 이 글을 쓰기로 했습니다. 이 강력한 개념은 코드를 최적화하고 복잡한 시스템과 논리를 구현하는 데 도움이 될 수 있습니다. 바라건대 이것은 더 많은 사람들이 그것을 올바르게 이해하는 데 도움이 될 것입니다.

reduce지금은 Array 메서드는 잊어버리자 . reduce실제로 수행하는 작업을 더 잘 이해하기 위해 처음부터 자체 함수를 만들 것입니다 .

물건을 분해

시작하려면 reduce 함수의 여러 구성 요소를 분석해 보겠습니다.

• 누산기 — 각 감소 단계 후 결과를 저장하는 변수입니다. 또한 다음 단계의 입력이 됩니다.
• 감속기 — 누산기와 배열의 각 요소를 취하는 함수입니다. 다음 단계를 위해 누산기 값을 반환해야 합니다. 감소의 각 단계를 정의합니다.
• 초기 값 — 첫 번째 감소 단계에 대한 누산기 의 값입니다 . 일종의 시드 값이라고 볼 수 있습니다. 감소의 최종 결과는 초기 값 과 감속기 에만 의존합니다 .
• 입력 배열 — 이것으로 더 이상의 설명이 필요하지 않습니다 .

이 기사에서는 TypeScript를 사용하여 함수를 빌드 할 것입니다 . 이렇게 하면 정적 유형을 사용하여 함수를 더 잘 정의하고 독자가 더 잘 이해할 수 있습니다.

type Reducer<TEle, TAcc> = (acc: TAcc, ele: TEle) => TAcc;

function reduce<TEle, TAcc>(
 arr: TEle[],
 reducer: Reducer<TEle, TAcc>,
 initialValue: TAcc
) {
// TODO: Implement
}

축소의 간단한 예인 "Sum of elements in an array"를 고려하십시오 . 이에 대한 논리를 구현하는 것은 상당히 쉬워야 합니다. 해보자:

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

let sum = 0;

for (let num of arr) {
    sum = sum + num;
}

console.log(sum);

이제 리듀스의 다른 구성 요소를 조합하여 동일한 코드를 쉽게 다시 작성할 수 있습니다.

const arr = [1,2,3,4,5,6,7,8,9,10];
const initialValue = 0;
const reducer = (acc: number, ele: number) => acc + ele;

let acc = 0;

for (let ele of arr) {
    acc = reducer(acc, ele);
}

이제 위의 정보를 사용하여 reduce기능을 완료할 수 있습니다.

type Reducer<TEle, TAcc> = (acc: TAcc, ele: TEle) => TAcc;

function reduce<TEle, TAcc>(
 arr: TEle[],
 reducer: Reducer<TEle, TAcc>,
 initialValue: TAcc
) {
    let acc = initialValue;
    for (let ele of arr) {
        acc = reducer(acc, ele);
    }
    return acc;
}

reduce 메서드 의 reducer 매개변수 도 인덱스 와 입력 배열을 인수 로 사용 하지만 본질적으로 방금 만든 reduce 함수 와 같은 방식으로 구현되었습니다 .

다음은 무엇입니까?

이제 리듀스를 정말 잘 사용하기 위해 더 할 수 있는 일이 있습니다. 복잡한 리덕션 로직을 연습하고 시도하고 구현하는 것입니다. 시도해 볼 수 있는 일부 항목은 다음과 같습니다.

1. 숫자 배열을 받아서 모든 숫자의 곱을 반환하는 함수를 작성하세요.
2. 문자열 배열을 취하여 결합된 모든 문자열의 총 문자 수를 반환하는 함수를 작성하십시오.
3. 숫자 배열을 받아 숫자의 평균(평균)을 반환하는 함수를 작성하세요.
4. 숫자 속성이 있는 객체 배열을 가져와서 value모든 속성의 합을 반환하는 함수를 작성하세요 value.
5. 문자열 배열을 받아서 배열에서 가장 긴 문자열을 반환하는 함수를 작성하세요.
6. 숫자 배열을 받아서 배열의 최대 숫자를 반환하는 함수를 작성하세요.
7. 숫자 배열을 받아 배열의 최소 수를 반환하는 함수를 작성하세요.
8. 숫자 속성이 있는 객체 배열을 가져와서 value모든 속성의 평균을 반환하는 함수를 작성하세요 value.
9. 속성 이 있는 개체 배열을 가져와서 쉼표로 구분된 name모든 속성을 연결하는 단일 문자열을 반환하는 함수를 작성하세요.name
10. 숫자 배열을 받아서 원래 배열에서 짝수만 포함하는 새 배열을 반환하는 함수를 작성하세요.