정보실

웹학교

정보실

javascript `reduce()`메소드를 사용한 배열 변환

본문

JavaScript Array는 배열을 평평하게 하거나 다른 데이터 형식으로 변환하는 등 놀라운 변환을 수행 할 수 있는 reduce() 메서드가 우수합니다. 이 메소드는 배열의 모든 값에서 제공된 함수를 실행하고 실행하여 단일 값을 출력합니다. 이 기사에서는 다른 경우에 사용하는 방법에 대한 몇 가지 예를 공유하고 싶습니다.


https://dev.to/spukas/array-transformations-with-reduce-method-2jm5 


Method Structure 


이 메소드는 콜백과 초기 값을 받습니다. 콜백에는 네 가지 인수가 사용됩니다.

  • 누산기(accumulator)-반환 값을 누적
  • value-처리되는 현재 값
  • index-현재 요소의 색인 (선택 사항)
  • array-소스 배열 (선택 사항)
Array.prototype.reduce(function(acc, value, ?index, ?array), ?initialValue)

초기 값은 선택 사항입니다. 제공되지 않으면 콜백은 첫 번째 배열 요소를 가져 와서 초기 값으로 사용합니다. 초기 값이 제공되면 다음 배열 요소가 이에 대해 실행되고 새로운 결과를 누적하며 함수에서 반환해야 합니다.


또한 빈 배열에서 reducer를 실행하면 오류가 발생한다고 언급해야 합니다. 항상 배열에 하나 이상의 요소가 있는지 확인하고 확인하십시오.


사용 사례 


아래에는 세 가지 예가 있습니다. 이점을 위해 배열을 줄이고 변환하는 방법입니다.


값의 합계를 반환 


숫자 배열이 있으면 그 수를 얻는 것이 간단합니다.


[1, 2, 3].reduce((acc, value) => acc + value); // output 6


초기 값을 지정할 필요가 없습니다. reducer 함수는 첫 번째 요소 1을 가져 와서 시작 값으로 사용하여 새 결과를 누적하고 반환합니다. 화살표 함수를 사용하면 return 문을 지정할 필요가 없습니다. 새로운 결과는 기본적으로 반환됩니다.


인스턴스 수 반환 


배열에서 값이 반복되는 횟수를 알기 위해 값을 객체로 그룹화 합니다.


['a', 'b', 'a', 'c', 'b'].reduce((acc, value) =>
  acc[value]
  ? { ...acc, [value]: acc[value]++ }
  : { ...acc, [value]: 1 },
{})
// output { a: 2, b: 2, c: 1 }

여기에서는 초기 값을 객체로 지정하고 객체에 값이 존재하는지 확인하는 배열 요소의 각 반복에서 지정했습니다. 만약 그렇다면, 이전 값 (... acc)과 증가 된 값 [val] : acc [val] ++를 가진 객체를 반환합니다.


Flatten Arrays 


배열 배열이 있는 경우 분산의 작은 도움으로 값을 쉽게 병합하고 값을 하나의 배열로 줄일 수 있습니다.


[['a', 'b'], ['c'], ['d', 'e']].reduce((acc, value) => [...acc, ...value], []);
// output [ "a", "b", "c", "d", "e" ]


요약하면 


reduce() 메소드는 강력하고 유연하며 map() 및 filter()와 같은 다른 배열 메소드를 결합 할 수 있습니다. 수학적 연산을 수행하거나 시퀀스에서 비동기 코드를 실행하십시오. 또한 융통성이 있기 때문에 실수 할 여지가 더 많습니다. 몇 가지 메소드와 프로세스를 하나로 결합 할 때 의도를 이해하고 디버그 하기가 어렵습니다.




페이지 정보

조회 66회 ]  작성일19-10-21 22:28

웹학교