>  기사  >  웹 프론트엔드  >  JavaScript에서 Reduce()를 사용하는 방법

JavaScript에서 Reduce()를 사용하는 방법

不言
不言원래의
2019-01-08 16:48:075361검색

reduce()는 배열 데이터의 각 요소를 하나의 값으로 누적하는 가장 좋은 방법이므로 이번 글에서는 JavaScript에서 Reduce()를 사용하는 방법을 자세히 소개하겠습니다.

JavaScript에서 Reduce()를 사용하는 방법

구체적인 내용을 살펴보겠습니다.

다음과 같은 배열이 있다고 가정해 보겠습니다.

var numbers = [1,2,3,4,5,6,7,8,9];

var strings = ['苹果','香蕉','梨子','葡萄','荔枝'];

이 예제에서는 숫자 데이터를 저장할 배열과 문자열 데이터를 저장할 배열을 준비했습니다.

reduce()를 사용하는 가장 확실한 방법은 그러한 배열에 저장된 모든 값의 값을 계산하는 것입니다.

숫자 값인 경우 합산된 값을 계산할 수 있고, 문자인 경우 개별 문자열을 함께 연결할 수 있습니다.

reduce()를 사용하는 방법을 볼까요?

reduce()는 대상 배열에서 모든 기능을 실행할 수 있습니다.

数组.reduce(function(累积值, 元素) { })

첫 번째 매개변수의 "누적값"은 배열 요소를 순차적으로 처리하여 얻은 값을 나타냅니다.

두 번째 매개변수 "element"는 현재 처리 중인 배열 요소를 나타냅니다.

이 함수에서 "return"을 사용하면 어떤 처리든 반환하면 결과가 누적된 값에 보관되고 최종적으로 값을 얻을 수 있습니다.

구체적인 예를 살펴보겠습니다

배열의 각 요소를 합산합니다

코드는 다음과 같습니다

var numbers = [1,2,3,4,5,6,7,8,9];
var result = numbers.reduce(function(a, b) {
  return a + b;
})
console.log(result);

실행 결과는 다음과 같습니다

JavaScript에서 Reduce()를 사용하는 방법

이 예에서는 1부터 시작하는 숫자 ~ 9가 저장됩니다. 배열에 대해 축소()를 수행합니다.

함수에서는 누적된 값을 볼 수 있으며 각 요소가 간단히 추가됩니다.

첫 번째 처리에서 "1 + 2"가 되고 그 합을 누적된 값에 저장하고 다음 처리에서 "3 + 3"을 수행합니다.

이렇게 하면 실행 결과 출력은 모든 값의 합이 "45"라는 것입니다.

마지막으로 한 가지 설명이 필요합니다:

reduce() 함수에서는 "break" 인터럽트 처리 방법이 허용되지 않습니다. 따라서 대안으로 배열의 인덱스 번호를 사용하는 인터럽트 방법이 있습니다. 아래에서 간단히 살펴보겠습니다.

사실, Reduce() 함수는 최대 4개의 매개변수를 가질 수 있습니다.

配列.reduce(function(累积值, 元素, 索引号, 数组) { })

세 번째 매개변수 "인덱스 번호"는 현재 처리 중인 배열의 인덱스 번호를 나타냅니다.

네 번째 매개변수 "array"는 현재 처리 중인 배열 자체를 나타냅니다.

이 매개변수를 사용하면 중단 프로세스를 다음과 같이 구현할 수 있습니다!

var numbers = [1,2,3,4,5,6,7,8,9];
var result = numbers.reduce(function(a, b, index, arr) {
  if(index >= 3) arr.splice(1);
  return a + b;
});
console.log(result);

실행 결과는 다음과 같습니다

JavaScript에서 Reduce()를 사용하는 방법

reduce() 함수의 IF문에 주목해주세요!

조건식에 "index> = 3"을 기술하여 배열의 3번째 인덱스 번호가 되면 임의의 처리를 할 수 있습니다.

프로세스는 "arr.splice(1)"가 되며 세 번째 인덱스 이후의 모든 배열 요소를 제거합니다.

이렇게 하면 Reduce() 처리가 종료되므로 "break"와 동일한 기능을 수행할 수 있습니다.

위 내용은 JavaScript에서 Reduce()를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.