前言
underscore.js源碼分析第三篇,前兩篇地址分別是
??看了很多篇技術(shù)文章时捌，卻依然寫不好前端权她。
從步入程序猿這個大坑開始到現(xiàn)在，已經(jīng)看過數(shù)不清的技術(shù)文章和書籍英染，有的是零散的知識，有的是系列權(quán)威的教程秋忙，但為毛還寫不好摯愛的前端，聽說過一句話构舟，這個世界又不是只有你一個人深愛而不得灰追。但縱使如此，我也要技術(shù)這條路上一路走到黑狗超。直到天涯迷了路弹澎，海角翻了船。
開始
今天想說幾個類似我們平常的工作中經(jīng)常用到的幾個寶貝,姑且把他叫做殺手锏好了努咐，因為實在是特別好用呀苦蒿，他們分別是...
- each
- map
- reduce
- reduceRight
- find
- filter
- every
- some
接下來我們從下劃線underscore.js的視角，一步步看他們的內(nèi)部運行的原理是什么....
1 _.each(list, iteratee, [context])
遍歷list中的所有元素渗稍，按順序用遍歷輸出每個元素刽肠，如果傳遞了context溃肪，則將iteratee函數(shù)中的this綁定到context上免胃。
先來看一下怎么使用
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"]
// 遍歷對象
_.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還可以遍歷對象。接下來你想不想一起看下下劃線是怎么實現(xiàn)的羔沙。come onＬ衫浴！扼雏！
源碼
_.each = _.forEach = function(obj, iteratee, context) {
// 優(yōu)化遍歷函數(shù)iteratee坚嗜，將iteratee中的this動態(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接收的三個參數(shù)分別是 數(shù)組的值，數(shù)組的索引诗充，以及數(shù)組本身
iteratee(obj[i], i, obj);
}
} else { // 支持對象類型的數(shù)據(jù)迭代
var keys = _.keys(obj); // 拿到obj自身的所有keys
for (i = 0, length = keys.length; i < length; i++) {
// iteratee接收的三個參數(shù)分別是 obj的屬性值苍蔬，obj的屬性，obj本身
iteratee(obj[keys[i]], keys[i], obj);
}
}
return obj; // 最后將obj返回
};
??蝴蜓，其實也沒有那么難理解是吧碟绑！開始map函數(shù)之旅吧
2 _.map(list, iteratee, [context])
通過iteratee將list中的每個值映射到一個新的數(shù)組中（注：產(chǎn)生一個新的數(shù)組。y = f(x),類似高中學(xué)過的知識茎匠，將x通過f()映射為一個新的數(shù)
使用案例
let arr = ['qianlongo', 'boy']
let obj = {
name: 'qianlongo',
sex: 'boy'
}
// list是個數(shù)組的時候
_.map(arr, (val, index) => {
return `hello : ${val}`
})
// ["hello : qianlongo", "hello : boy"]
// list是個對象的時候
_.map(obj, (val, key, obj) => {
return `hello : ${val}`
})
// ["hello : qianlongo", "hello : boy"]
當(dāng)然還可以傳入第三個參數(shù)context格仲，其本質(zhì)如each一般，也是讓iteratee函數(shù)中的this動態(tài)設(shè)置為context
源碼
_.map = _.collect = function(obj, iteratee, context) {
// 可以將這里的內(nèi)部cb函數(shù)理解為綁定iteratee的this到context
iteratee = cb(iteratee, context);
// 非類數(shù)組對象就獲取obj的keys诵冒，這里如果是類數(shù)組最后得到的keys為undefined
var keys = !isArrayLike(obj) && _.keys(obj),
length = (keys || obj).length,
results = Array(length); // 創(chuàng)建一個和obj長度空間一樣的數(shù)組
for (var index = 0; index < length; index++) {
// 注意這里凯肋，keys存在則代表obj是個對象，所以要拿到keys中的值汽馋，否則是類數(shù)組的話侮东，直接用index索引就好了
var currentKey = keys ? keys[index] : index;
// 看到了嗎，這里將iteratee執(zhí)行后的返回值塞到了results數(shù)組中
results[index] = iteratee(obj[currentKey], currentKey, obj);
}
return results; // 最后將映射之后的數(shù)組返回
};
通過源碼可以看到map的實現(xiàn)思路
- 創(chuàng)建一個?即將返回的數(shù)組
- 遍歷list(可以為數(shù)組也可以為對象)豹芯，將list的元素輸入到傳進來的iteratee函數(shù)中悄雅，并將其執(zhí)行后的返回值填充進數(shù)組。這個iteratee負責(zé)映射規(guī)則
3 _.every(list, [predicate], [context])
當(dāng)list中的所有的元素都可以通過predicate的檢測告组，那么結(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
使用起來蠻簡單的，傳入一個謂詞函數(shù)(返回值是一個布爾值的函數(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)化為"真" 則說明obj是對象類型
var currentKey = keys ? keys[index] : index;
// 只要有一個不滿足就返回false我碟，中斷迭代
if (!predicate(obj[currentKey], currentKey, obj)) return false;
}
return true; // 否則所有元素都通過判斷返回true
};
4 _.some(list, [predicate], [context])
如果list中有任何一個元素通過 predicate的檢測就返回true放案。否則返回false，和every恰好有點相反的意思矫俺。
使用案例
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 因為至少有一個元素 >0
let result2 = _.some(obj, (val, key, obj) => {
return val.indexOf('o') > -1
})
// true 兩個都包含'o' 當(dāng)然返回true
源碼中是怎么實現(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; // 只要有一個滿足條件就返回true
}
return false; // 所有都不滿足則返回false
};
5 _.find(list, predicate, [context])
遍歷list中的元素掸冤，返回第一個通過predicate函數(shù)檢測的值。
使用案例
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ù)組的時候友雳，調(diào)用findIndex方法稿湿，結(jié)果是>= -1的數(shù)組
key = _.findIndex(obj, predicate, context);
} else {
// 當(dāng)傳入的是一個對象的時候，調(diào)用findKey押赊，結(jié)果是一個字符串屬性或者undefined
key = _.findKey(obj, predicate, context);
}
// 返回符合條件的value,否則沒有返回值饺藤，即默認的undefined
if (key !== void 0 && key !== -1) return obj[key];
};
_.findIndex和_.findKey在后面會一一分析，目前理解find函數(shù)知道他們怎么用就好流礁。
6 _.filter(list, predicate, [context])
遍歷list涕俗，返回包含所有通過predicate檢測的元素(結(jié)果是個數(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沒有indexOf方法而報錯
})
// ["boy", "qianlongo"]
聰明的你是不是已經(jīng)想到了源碼是怎么實現(xiàn)的了 ??
源碼
_.filter = _.select = function(obj, predicate, context) {
var results = [];
// 綁定predicate的this作用域到context
predicate = cb(predicate, context);
// 用each方法對obj進行遍歷
_.each(obj, function(value, index, list) {
// 符合predicate過濾條件的，就把對應(yīng)的值塞到results數(shù)組中
if (predicate(value, index, list)) results.push(value);
});
return results; // 最后返回
};
最后是reduce和reduceRight神帅，兩個相對來說更難一些的api再姑，雖然已經(jīng)過了12點了，手動困乏??找御， 我們咬咬牙堅持一下元镀，把最后兩個說完
7 _.reduce(list, iteratee, [memo], [context])，
別名為 inject 和 foldl, reduce方法把list中元素歸結(jié)為一個單獨的數(shù)值萎坷。Memo是reduce函數(shù)的初始值凹联，reduce的每一步都需要由iteratee返回。這個迭代傳遞4個參數(shù)：memo, value 和 迭代的index（或者 key）和最后一個引用的整個 list
8 _.reduceRight(list, iteratee, memo, [context])
reducRight是從右側(cè)開始組合的元素的reduce函數(shù)
使用案例
var arr = [0, 1, 2, 3, 4, 5],
sum = _.reduce(arr, (init, cur, i, arr) => {
return init + cur;
});
// 15
我們來看一下上面的執(zhí)行過程是怎樣的哆档。
第一回合
// 因為initialValue沒有傳入所以回調(diào)函數(shù)的第一個參數(shù)為數(shù)組的第一項
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í)行流程澳淑，我們來看下源碼到底是怎么實現(xiàn)的。
源碼
// 源碼還是通過調(diào)用createReduce生成的插佛，所以主要是看createReduce這個函數(shù)
_.reduce = _.foldl = _.inject = createReduce(1);
這尼瑪看起來好嚇人啊杠巡，不怕，我們一點點來分析
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存在則認為是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; // 默認開始迭代的位置嫩海，從左邊第一個開始還是右邊第一個
// Determine the initial value if none is provided.
if (arguments.length < 3) { // 如果沒有傳入初始化值，則將第一個值(左邊第一個或者右邊第一個)作為初始值
memo = obj[keys ? keys[index] : index];
index += dir; // 從索引為1開始或者索引為length - 2開始迭代
}
return iterator(obj, iteratee, memo, keys, index, length); // 接著開始進入自定義的迭代函數(shù)囚痴，請往上看
};
}
結(jié)語
夜深人靜叁怪，有點困乏了。希望這篇文章對大家有點作用深滚。如果對前幾篇源碼分析的文章感興趣奕谭，歡迎前往頂部地址查看
不介意的話涣觉，在文章開頭的源碼地址那里點一個小星星吧??
不介意的話，在文章開頭的源碼地址那里點一個小星星吧??
不介意的話血柳，在文章開頭的源碼地址那里點一個小星星吧??
