摘要：但縱使如此，我也要技術(shù)這條路上一路走到黑。接下來(lái)你想不想一起看下下劃線是怎么實(shí)現(xiàn)的。這個(gè)迭代傳遞個(gè)參數(shù)和迭代的或者和最后一個(gè)引用的整個(gè)是從右側(cè)開(kāi)始組合的元素的函數(shù)使用案例我們來(lái)看一下上面的執(zhí)行過(guò)程是怎樣的。希望這篇文章對(duì)大家有點(diǎn)作用。

underscore.js源碼分析第三篇,前兩篇地址分別是

那些不起眼的小工具？

(void 0)與undefined之間的小九九

本篇原文鏈接

源碼地址

?看了很多篇技術(shù)文章，卻依然寫不好前端。

從步入程序猿這個(gè)大坑開(kāi)始到現(xiàn)在，已經(jīng)看過(guò)數(shù)不清的技術(shù)文章和書籍，有的是零散的知識(shí)，有的是系列權(quán)威的教程，但為毛還寫不好摯愛(ài)的前端，聽(tīng)說(shuō)過(guò)一句話，這個(gè)世界又不是只有你一個(gè)人深愛(ài)而不得。但縱使如此，我也要技術(shù)這條路上一路走到黑。直到天涯迷了路，海角翻了船。

今天想說(shuō)幾個(gè)類似我們平常的工作中經(jīng)常用到的幾個(gè)寶貝,姑且把他叫做殺手锏好了，因?yàn)閷?shí)在是特別好用呀，他們分別是...

each

map

reduce

reduceRight

find

filter

every

some

接下來(lái)我們從下劃線underscore.js的視角，一步步看他們的內(nèi)部運(yùn)行的原理是什么....

遍歷list中的所有元素，按順序用遍歷輸出每個(gè)元素，如果傳遞了context，則將iteratee函數(shù)中的this綁定到context上。

先來(lái)看一下怎么使用

let arr = ["name", "sex"]
let obj = {
  name: "qianlongo",
  sex: "boy"
}

// 不傳入context
// 遍歷數(shù)組
_.each(arr, console.log) 
// name 0 (2) ["name", "sex"]
// sex 1 (2) ["name", "sex"]

// 遍歷對(duì)象
_.each(obj, console.log)
// qianlongo name {name: "qianlongo", sex: "boy"}
// boy sex  {name: "qianlongo", sex: "boy"}


// 傳入context
_.each(arr, function (val, key, arr) {
  console.log(this[val])
}, obj)
// qianlongo
// boy

可以看出下劃線的each和原生的數(shù)組forEach有些類似也有不同的地方

原生的forEach只可以遍歷數(shù)組，而下劃線的each還可以遍歷對(duì)象。接下來(lái)你想不想一起看下下劃線是怎么實(shí)現(xiàn)的。come on?。?！

源碼

_.each = _.forEach = function(obj, iteratee, context) {
  // 優(yōu)化遍歷函數(shù)iteratee，將iteratee中的this動(dòng)態(tài)設(shè)置為context
  iteratee = optimizeCb(iteratee, context); 
  var i, length;
  if (isArrayLike(obj)) { // 如果是類數(shù)組類型的obj
    for (i = 0, length = obj.length; i < length; i++) {
      // iteratee接收的三個(gè)參數(shù)分別是 數(shù)組的值，數(shù)組的索引，以及數(shù)組本身
      iteratee(obj[i], i, obj); 
    }
  } else { // 支持對(duì)象類型的數(shù)據(jù)迭代
    var keys = _.keys(obj); // 拿到obj自身的所有keys
    for (i = 0, length = keys.length; i < length; i++) {
      // iteratee接收的三個(gè)參數(shù)分別是 obj的屬性值，obj的屬性，obj本身
      iteratee(obj[keys[i]], keys[i], obj);
    }
  }
  return obj; // 最后將obj返回
};

?，其實(shí)也沒(méi)有那么難理解是吧！開(kāi)始map函數(shù)之旅吧

通過(guò)iteratee將list中的每個(gè)值映射到一個(gè)新的數(shù)組中（注：產(chǎn)生一個(gè)新的數(shù)組。y = f(x),類似高中學(xué)過(guò)的知識(shí)，將x通過(guò)f()映射為一個(gè)新的數(shù)

使用案例

let arr = ["qianlongo", "boy"]
let obj = {
  name: "qianlongo",
  sex: "boy"
}

// list是個(gè)數(shù)組的時(shí)候
_.map(arr, (val, index) => {
  return `hello : ${val}`
})
// ["hello : qianlongo", "hello : boy"]

// list是個(gè)對(duì)象的時(shí)候
_.map(obj, (val, key, obj) => {
  return `hello : ${val}`
})
// ["hello : qianlongo", "hello : boy"]

當(dāng)然還可以傳入第三個(gè)參數(shù)context，其本質(zhì)如each一般，也是讓iteratee函數(shù)中的this動(dòng)態(tài)設(shè)置為context

源碼

 _.map = _.collect = function(obj, iteratee, context) {
  // 可以將這里的內(nèi)部cb函數(shù)理解為綁定iteratee的this到context
  iteratee = cb(iteratee, context);
  // 非類數(shù)組對(duì)象就獲取obj的keys，這里如果是類數(shù)組最后得到的keys為undefined
  var keys = !isArrayLike(obj) && _.keys(obj),
      length = (keys || obj).length,
      results = Array(length); // 創(chuàng)建一個(gè)和obj長(zhǎng)度空間一樣的數(shù)組
  for (var index = 0; index < length; index++) {
    // 注意這里，keys存在則代表obj是個(gè)對(duì)象，所以要拿到keys中的值，否則是類數(shù)組的話，直接用index索引就好了
    var currentKey = keys ? keys[index] : index;
    // 看到了嗎，這里將iteratee執(zhí)行后的返回值塞到了results數(shù)組中
    results[index] = iteratee(obj[currentKey], currentKey, obj);
  }
  return results; // 最后將映射之后的數(shù)組返回
};

通過(guò)源碼可以看到map的實(shí)現(xiàn)思路

創(chuàng)建一個(gè)即將返回的數(shù)組

遍歷list(可以為數(shù)組也可以為對(duì)象)，將list的元素輸入到傳進(jìn)來(lái)的iteratee函數(shù)中，并將其執(zhí)行后的返回值填充進(jìn)數(shù)組。這個(gè)iteratee負(fù)責(zé)映射規(guī)則

當(dāng)list中的所有的元素都可以通過(guò)predicate的檢測(cè)，那么結(jié)果返回true，否則false

使用案例

let arr = [-1, -3, -6, 0, 3, 6, 9]
let obj = {
  name: "qianlongo",
  sex: "boy"
}

let result = _.every(arr, (val, key, arr) => {
  return val > 0
})
// false

let result2 = _.every(obj, (val, key, obj) => {
  return val.indexOf("o") > -1
})
// true

使用起來(lái)蠻簡(jiǎn)單的，傳入一個(gè)謂詞函數(shù)(返回值是一個(gè)布爾值的函數(shù))，最后得到true或者false。

源碼

_.every = _.all = function(obj, predicate, context) {
  // 可以將這里的內(nèi)部cb函數(shù)理解為綁定iteratee的this到context
  predicate = cb(predicate, context);
  // 短路寫法，非類數(shù)組則獲取其keys
  var keys = !isArrayLike(obj) && _.keys(obj),
      length = (keys || obj).length;
  for (var index = 0; index < length; index++) {
    // keys若能轉(zhuǎn)化為"真" 則說(shuō)明obj是對(duì)象類型
    var currentKey = keys ? keys[index] : index; 
    // 只要有一個(gè)不滿足就返回false，中斷迭代
    if (!predicate(obj[currentKey], currentKey, obj)) return false;
  }
  return true; // 否則所有元素都通過(guò)判斷返回true
};

如果list中有任何一個(gè)元素通過(guò) predicate的檢測(cè)就返回true。否則返回false，和every恰好有點(diǎn)相反的意思。

使用案例

let arr = [-1, -3, -6, 0, 3, 6, 9]
let obj = {
  name: "qianlongo",
  sex: ""
}

let result = _.some(arr, (val, key, arr) => {
  return val > 0
})
// true 因?yàn)橹辽儆幸粋€(gè)元素 >0

let result2 = _.some(obj, (val, key, obj) => {
  return val.indexOf("o") > -1
})
// true 兩個(gè)都包含"o" 當(dāng)然返回true

源碼中是怎么實(shí)現(xiàn)的呢,與every唯一不同的地方在返回true還是falase之處？

源碼

_.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; // 只要有一個(gè)滿足條件就返回true
  }
  return false; // 所有都不滿足則返回false
};

遍歷list中的元素，返回第一個(gè)通過(guò)predicate函數(shù)檢測(cè)的值。

使用案例

let arr = [-1, -3, -6, 0, 3, 6, 9]
let obj = {
  sex: "boy",
  name: "qianlongo"
}
let result = _.find(arr, (val, key, arr) => {
  return val > 0
})
// 3
let result2 = _.find(obj, (val, key, obj) => {
  return val.indexOf("o") > -1
})
// boy

源碼

_.find = _.detect = function(obj, predicate, context) {
  var key;
  if (isArrayLike(obj)) {
    // 當(dāng)傳入的是類數(shù)組的時(shí)候，調(diào)用findIndex方法，結(jié)果是>= -1的數(shù)組
    key = _.findIndex(obj, predicate, context);
  } else {
    // 當(dāng)傳入的是一個(gè)對(duì)象的時(shí)候，調(diào)用findKey，結(jié)果是一個(gè)字符串屬性或者undefined
    key = _.findKey(obj, predicate, context);
  }
  // 返回符合條件的value,否則沒(méi)有返回值，即默認(rèn)的undefined
  if (key !== void 0 && key !== -1) return obj[key]; 
};

_.findIndex和_.findKey在后面會(huì)一一分析，目前理解find函數(shù)知道他們?cè)趺从镁秃谩?/p> 6 _.filter(list, predicate, [context])

遍歷list，返回包含所有通過(guò)predicate檢測(cè)的元素(結(jié)果是個(gè)數(shù)組)

使用案例

let arr = [-1, -3, -6, 0, 3, 6, 9]
let obj = {
  sex: "boy",
  name: "qianlongo",
  age: 100
}
let result = _.filter(arr, (val, key, arr) => {
  return val > 0
})
// [3, 6, 9]
let result2 = _.filter(obj, (val, key, obj) => {
  return `${val}`.indexOf("o") > -1 // 使用模板字符串是防止100沒(méi)有indexOf方法而報(bào)錯(cuò)
})
// ["boy", "qianlongo"]

聰明的你是不是已經(jīng)想到了源碼是怎么實(shí)現(xiàn)的了 ?

源碼

_.filter = _.select = function(obj, predicate, context) {
  var results = [];
  // 綁定predicate的this作用域到context
  predicate = cb(predicate, context);
  // 用each方法對(duì)obj進(jìn)行遍歷
  _.each(obj, function(value, index, list) {
    // 符合predicate過(guò)濾條件的，就把對(duì)應(yīng)的值塞到results數(shù)組中
    if (predicate(value, index, list)) results.push(value);
  });
  return results; // 最后返回
};

最后是reduce和reduceRight，兩個(gè)相對(duì)來(lái)說(shuō)更難一些的api，雖然已經(jīng)過(guò)了12點(diǎn)了，手動(dòng)困乏?， 我們咬咬牙堅(jiān)持一下，把最后兩個(gè)說(shuō)完

別名為 inject 和 foldl, reduce方法把list中元素歸結(jié)為一個(gè)多帶帶的數(shù)值。Memo是reduce函數(shù)的初始值，reduce的每一步都需要由iteratee返回。這個(gè)迭代傳遞4個(gè)參數(shù)：memo, value 和 迭代的index（或者 key）和最后一個(gè)引用的整個(gè) list

reducRight是從右側(cè)開(kāi)始組合的元素的reduce函數(shù)

使用案例

var arr = [0, 1, 2, 3, 4, 5],
  sum = _.reduce(arr, (init, cur, i, arr) => {
    return init + cur;
  });    
  
  // 15

我們來(lái)看一下上面的執(zhí)行過(guò)程是怎樣的。

第一回合

// 因?yàn)閕nitialValue沒(méi)有傳入所以回調(diào)函數(shù)的第一個(gè)參數(shù)為數(shù)組的第一項(xiàng)
init = 0;
cur = 1;
=> init + cur = 1;

第二回合

init = 1;
cur = 2;
=> init + cur = 3;

第三回合

init = 3;
cur = 3;
=> init + cur = 6;

第四回合

init = 6;
cur = 4;
=> init + cur = 10;

第五回合

init = 10;
cur = 5;
=> init + cur = 15;

?媽媽啊，終于執(zhí)行完了，這么多回合才結(jié)束，哪像人家格斗高手瞬間就把太極大師整掛了

知道了一步步執(zhí)行流程，我們來(lái)看下源碼到底是怎么實(shí)現(xiàn)的。

源碼

// 源碼還是通過(guò)調(diào)用createReduce生成的，所以主要是看createReduce這個(gè)函數(shù)
_.reduce = _.foldl = _.inject = createReduce(1);

這尼瑪看起來(lái)好嚇人啊，不怕，我們一點(diǎn)點(diǎn)來(lái)分析

function createReduce(dir) {
    // Optimized iterator function as using arguments.length
    // in the main function will deoptimize the, see #1991.
    function iterator(obj, iteratee, memo, keys, index, length) { // 真正執(zhí)行迭代的地方
      for (; index >= 0 && index < length; index += dir) {
        var currentKey = keys ? keys[index] : index; // 如果keys存在則認(rèn)為是obj形式的參數(shù)，所以讀取keys中的屬性值，否則類數(shù)組只需要讀取索引index即可
        memo = iteratee(memo, obj[currentKey], currentKey, obj); // 接著就是執(zhí)行外部傳入的回調(diào)了，并將結(jié)果賦值為memo，也就是我們最后要到的值
      }
      return memo;
    }

    return function(obj, iteratee, memo, context) {
      iteratee = optimizeCb(iteratee, context, 4); // 首先綁定一下this作用域
      var keys = !isArrayLike(obj) && _.keys(obj), // 如果不是類數(shù)組就讀取其keys
          length = (keys || obj).length,
          index = dir > 0 ? 0 : length - 1; // 默認(rèn)開(kāi)始迭代的位置，從左邊第一個(gè)開(kāi)始還是右邊第一個(gè)
      // Determine the initial value if none is provided.
      if (arguments.length < 3) { // 如果沒(méi)有傳入初始化值，則將第一個(gè)值(左邊第一個(gè)或者右邊第一個(gè))作為初始值
        memo = obj[keys ? keys[index] : index];
        index += dir; // 從索引為1開(kāi)始或者索引為length - 2開(kāi)始迭代
      }
      return iterator(obj, iteratee, memo, keys, index, length); // 接著開(kāi)始進(jìn)入自定義的迭代函數(shù)，請(qǐng)往上看
    };
  }

夜深人靜，有點(diǎn)困乏了。希望這篇文章對(duì)大家有點(diǎn)作用。如果對(duì)前幾篇源碼分析的文章感興趣，歡迎前往頂部地址查看

不介意的話，在文章開(kāi)頭的源碼地址那里點(diǎn)一個(gè)小星星吧?

不介意的話，在文章開(kāi)頭的源碼地址那里點(diǎn)一個(gè)小星星吧?

不介意的話，在文章開(kāi)頭的源碼地址那里點(diǎn)一個(gè)小星星吧?