JavaScript의 배열 Reduce() 함수 사용법 및 팁

reduce는 삭제되거나 배열에서 값이 할당되지 않은 요소를 제외하고 배열의 각 요소에 대해 순차적으로 콜백 함수를 실행합니다. 다음에는 이번 글을 통해 JS 배열의 Reduce() 메소드에 대한 자세한 설명과 고급 기법을 함께 살펴보도록 하겠습니다.

기본 개념

Reduce() 메소드는 함수를 받습니다. 누산기(누산기)로 배열 값의 각 요소(왼쪽에서 오른쪽으로)는 하나의 값으로 끝납니다.

reduce는 삭제되거나 배열에서 값이 할당되지 않은 요소를 제외하고 배열의 각 요소에 대해 순서대로 콜백 함수를 실행합니다. 초기 값(또는 마지막 콜백 함수의 반환 값), 현재 요소 값, 현재 인덱스, 축소가 호출되는 배열입니다.

구문:

arr.reduce(callback,[initialValue])

• callback(배열의 각 값을 실행하는 함수, 4개의 매개변수 포함)

• previousValue(마지막 콜백 호출에서 반환된 값 또는 제공된 초기 값 (initialValue))

• currentValue(배열에서 현재 처리되는 요소)

• index(배열에서 현재 요소의 인덱스)

• array(reduced가 호출되는 배열)

• initialValue (첫 번째 콜백의 첫 번째 매개변수로.)

간단한 응용

예제1:

var items = [10, 120, 1000];
// our reducer function
var reducer = function add(sumSoFar, item) { return sumSoFar + item; };
// do the job
var total = items.reduce(reducer, 0);
console.log(total); // 1130

초기값을 기준으로 계속해서 축소 함수가 중첩되는 것을 볼 수 있습니다. 0, 가장 간단한 합의 구현을 완료합니다.

리듀스 함수의 반환 결과 유형은 이전 예에서 초기 값이 숫자 유형인 것과 동일합니다. 마찬가지로 초기 값도 객체 유형일 수 있습니다.

예제 2:

var items = [10, 120, 1000];
// our reducer function
var reducer = function add(sumSoFar, item) {
 sumSoFar.sum = sumSoFar.sum + item;
 return sumSoFar;
};
// do the job
var total = items.reduce(reducer, {sum: 0});
console.log(total); // {sum:1130}

고급 응용 프로그램

리듀스 방식을 사용하면 다차원 데이터 오버레이를 완성할 수 있습니다. 위의 예에서 볼 수 있듯이 초기값 {sum: 0}은 1차원 연산일 뿐입니다. 예를 들어 {sum: 0, totalInEuros: 0, totalInYen: 0}과 같이 여러 속성의 중첩이 포함된 경우 해당 논리입니다. 처리가 필요합니다.

다음 방법에서는 분할 정복 방법을 채택합니다. 즉, 축소 함수의 첫 번째 매개변수 콜백을 배열로 캡슐화하고 배열의 각 함수를 독립적으로 중첩하여 축소 작업을 완료합니다. 모든 것은 관리자 기능을 통해 관리되며 초기 매개변수가 전달됩니다.

var manageReducers = function(reducers) {
 return function(state, item) {
  return Object.keys(reducers).reduce(
   function(nextState, key) {
    reducers[key](state, item);
    return state;
   },
   {}
  );
 }
};

위는 리듀서 객체를 매개변수로 요구하고, 콜백 형태의 함수를 리듀스의 첫 번째 매개변수로 반환하는 관리자 함수의 구현입니다. 이 함수 내에서 다차원 중첩 작업(Object.keys())이 수행됩니다.

이 분할 정복 아이디어를 통해 대상 개체의 여러 속성을 동시에 중첩하여 완성할 수 있습니다.

var reducers = { 
 totalInEuros : function(state, item) {
  return state.euros += item.price * 0.897424392;
 },
 totalInYen : function(state, item) {
  return state.yens += item.price * 113.852;
 }
};
var manageReducers = function(reducers) {
 return function(state, item) {
  return Object.keys(reducers).reduce(
   function(nextState, key) {
    reducers[key](state, item);
    return state;
   },
   {}
  );
 }
};
var bigTotalPriceReducer = manageReducers(reducers);
var initialState = {euros:0, yens: 0};
var items = [{price: 10}, {price: 120}, {price: 1000}];
var totals = items.reduce(bigTotalPriceReducer, initialState);
console.log(totals);

다음은 예입니다.

특정 학생의 최종 성적입니다. 은 다음과 같습니다

var result = [
  {
    subject: 'math',
    score: 88
  },
  {
    subject: 'chinese',
    score: 95
  },
  {
    subject: 'english',
    score: 80
  }
];

학생의 총점은 어떻게 알 수 있나요?

var sum = result.reduce(function(prev, cur) {
  return cur.score + prev;
}, 0);

학생이 징계 위반으로 처벌을 받고 총점에서 10점 감점을 받았다고 가정하면 초기값을 -10으로 설정하면 됩니다.

var sum = result.reduce(function(prev, cur) {
  return cur.score + prev;
}, -10);

이 예를 좀 더 어렵게 만들어 보겠습니다. 학생 총점에서 과목별로 가중치가 다른 경우(50%, 30%, 20%), 최종 가중치 결과는 어떻게 구해야 할까요?

해결책은 다음과 같습니다.

var dis = {
  math: 0.5,
  chinese: 0.3,
  english: 0.2
}
var sum = result.reduce(function(prev, cur) {
  return cur.score + prev;
}, -10);
var qsum = result.reduce(function(prev, cur) {
  return cur.score * dis[cur.subject] + pre;
}, 0)
console.log(sum, qsum);

또 다른 예를 살펴보겠습니다. 문자열에 각 문자가 나타나는 횟수를 어떻게 알 수 있나요?

var arrString = 'abcdaabc';
arrString.split('').reduce(function(res, cur) {
  res[cur] ? res[cur] ++ : res[cur] = 1
  return res;
}, {})

중첩 결과의 유형 초기값은 두 번째 매개변수를 통해 설정할 수 있으므로, 이때의 축소는 더 이상 단순히 추가하는 것이 아니라 다양한 유형 변환을 수행하는 데 유연하게 사용할 수 있습니다. 특정 규칙에 따라 배열을 객체로 변환할 수도 있고, 한 형태의 배열을 다른 형태의 배열로 변환할 수도 있습니다.

[1, 2].reduce(function(res, cur) { 
  res.push(cur + 1); 
  return res; 
}, [])

koa 소스 코드에는 유일한 모듈이 있습니다. 전체 모듈은 축소 메소드 연산을 반환하는 간단한 객체입니다.

var only = function(obj, keys){
 obj = obj || {};
 if ('string' == typeof keys) keys = keys.split(/ +/);
 return keys.reduce(function(ret, key){
  if (null == obj[key]) return ret;
  ret[key] = obj[key];
  return ret;
 }, {});
};

축소 개념의 이해를 통해 이 모듈은 주로 obj 객체에 존재하는 키의 객체 객체를 생성하고 반환하려고 합니다.

rreee

위 내용은 JavaScript의 배열 Reduce() 함수 사용법 및 팁의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!