underscore源碼學(xué)習(xí)（二）

Berwin 發(fā)布于2019-08-21 16:42 / 1557人閱讀

摘要：在中，真值檢測函數(shù)的參數(shù)被命名為，有斷言的意思，非常形象。函數(shù)的功能是檢測一個對象或數(shù)組是否包含指定的某個元素。

順著underscore源碼的順序讀下來，弄懂了之前underscore的基本結(jié)構(gòu)，接下來看看underscore為我們提供的一些關(guān)于集合的API。

迭代

關(guān)于迭代，我們都知道ES5原生方法也提供了迭代函數(shù)供我們使用，而在underscore中的迭代則是對原生的迭代函數(shù)進行了封裝優(yōu)化升級。在underscore中，迭代的對象不僅僅是數(shù)組對象，還支持Array，Object的迭代，對Object的迭代的依據(jù)是對象的鍵值對（key-value），看看 underscore中_.each是如何實現(xiàn)的：

/**
 * each方法將ES5的forEach換為了函數(shù)式表達
 * @param obj 待迭代集合
 * @param iteratee 迭代過程中每個被迭代元素的回調(diào)函數(shù)
 * @param context 上下文
 * @example
 * // 數(shù)組迭代
 * _.each([1, 2, 3], alert);
 * // 對象迭代
 * _.each({one: 1, two: 2, three: 3}, alert);
 */
_.each = _.forEach = function (obj, iteratee, context) {
  //優(yōu)化回調(diào)
  iteratee = optimizeCb(iteratee, context);
  var i, length;
  // 判斷是數(shù)組還是對象
  if (isArrayLike(obj)) {
    for (i = 0, length = obj.length; i < length; i++) {
      iteratee(obj[i], i, obj)
    }
  } else {
    var keys = _.keys(obj)
    for (i = 0, length = keys.length; i < length; i++) {
      iteratee(obj[keys[i]], keys[i], obj)
    }
  }
  // 返回對象自身 以便于鏈?zhǔn)秸{(diào)用
  return obj
};

看以上源碼可知，_.each傳入三個參數(shù)，主要的是第二個iteratee回調(diào)函數(shù)，然后再通過optimizeCb優(yōu)化回調(diào)，返回對應(yīng)的回調(diào)(optimizeCb可以查看第一部分)。
array迭代的是數(shù)組的每個元素，傳入的三個參數(shù)分別為數(shù)組的值，對應(yīng)值的下標(biāo)，數(shù)組本身。Object迭代的元素是對象的每個鍵值對key-value，傳入的參數(shù)為對象的key所對應(yīng)的值，對象的key值，對象本身。

map-reduce

ES5原生方法也提供map和reduce方法，它們提供了一種對列表操作的思路，是函數(shù)式編程重要組成部分。具體map和reduce可以去MDN上查看相關(guān)API。

map在underscore中的實現(xiàn)

它的實現(xiàn)思路是：

返回一個新的列表或元素

對列表中的值進行遍歷，用指定函數(shù)func作用于每個遍歷的元素，輸出一個新的值放到新的列表中

_.map = _.collect = function(obj, iteratee, context) {
  iteratee = cb(iteratee, context)
  //考慮數(shù)組和對象
  var keys = !isArrayLike(obj) && _.keys(obj),
      length = (keys || obj).length,
      results = Array(length) // 初始化定長數(shù)組
  for (var index = 0; index < length; index++) {
    var currentKey = keys ? keys[index] : index
    results[index] = iteratee(obj[currentKey], currentKey, obj)
  }
  return results
}

使用用例：
對數(shù)組使用

var res = _.map([1,2,3], function(elem, index, array) {
  return elem * 2
})
// => [2,4,6]

對對象使用

var obj = {
 name: "lzb",
 age: "20",
 sex: "male"
}
var res = _.map(obj, function(value, key, obj) {
  return key
})
// => name age sex

reduce在underscore中的實現(xiàn)

reduce相對于map的實現(xiàn)復(fù)雜了一些，underscore首先在外部實現(xiàn)了reduce函數(shù)的工廠函數(shù)createReduce，這個函數(shù)實現(xiàn)了以下功能：

區(qū)分reduce的開始方向(參數(shù)dir)，是從首端開始末端開始

memo記錄最新的結(jié)果

reduce的執(zhí)行過程大概是：

設(shè)置一個memo變量緩存當(dāng)前規(guī)約過程的結(jié)果

如果用戶為初始化memo，則memo的值為序列的第一個值

遍歷當(dāng)前集合，對當(dāng)前遍歷到的元素按傳入的func進行規(guī)約操作，刷新memo

遍歷結(jié)束，返回memo

createReduce的實現(xiàn)：

/**
 * reduce函數(shù)的工廠函數(shù), 用于生成一個reducer, 通過參數(shù)決定reduce的方向
 * @param dir 方向 left or right
 * @returns {function}
 */
function createReduce(dir) {
  function iterator(obj, iteratee, memo, keys, index, length) {
    for (; idnex > 0 && index < length; index += dir) {
      var currentKey = keys ? keys[index] : index
      // memo 用來記錄最新的 reduce 結(jié)果
      // 執(zhí)行 reduce 回調(diào), 刷新當(dāng)前值
      memo = iteratee(memo, obj[currentKey], currentKey, obj)
    }
  }
  /**
   * @param obj 傳入的對象
   * @param iteratee 回調(diào)函數(shù)
   * @param memo 初始化累加器的值
   * @param context 執(zhí)行上下文
   */
  return function (obj, iteratee, memo, context) {
    iteratee = optimizeCb(iteratee, context, 4)
    var keys = !isArrayLike(obj) && _.keys(obj),
      length = (keys || obj).length
    index = dir > 0 ? 0 : length - 1
    // 如果沒有傳入memo初始值 則從左第一個為初始值 從右則最后一個為初始值
    if (arguments.length < 3) {
      memo = obj[keys ? keys[index] : index]
      index += dir
    }
    return iterator(obj, iteratee, memo, keys, index, length)
  }
}

最后，underscore暴露了兩個供使用的方法

// 由左至右進行規(guī)約
_.reduce = _.foldl = _.inject = createReduce(1);
// 由右至左進行規(guī)約
_.reduceRight = _.foldr = createReduce(-1);

使用用例：
對數(shù)組使用

var sum = _.reduce([1,2,3,4], function(prev, current, index, arr) {
  return prev + current
}, 0)
// => 10

對對象使用

var scores = {
  english: 93,
  math: 88,
  chinese: 100
};
var total = _.reduce(scores, function(prev, value, key, obj){
  return prev+value;
}, 0);
// => total: 281

真值檢測函數(shù)

在underscore中，除了提供_.each,_.map._.reduce等函數(shù)操作集合，還提供了_.filter, _.reject, _.every, _.some這幾個基于邏輯判斷的集合操作函數(shù)。這些API都依賴于用戶提供的真值檢測函數(shù)來返回對應(yīng)的結(jié)果。
在underscore中，真值檢測函數(shù)的參數(shù)被命名為predicate，predicate有斷言的意思，非常形象。當(dāng)然，predicate依舊會通過cb優(yōu)化。

_.filter

看看_.filter的實現(xiàn)

/**
 * 根據(jù)真值檢測函數(shù) 過濾對象 
 * 檢測通過符合條件 保留元素
 * @param obj
 * @param predicate
 * @param context
 * @example 
 * var evens = _.filter([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; });
 * => [2, 4, 6]
 */
_.filter = _.select = function (obj, predicate, context) {
  var results = []
  // 優(yōu)化回調(diào)
  predicate = cb(predicate, context)
  _.each(obj, function (value, index, list) {
    if (predicate(value, index, list)) results.push(value)
  })
  return results
}

根據(jù)傳入的元素信息，檢測并返回對應(yīng)boolean值，決定當(dāng)前元素要被保留。

_.reject

上面的_.filter函數(shù)是元素符合檢測條件就保留，而_.reject函數(shù)則是與_.filter相反的功能
我們來看看underscore中_.reject的實現(xiàn)

/**
 * filter的反運算,
 * 如果真值檢測通過, 元素被丟棄
 */
_.reject = function (obj, predicate, context) {
  return _.filter(obj, _negate(cb(predicate)), context)
}

可以看到，這個函數(shù)只有一行代碼，非常簡短。那么，這其中的_.negate函數(shù)又是什么呢？猜測下，negate在英語中有否定的意思，那么跟_.reject的功能就有了一定的聯(lián)系，下面看看_.negate的實現(xiàn)

_.negate = function(predicate) {
  return function() {
    return !predicate.apply(this, arguments)
  }
}

可以看到，_.negate得到了反義predicate的執(zhí)行結(jié)果，減少了大量重復(fù)的代碼，值得學(xué)習(xí)。

_.every

迭代對象里的每個元素，只有每個元素都通過真值檢測函數(shù)，才返回true。

/**
 * @param obj
 * @param predicate
 * @param context
 * @example
 * _.every([true, 1, null, "yes"], _.identity);
 * => false
 */
_.every = _.all = function (obj, predicate, context) {
  predicate = cb(predicate, context)
  var keys = !isArrayLike(obj) && _.keys(obj),
    length = (keys || obj).length
  for (var index = 0; index < length; index++) {
    var currentKey = keys ? keys[index] : index
    if (!predicate(obj[currentKey], currentKey, obj)) return false
  }
  return true
}

_.some

這個API跟_.every差不多，從英語單詞的含義我們也可以猜出它的功能，即迭代對象的所有元素，如果有任意一個通過真值檢測，則返回true。

/**
 * @param obj
 * @param predicate
 * @param context
 * @example
 * _.some([null, 0, "yes", false]);
 * => true
 */
_.some = _.any = function (obj, predicate, context) {
  predicate = cb(predicate, context)
  var keys = !isArrayLike(obj) && _.keys(obj),
    length = (keys || obj).length
  for (var index = 0; index < length; index++) {
    var currentKey = keys ? keys[index] : index
    if (predicate(obj[currentKey], currentKey, obj)) return true
  }
  return false
}

_.contains

_.contains函數(shù)的功能是檢測一個對象或數(shù)組是否包含指定的某個元素。

/**
 * @param obj 待檢測對象
 * @param item 指定的元素
 * @param fromIndex 從哪個位置開始找
 * @param guard
 * @example
 * _.contains([1,2,3], 3)
 * => true
 */
_.contains = _.includes = _.include = function (obj, item, fromIndex, guard) {
  if (!isArrayLike(obj)) obj = _.values(obj)
  if (typeof fromIndex != "number" || guard) fromIndex = 0
  return _.indexOf(obj, item.fromIndex) >= 0
}

從代碼上看，還是比較容易理解的，這里主要用到了underscore內(nèi)部提供的兩個函數(shù)，_.values和_.indexOf，從名字上我們也可以猜出它們之間的功能，如果傳入的對象，則取出該對象所有的值，然后再進行查找比較，看看_values的實現(xiàn)：

/**
 * 獲得一個對象的所有value
 * @param obj 對象
 * @returns {Array} 值序列
 * @example
 * _.values({one: 1, two: 2, three: 3});
 * // => [1, 2, 3]
 */
_.values = function (obj) {
  var keys = _.keys(obj)
  var length = keys.length
  var values = Array(length)
  for (var i = 0; i < length; i++) {
    values[i] = obj[keys[i]]
  }
  return values
}

而_,indexOf的實現(xiàn)就比較復(fù)雜了，這是underscore中提供的關(guān)于查找的API，詳細(xì)介紹將在下一篇總結(jié)寫出。

云服務(wù)器 GPU云服務(wù)器 underscore源碼分析深度學(xué)習(xí)二 underscore underscore系列

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/88627.html

發(fā)表評論

登陸后可評論

0條評論

Berwin

男|高級講師

我要關(guān)注我要私信

TA的文章

【黑五】OVH/Soyoustart：獨服、VPS優(yōu)惠

閱讀 1917·2021-11-24 11:16
有時候苦苦找尋的東西，原來是近在咫尺——學(xué)習(xí)資源！

閱讀 3266·2021-09-10 10:51
DMIT：LAX.Pro系列VPS進行帶寬免費升級/加量不加價/200M升級為1Gbps/300M升

閱讀 3218·2021-08-03 14:03
前端 CSS : 1# 純 CSS 實現(xiàn)萬圣節(jié) toggle 控件

閱讀 1272·2019-08-29 17:03
利用css3修改input[type=radio]樣式

閱讀 3253·2019-08-29 12:36
js監(jiān)聽用戶進入和離開當(dāng)前頁面

閱讀 2239·2019-08-26 14:06
React Fiber 架構(gòu)理解

閱讀 502·2019-08-23 16:32
Docker部署Node.js的方法步驟

閱讀 2695·2019-08-23 13:42

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

underscore源碼學(xué)習(xí)（二）

相關(guān)文章

**前端資源系列（4）-前端學(xué)習(xí)資源分享&前端面試資源匯總**

underscore源碼學(xué)習(xí)（一）

underscore 的源碼該如何閱讀？

Underscore源碼解析（四）

Underscore源碼解析（一）

發(fā)表評論

0條評論

Berwin

男|高級講師

TA的文章

【黑五】OVH/Soyoustart：獨服、VPS優(yōu)惠

有時候苦苦找尋的東西，原來是近在咫尺——學(xué)習(xí)資源！

DMIT：LAX.Pro系列VPS進行帶寬免費升級/加量不加價/200M升級為1Gbps/300M升

前端 CSS : 1# 純 CSS 實現(xiàn)萬圣節(jié) toggle 控件

利用css3修改input[type=radio]樣式

js監(jiān)聽用戶進入和離開當(dāng)前頁面

React Fiber 架構(gòu)理解

Docker部署Node.js的方法步驟

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

underscore源碼學(xué)習(xí)（二）

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！