reduce探索lodash.reduce實現原理解析

2023-02-28 18:01:55

前言

前一篇你真的瞭解Array.reduce嗎？講解了 reduce 基礎使用方法和場景的運用場景。本篇來分析一下 reduce 函數本身的實現原理。

實現 reduce 其實挺簡單的，因為它本身的執行原理也不難，就是把陣列進行遍歷，然後組成合適的引數傳遞給回撥函數，只要思路對了，去嘗試幾次，那麼就理解了 reduce 。

最具有代表性的工具庫當然是 lodash，因此本篇文章的主要內容會講解 reduce 的基本實現，以及lodash 中是怎麼來實現的，做了什麼處理。

基本實現

實現思路：

判斷是否有初始值，因為有初始值和沒有初始值對回撥函數（reducer）執行的次數是有影響的。
遍歷陣列
組合引數傳遞給 reducer 進行執行
獲取到第三步返回值的時候，要把返回值儲存起來，在下一次便利的時候作為reducer第一個引數來替換初始值。
返回最終計算的value值

function reduce(array, reducer, initialValue = null) {
    let value = initialValue === null ? array[0] : initialValue; // 思路1
    let startIndex = initialValue === null ? 1 : 0; // 思路1
    for(let i = startIndex; i < array.length; i++) { // 思路 2
        const item = array[i]
        const res = reducer(value, item, i) // 思路3
        value = res; // 思路4
    }
    return value; // 思路5
}

測試一下：

console.log(reduce([1,2,3], (a, b) => (a + b), 0)) // 6
console.log(reduce([1,2,3], (a, b) => (a + b))) // 6

看起來是不是挺簡單的，程式碼其實還可以更簡潔一點：

function reduce(array, reducer, value = null) {
    value = value === null ? array[0] : value;
    for(let i = null ? 1 : 0; i < array.length; i++) {
        value = reducer(value, array[i], i);
    }
    return value;
}

lodash 中的 reduce 實現有何不同？

lodash中的 reduce 不僅可以對陣列生效，也可以對普通 object 、類陣列物件生效。

不過也針對陣列其實單獨實現了一個 arrayReduce 函數，不過沒有對外。

來看一下 reduce 和 arrayReduce 原始碼

function reduce(collection, iteratee, accumulator) {
  const func = Array.isArray(collection) ? arrayReduce : baseReduce
  const initAccum = arguments.length < 3
  return func(collection, iteratee, accumulator, initAccum, baseEach)
}

function arrayReduce(array, iteratee, accumulator, initAccum) {
  let index = -1
  const length = array == null ? 0 : array.length

  if (initAccum && length) {
    accumulator = array[++index]
  }
  while (++index < length) {
    accumulator = iteratee(accumulator, array[index], index, array)
  }
  return accumulator
}

看得懂嗎？不理解的話看下面一份程式碼，我把非陣列型別的程式碼去掉，再調一下變數命名和新增註釋：

function reduce(array, reducer, value) {
  const noInitialValue = arguments.length < 3 // 用引數的數量來判斷是否有初始值
  
  let index = -1 // 遍歷索引 - 1，因為下面 while 迴圈前先加了 1
  const length = array == null ? 0 : array.length // 判斷陣列是否存在和快取陣列長度
  // 這個if 語句中做了我上面思路1中初始值的問題和遍歷次數的問題
  if (noInitialValue && length) { // && length 判斷了陣列是否為空
    value = array[++index] // 沒有有初始值，則取陣列中第一為，注意 index 變成了0，下面 while 迴圈前會先加 1，因此迴圈次數會少一次。
  }
  while (++index < length) {
    value = reducer(value, array[index], index, array)
  }
  return value
}

可以看出其實大部分邏輯還是和前面的簡單實現差不多，不過考慮更全一些，有值得借鑑的地方：

引數判斷邏輯更有力，不管外界傳遞了第三個引數是啥，都說明有初始值
考慮了陣列不存在或者為空的情況

下面我們再看一下，去除陣列相關的程式碼來看看針對其他物件型別怎麼處理的。

function reduce(collection, iteratee, accumulator) {
  const func = baseReduce;
  const initAccum = arguments.length < 3
  return func(collection, iteratee, accumulator, initAccum, baseEach)
}

其他型別的都會教給 baseReduce 函數去處理。

// baseReduce
function baseReduce(collection, iteratee, accumulator, initAccum, eachFunc) {
  // 使用外部傳遞進來的遍歷方法進行遍歷物件，然後傳遞了一個 callback 給 eachFunc
  eachFunc(collection, (value, index, collection) => {
    // 初始值設定，
    accumulator = initAccum
      ? (initAccum = false, value)
      : iteratee(accumulator, value, index, collection)
  })
  return accumulator
}

使用外部傳遞進來的遍歷方法進行遍歷物件，然後傳遞了一個 callback 給 eachFunc，來執行 iteratee (也就是前面說的reducer)，callback 內部的程式碼就和前面 for 迴圈或者 while 迴圈的程式碼類似的，就是組合引數傳遞給 reducer 進行執行，不過直接看可能有點不好理解中，瞭解了原理再來看應該可以理解，注意事項：

initAccum 為 false 時，說明有初始值，直接執行 iteratee。
initAccum 為 true，說明沒有初始值，需要新增初始值，因此第一次迴圈就是賦值給初始值，然後把 initAccum 設定為false，沒有進行執行 iteratee，比沒有初始值少一次執行，符合邏輯。

eachFunc 用的是 reduce 中傳遞進來的 baseEach，內部主要就是對物件屬性進行遍歷的操作，然後把屬性值和索引以及物件本身傳遞給 callback，稍微需要注意的就是可能遇到類陣列的物件，為了保證順序，使用類陣列放入索引進行遍歷，而其他物件並不能保證屬性的傳遞順序，可以再看一下baseEach實現的程式碼：

function baseEach(collection, iteratee) {
  if (collection == null) {
    return collection
  }
  // 不是類陣列則使用 baseForOwn 處理
  if (!isArrayLike(collection)) {
    return baseForOwn(collection, iteratee)
  }
  const length = collection.length
  const iterable = Object(collection) // 使用arguments測試了一下，好像沒啥作用
  let index = -1

  // 遍歷類陣列
  while (++index < length) {
    if (iteratee(iterable[index], index, iterable) === false) {
      break
    }
  }
  return collection
}

不是 isArrayLike 的物件遍歷與本篇文章的內容沒有啥關係了，因此就不深入了。

總結

最近一直在學函數語言程式設計，而 reduce 可以很好的契合函數語言程式設計中的函陣列合思想，因此最近幾篇文章中都涉及到它，就想一次性把它給寫透徹，希望對讀者又一些幫助。

以上就是reduce探索lodash.reduce實現原理解析的詳細內容，更多關於reduce lodash.reduce實現的資料請關注it145.com其它相關文章！

reduce探索lodash.reduce實現原理解析

目錄

前言

基本實現

lodash 中的 reduce 實現有何不同？

總結

熱門文章