JavaScript에서 reduce () 의 5가지 기본 사용 예

앞말
reduce () 방법으로 해낼 수 있는 것, for 순환, 또는 for Each 방법도 때때로 해낼 수 있다. 그럼 왜 reduce () 를 써야 합니까?이 문제는 전에도 생각해 봤지만 원인을 정말 찾지 못했다. 유일하게 찾을 수 있는 것은 성공으로 가는 길은 많지만 항상 가장 지름길이 있고 어쩌면 Reduce()가 더 높을지도 모른다는 것이다.
문법
arr.reduce(callback,[initialValue])
reduce () 방법은 그룹의 모든 요소에 대해 Reducer 함수 (당신이 제공) 를 실행하여 단일한 출력 값을 얻습니다.
reduce () 방법은 한 그룹의 모든 요소를 단일한 출력 값으로 복원합니다. 출력 값은 숫자, 대상 또는 문자열일 수 있습니다.reduce () 방법은 두 개의 매개 변수가 있는데 첫 번째는 리셋 함수이고 두 번째는 초기 값이다.
리셋 함수
리셋 함수는 그룹의 모든 요소에서 실행됩니다.리셋 함수의 리셋 값은 누적 결과이며, 다음 호출 리셋 함수의 매개 변수로 제공됩니다.리셋 함수는 네 개의 매개 변수를 가지고 있다.

Accumulator (누적기) - 누적기 누적 리셋 함수의 반환값..

Current Value(현재값) - 처리 수조의 현재 원소..

Current Index(현재 인덱스) - 현재 요소의 인덱스를 처리합니다

Source Array(소스 그룹)

Current Index 및 Source Array는 옵션입니다.
초기 값
초기 값을 지정하면 누적기를 initialValue로 초기 요소로 설정합니다.그렇지 않으면 누적기를 수조의 첫 번째 요소로 설정합니다.

arr.reduce(callback(accumulator, currentValue[,index[,array]])[, initialValue])

다음 코드 세션에서 첫 번째 누적기 (accumulator) 는 초기 값 0을 할당했습니다.currentValue는 처리 중인 numbersArr 그룹의 요소입니다.여기서currentValue는 누적기에 추가되어 다음에 리셋 함수를 호출할 때 반환값을 매개 변수로 제공합니다.

const numbersArr = [67, 90, 100, 37, 60];

const total = numbersArr.reduce(function(accumulator, currentValue){
 console.log("accumulator is " + accumulator + " current value is " + currentValue);
 return accumulator + currentValue;
}, 0);

console.log("total : "+ total);

출력
accumulator is 0 current value is 67
accumulator is 67 current value is 90
accumulator is 157 current value is 100
accumulator is 257 current value is 37
accumulator is 294 current value is 60
total : 354
JavaScript reduce 용례
1. 수조의 모든 값에 대해 합을 구한다
다음 코드에서 studentResult 배열은 5개의 숫자를 가지고 있습니다.reduce () 방법을 사용하여 그룹을 하나의 값으로 줄입니다. 이 값은studentResult 그룹의 모든 값과 결과를 total에 분배합니다.

const studentResult = [67, 90, 100, 37, 60];

const total = studentResult.reduce((accumulator, currentValue) => accumulator +currentValue, 0);

console.log(total); // 354

2. 대상 그룹의 수치의 합
일반적으로, 우리는 백엔드에서 데이터를 대상 그룹으로 가져오기 때문에, Reduce () 방법은 우리의 전단 논리를 관리하는 데 도움이 된다.다음 코드에서 studentResult 대상 수조는 세 과목이 있습니다. 여기,currentValue.marks는 studentResult 객체 그룹에서 각 과목의 점수를 얻었습니다.

const studentResult = [
 { subject: ' ', marks: 78 },
 { subject: ' ', marks: 80 },
 { subject: ' ', marks: 93 }
];

const total = studentResult.reduce((accumulator, currentValue) => accumulator + currentValue.marks, 0);

console.log(total); // 251

3. 벤드펴기 그룹
플랫 배열은 다차원 배열을 1차원으로 변환하는 것을 가리킨다.다음 코드에서 twoDArr 2차원 그룹은 oneDArr 1차원 그룹으로 변환됩니다.여기에서 첫 번째[1,2]수조는 누적기accumulator에 분배된 다음에 twoDArr수조의 나머지 모든 원소는 누적기에 연결됩니다.

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

const oneDArr = twoDArr.reduce((accumulator, currentValue) => accumulator.concat(currentValue));

console.log(oneDArr);
// [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]

4. 속성별로 객체 그룹화
대상의 속성에 따라 우리는 reduce () 방법을 사용하여 대상의 그룹을 몇 그룹으로 나눌 수 있습니다.아래의 코드 단편을 통해 너는 이 개념을 명확하게 이해할 수 있다.여기,result 대상 수조는 다섯 개의 대상이 있으며, 모든 대상은subject와marks 속성이 있습니다.점수가 50보다 크거나 같으면 항목이 통과합니다. 그렇지 않으면 항목이 실패합니다.reduce () 는 결과를 통과와 실패로 나누는 데 사용됩니다.우선, initialValue를 누적기에 분배한 다음,push () 방법은 조건을 검사한 후에 현재 대상을pass와fail 속성에 추가하여 대상 그룹으로 합니다.

const result = [
 {subject: ' ', marks: 41},
 {subject: ' ', marks: 59},
 {subject: ' ', marks: 36},
 {subject: ' ', marks: 90},
 {subject: ' ', marks: 64},
];

let initialValue = {
 pass: [],
 fail: []
}

const groupedResult = result.reduce((accumulator, current) => {
 (current.marks >= 50) ? accumulator.pass.push(current) : accumulator.fail.push(current);
 return accumulator;
}, initialValue);

console.log(groupedResult);

출력
{
 pass: [
{subject:'화학','marks:59},
{subject:'응용수학','marks:90},
{subject:'영어',marks:64}
 ],
 fail: [
{subject:'물리','marks:41},
{subject:'고등수학','marks:36}
 ]
}
5. 배열의 반복 항목 삭제
다음 코드 세션에서plicatedArr 그룹의 중복 항목을 삭제했습니다.우선, 빈 그룹을 누적기에 초기 값으로 분배합니다.
accumulator.includes () 는duplicatedArr 그룹의 모든 요소가 누적기에서 사용할 수 있는지 확인합니다.currentValue가 누적기에서 사용할 수 없으면push () 를 사용하여 추가합니다.

const duplicatedsArr = [1, 5, 6, 5, 7, 1, 6, 8, 9, 7];

const removeDuplicatedArr = duplicatedsArr.reduce((accumulator, currentValue) => {
 if(!accumulator.includes(currentValue)){
 accumulator.push(currentValue);
 }
 return accumulator;
}, []);

console.log(removeDuplicatedArr);
// [ 1, 5, 6, 7, 8, 9 ]

총결산
본고에서 우리는 수조 Reduce () 방법을 토론했다.먼저 Reduce () 방법을 소개한 다음에 간단한 예시를 사용하여 그 행위를 토론합니다.마지막으로 예시를 통해 Reduce () 방법에서 가장 흔히 볼 수 있는 다섯 가지 용례를 토론했다.만약 당신이 자바스크립트의 초보자라면, 본고는 당신에게 도움이 될 것입니다.
자바스크립트의 Reduce () 에 대한 5가지 기본 용법 예시를 소개합니다. 자바스크립트 reduce () 용례 내용과 관련된 더 많은 내용은 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보십시오. 앞으로 많은 응원 부탁드립니다!