Javascript 내장함수 축소 적용에 대한 자세한 설명

머리말

일반적으로 말하자면, Reduce 메소드를 통해 구현할 수 있는 로직은 forEach 메소드를 통해 위장하여 구현할 수 있지만, 브라우저의 js 엔진이 이 두 메소드를 C++에서 어떻게 구현하는지 명확하지 않습니다. 그러나 확실한 것은 축소 메소드도 배열을 통과해야 한다는 것입니다. 특정 구현 세부 사항 측면에서 배열 항목의 작업 및 저장에 대한 최적화가 수행되었는지 여부는 알 수 없습니다.

배열의 축소 메소드 적용

축소 메소드에는 두 개의 매개변수가 있습니다. 첫 번째 매개변수는 배열 항목에 대해 작동하는 데 사용되는 콜백이며 두 번째 매개변수는 초기에 전달됩니다. 값, 이 초기 값은 개별 배열 항목에 대한 작업에 사용됩니다. 참고로, Reduce 메소드의 반환값은 배열이 아니고, 초기값 형태로 중첩 처리한 후의 연산이다.

축소 방법의 가장 일반적인 시나리오는 중첩입니다.

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

Reduce 함수는 초기값 0을 기준으로 연속적으로 겹쳐서 가장 간단한 합의 구현을 완성하는 것을 볼 수 있다.

이전 글에서 언급한 것처럼 축소 함수의 반환 결과 유형은 전달된 초기 값과 동일합니다. 이전 예에서는 초기 값이 숫자 유형이었습니다. 또한 객체 유형이어야 합니다.

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);