JavaScript 의 reduce () 의 이해 와 예시 설명

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. 배열 의 모든 값 을 합 친다.
아래 코드 에서 student Result 배열 은 5 개의 숫자 를 가지 고 있 습 니 다.reduce () 방법 을 사용 하여 배열 을 하나의 값 으로 줄 이 고 이 값 은 student Result 배열 의 모든 값 과 결 과 를 totalk 에 배분 합 니 다.

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

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

console.log(total); // 354

2. 대상 배열 의 수치 합
일반적으로 우 리 는 백 엔 드 에서 데 이 터 를 대상 배열 로 가 져 오기 때문에 reduce () 방법 은 우리 의 전단 논 리 를 관리 하 는 데 도움 이 된다.아래 코드 에서 student Result 대상 배열 은 세 개의 과목 이 있 습 니 다. 여기 서 current Value. marks 는 student Result 대상 배열 의 각 과목 의 점 수 를 얻 었 습 니 다.

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 차원 으로 전환 하 는 것 을 말한다.아래 코드 에서 투 다 르 2 차원 배열 은 원 다 르 1 차원 배열 로 바 뀌 었 다.여기 서 첫 번 째 [1, 2] 배열 은 누산기 accumulator 에 분 배 된 다음 에 toDArr 배열 의 나머지 모든 요 소 를 누산기 에 연결 합 니 다.

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. 배열 의 중복 항목 삭제
아래 코드 세 션 에서 plicated Arr 배열 의 중복 항목 을 삭 제 했 습 니 다.우선, 누산기 에 빈 배열 을 초기 값 으로 배정 합 니 다.accumulator. includes () 는 Duplicated Arr 배열 의 모든 요소 가 누적 기 에서 사용 가능 한 지 확인 합 니 다.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 () 방법 에서 가장 흔히 볼 수 있 는 다섯 가지 용례 를 토론 했다.만약 당신 이 자 바스 크 립 트 의 초보 자라 면, 본문 은 당신 에 게 도움 이 될 것 입 니 다.