前言

reduce(...)方法對陣列中的每個元素執行一個由您提供的reducer函式(升序執行)，將其結果彙總為單個返回值（累計作用）

此方法接受兩個引數：callback(...)(必選)、initialValue(可選)。
callback(...)接受4個引數：Accumulator (acc) (累計器)、Current Value (cur) (當前值)、Current Index (idx) (當前索引)、Source Array (src) (源陣列)。

注意點：
1、callback(...)一般需要返回值
2、不會改變原陣列

實現思路
1、先獲取初始累計的值（分成兩種情況：有提供initialValue || 未提供initialValue）

原始碼實現

Array.prototype.myReduce = function(callback,initialValue) {
 if(this === null) {
  throw new TypeError( 'Array.prototype.reduce called on null or undefined' );
 }
 if (typeof callback !== 'function') {
  throw new TypeError( callback + ' is not a function');
 }
 const O = Object(this);
 const lenValue = O.length;
 const len = lenValue >>> 0;
 if(len === 0 && !initialValue) {
  throw new TypeError('the array contains no elements and initialValue is not provided');
 }
 let k = 0;
 let accumulator;
 // 分成兩種情況來獲取accumulator
 // 有提供initialValue accumulator=initialValue
 // 沒有提供initialValue accumulator=陣列的第一個有效元素
 if(initialValue) {
  accumulator = initialValue;
 } else {
  let kPressent = false;
  while(!kPressent && k < len) {
   const pK = String(k);
   kPressent = O.hasOwnProperty(pK);
   if(kPressent) {
    accumulator = O[pK];
   };
   k++;
  }
  if(!kPressent) {
   throw new TypeError('the array contains error elements');
  }
 }
 // 當accumulator=initialValue時 k=0
 // accumulator=陣列的第一個有效元素時 k=1
 while(k < len) {
  if(k in O) {
   // callback一般需要返回值
   accumulator = callback(accumulator,O[k],k,O);
  }
  k++;
 }
 return accumulator;
}
let r = [1,2,3].myReduce(function (prevValue,currentValue,currentIndex,array) {
 return prevValue + currentValue;
},22);
console.log(r); // 28

參考連結：

reduce-mdn
官方規範

到此這篇關於詳解JavaScript之Array.reduce原始碼解讀的文章就介紹到這了,更多相關JavaScript Array.reduce原始碼內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！