underscore 源碼解讀：如何優雅地寫一個「在數組中尋找指定元素」的方法

題外話

先說點題外話。

自從 5 月 16 日開始 underscore 系列解讀文章，目前已經收穫了 160+ star，在這裏子遲也感謝你們的支持，並將繼續努力分享源碼裏的乾貨。有朋友私信我說好幾天沒看到更新，在此也請你們原諒，畢竟我把它當成了今年的計劃之一，並且平時也要上班工做，只能利用閒暇時間，並且樓主本人對文章的質量要求比較高，若是是一概的流水文章，讀者學不到什麼東西，本身的那關都過不了。其實若是有心，應該能發現 underscore-1.8.3 源碼全文註釋 一直有在更新（註釋行數已經快破 1000 了）。

Main

言歸正傳，上一章 中咱們結束了 Object 擴展方法部分，今天開始來解讀 Array 部分的擴展方法。其實 JavaScript 中的數組是我最喜歡的類型，能模擬棧、隊列等數據結構，還能隨意插入元素（splice），很是的靈活，這點作過 leetcode 的應該都深有體會（這裏也順便安利下個人 leetcode 題解 Repo https://github.com/hanzichi/leetcode）。

今天要講的是，如何在數組中尋找元素，對應 underscore 中的 .findIndex，.findLastIndex，.indexOf，.lastIndexOf 以及 _.sortIndex 方法。

等等，是否是有點眼熟，沒錯，JavaScript 中已經部署了 indexOf 方法（ES5）以及 findIndex 方法（ES6），這點不介紹了，你們能夠自行學習。

咱們先來看 .findIndex 和 .findLastIndex 函數。若是瞭解過 Array.prototype.findIndex() 方法，會很是容易。.findIndex 的做用就是從一個數組中找到第一個知足某個條件的元素，.findLastIndex 則是找到最後一個（或者說倒序查找）。

舉個簡單的例子：

var arr = [1, 3, 5, 2, 4, 6];

var isEven = function(num) {

  return !(num & 1);

};

var idx = _.findIndex(arr, isEven);

// => 3

直接看源碼，註釋已經寫的很是清楚了。這裏要注意這個 predicate 函數，其實就是把數組中的元素傳入這個參數，返回一個布爾值。若是返回 true，則表示知足這個條件，若是 false 則相反。

// Generator function to create the findIndex and findLastIndex functions

// dir === 1 => 從前日後找

// dir === -1 => 從後往前找

function createPredicateIndexFinder(dir) {

  // 經典閉包

  return function(array, predicate, context) {

    predicate = cb(predicate, context);

    var length = getLength(array);

    // 根據 dir 變量來肯定數組遍歷的起始位置

    var index = dir > 0 ? 0 : length - 1;

    for (; index >= 0 && index < length; index += dir) {

      // 找到第一個符合條件的元素

      // 並返回下標值

      if (predicate(array[index], index, array)) return index;

    }

    return -1;

  };

}

// Returns the first index on an array-like that passes a predicate test

// 從前日後找到數組中 `第一個知足條件` 的元素，並返回下標值

// 沒找到返回 -1

// _.findIndex(array, predicate, [context])

_.findIndex = createPredicateIndexFinder(1);

// 從後往前找到數組中 `第一個知足條件` 的元素，並返回下標值

// 沒找到返回 -1

// _.findLastIndex(array, predicate, [context])

_.findLastIndex = createPredicateIndexFinder(-1);

接下來看 _.sortIndex 方法，這個方法不管使用仍是實現都很是的簡單。若是往一個有序數組中插入元素，使得數組繼續保持有序，那麼這個插入位置是？這就是這個方法的做用，有序，很顯然用二分查找便可。很少說，直接上源碼。

// _.sortedIndex(list, value, [iteratee], [context])

_.sortedIndex = function(array, obj, iteratee, context) {

  // 注意 cb 方法

  // iteratee 爲空 || 爲 String 類型（key 值）時會返回不一樣方法

  iteratee = cb(iteratee, context, 1);

  // 通過迭代函數計算的值

  var value = iteratee(obj);

  var low = 0, high = getLength(array);

  while (low < high) {

    var mid = Math.floor((low + high) / 2);

    if (iteratee(array[mid]) < value) low = mid + 1; else high = mid;

  }

  return low;

};

最後咱們說說 .indexOf 和 .lastIndexOf 方法。

ES5 引入了 indexOf 和 lastIndexOf 方法，可是 IE < 9 不支持，面試時讓你寫個 Polyfill，你會怎麼作（能夠把 underscore 的實現看作 Polyfill）？如何能讓面試官滿意？首先若是分開來寫，即兩個方法相對獨立地寫，很顯然代碼量會比較多，由於兩個方法功能類似，因此能夠想辦法調用一個方法，將不一樣的部分當作參數傳入，減小代碼量。其次，若是數組已經有序，是否能夠用更快速的二分查找算法？這點會是加分項。

源碼實現：

// Generator function to create the indexOf and lastIndexOf functions

  // _.indexOf = createIndexFinder(1, _.findIndex, _.sortedIndex);

  // _.lastIndexOf = createIndexFinder(-1, _.findLastIndex);

  function createIndexFinder(dir, predicateFind, sortedIndex) {

    // API 調用形式

    // _.indexOf(array, value, [isSorted])

    // _.indexOf(array, value, [fromIndex])

    // _.lastIndexOf(array, value, [fromIndex])

    return function(array, item, idx) {

      var i = 0, length = getLength(array);

      // 若是 idx 爲 Number 類型

      // 則規定查找位置的起始點

      // 那麼第三個參數不是 [isSorted]

      // 因此不能用二分查找優化了

      // 只能遍歷查找

      if (typeof idx == 'number') {

        if (dir > 0) { // 正向查找

          // 重置查找的起始位置

          i = idx >= 0 ? idx : Math.max(idx + length, i);

        } else { // 反向查找

          // 若是是反向查找，重置 length 屬性值

          length = idx >= 0 ? Math.min(idx + 1, length) : idx + length + 1;

        }

      } else if (sortedIndex && idx && length) {

        // 能用二分查找加速的條件

        // 有序 & idx !== 0 && length !== 0

        // 用 _.sortIndex 找到有序數組中 item 正好插入的位置

        idx = sortedIndex(array, item);

        // 若是正好插入的位置的值和 item 恰好相等

        // 說明該位置就是 item 第一次出現的位置

        // 返回下標

        // 不然便是沒找到，返回 -1

        return array[idx] === item ? idx : -1;

      }

      // 特判，若是要查找的元素是 NaN 類型

      // 若是 item !== item

      // 那麼 item => NaN

      if (item !== item) {

        idx = predicateFind(slice.call(array, i, length), _.isNaN);

        return idx >= 0 ? idx + i : -1;

      }

      // O(n) 遍歷數組

      // 尋找和 item 相同的元素

      // 特判排除了 item 爲 NaN 的狀況

      // 能夠放心地用 `===` 來判斷是否相等了

      for (idx = dir > 0 ? i : length - 1; idx >= 0 && idx < length; idx += dir) {

        if (array[idx] === item) return idx;

      }

      return -1;

    };

  }

  // Return the position of the first occurrence of an item in an array,

  // or -1 if the item is not included in the array.

  // If the array is large and already in sort order, pass `true`

  // for **isSorted** to use binary search.

  // _.indexOf(array, value, [isSorted])

  // 找到數組 array 中 value 第一次出現的位置

  // 並返回其下標值

  // 若是數組有序，則第三個參數能夠傳入 true

  // 這樣算法效率會更高（二分查找）

  // [isSorted] 參數表示數組是否有序

  // 同時第三個參數也能夠表示 [fromIndex] （見下面的 _.lastIndexOf）

  _.indexOf = createIndexFinder(1, _.findIndex, _.sortedIndex);

  // 和 _indexOf 類似

  // 反序查找

  // _.lastIndexOf(array, value, [fromIndex])

  // [fromIndex] 參數表示從倒數第幾個開始往前找

  _.lastIndexOf = createIndexFinder(-1, _.findLastIndex);

這裏有一點要注意，.indexOf 方法的第三個參數能夠表示 [fromIndex] 或者 [isSorted]，而 .lastIndexOf 的第三個參數只能表示 [fromIndex]，咱們從代碼中即可以輕易看出：

_.indexOf = createIndexFinder(1, _.findIndex, _.sortedIndex);

_.lastIndexOf = createIndexFinder(-1, _.findLastIndex);

關於這點我也百思不得其解，不知道作這個限制是爲了什麼考慮，歡迎探討~

最後給出本文涉及的五個方法的源碼位置 https://github.com/hanzichi/underscore-analysis/blob/master/underscore-1.8.3.js/src/underscore-1.8.3.js#L613-L673