摘要:本文同步自我得博客前兩天在微博上看到的微博推薦了我的前兩篇文章,有點(diǎn)意外和驚喜。沒(méi)看過(guò)前兩篇博客的朋友可以戳這里源碼解析一源碼解析二上一篇文章介紹了的個(gè)函數(shù)的具體實(shí)現(xiàn)細(xì)節(jié),今天將繼續(xù)介紹其他的函數(shù)。
本文同步自我得博客:http://www.joeray61.com
前兩天在微博上看到SF的微博推薦了我的前兩篇文章,有點(diǎn)意外和驚喜。作為一個(gè)菜鳥,真的是倍受鼓舞,我寫博客的動(dòng)力也更充足了。
沒(méi)看過(guò)前兩篇博客的朋友可以戳這里:Underscore源碼解析(一)、Underscore源碼解析(二)
上一篇文章介紹了underscore的10個(gè)函數(shù)的具體實(shí)現(xiàn)細(xì)節(jié),今天將繼續(xù)介紹其他的函數(shù)。
_.invoke = function(obj, method) { // 調(diào)用同名方法時(shí)傳遞的參數(shù)(從第3個(gè)參數(shù)開始) var args = slice.call(arguments, 2); // 依次調(diào)用每個(gè)元素的方法, 并將結(jié)果放入數(shù)組中返回 return _.map(obj, function(value) { return (_.isFunction(method) ? method || value : value[method]).apply(value, args); }); };
這個(gè)函數(shù)依次調(diào)用集合中所有元素的同名方法,從第3個(gè)參數(shù)開始的所有參數(shù)將被傳入到元素的調(diào)用方法中,最后返回一個(gè)數(shù)組,該數(shù)組存儲(chǔ)了所有方法的處理結(jié)果
_.pluck_.pluck = function(obj, key) { // 如果某一個(gè)對(duì)象中不存在該屬性, 則返回undefined return _.map(obj, function(value) { return value[key]; }); };
這個(gè)函數(shù)遍歷了一個(gè)由對(duì)象列表組成的集合,并返回每個(gè)對(duì)象中的指定屬性的值列表
_.max_.max = function(obj, iterator, context) { // 如果集合是一個(gè)數(shù)組, 且沒(méi)有使用處理器, 則使用Math.max獲取最大值 // 一般會(huì)是在一個(gè)數(shù)組存儲(chǔ)了一系列Number類型的數(shù)據(jù) if(!iterator && _.isArray(obj) && obj[0] === +obj[0]) return Math.max.apply(Math, obj); // 對(duì)于空值, 直接返回負(fù)無(wú)窮大 if(!iterator && _.isEmpty(obj)) return -Infinity; // 一個(gè)臨時(shí)的對(duì)象, computed用于在比較過(guò)程中存儲(chǔ)最大值(臨時(shí)的) var result = { computed : -Infinity }; // 迭代集合中的元素 each(obj, function(value, index, list) { // 如果指定了處理器參數(shù), 則比較的數(shù)據(jù)為處理器返回的值, 否則直接使用each遍歷時(shí)的默認(rèn)值 var computed = iterator ? iterator.call(context, value, index, list) : value; // 如果比較值相比上一個(gè)值要大, 則將當(dāng)前值放入result.value computed >= result.computed && ( result = { value : value, computed : computed }); }); // 返回最大值 return result.value; };
顧名思義,這個(gè)函數(shù)用來(lái)返回集合中的最大值, 如果不存在可比較的值, 則返回undefined
_.min_.min = function(obj, iterator, context) { if(!iterator && _.isArray(obj) && obj[0] === +obj[0]) return Math.min.apply(Math, obj); if(!iterator && _.isEmpty(obj)) return Infinity; var result = { computed : Infinity }; each(obj, function(value, index, list) { var computed = iterator ? iterator.call(context, value, index, list) : value; computed < result.computed && ( result = { value : value, computed : computed }); }); return result.value; };
這個(gè)函數(shù)沒(méi)有加注釋,因?yàn)閷?shí)現(xiàn)過(guò)程與max基本相同,用于返回集合中的最小值
_.shuffle_.shuffle = function(obj) { // shuffled變量存儲(chǔ)處理過(guò)程及最終的結(jié)果數(shù)據(jù) var shuffled = [], rand; // 迭代集合中的元素 each(obj, function(value, index, list) { // 生成一個(gè)隨機(jī)數(shù), 隨機(jī)數(shù)在<0-當(dāng)前已處理的數(shù)量>之間 rand = Math.floor(Math.random() * (index + 1)); // 將已經(jīng)隨機(jī)得到的元素放到shuffled數(shù)組末尾 shuffled[index] = shuffled[rand]; // 在前面得到的隨機(jī)數(shù)的位置插入最新值 shuffled[rand] = value; }); // 返回一個(gè)數(shù)組, 該數(shù)組中存儲(chǔ)了經(jīng)過(guò)隨機(jī)混排的集合元素 return shuffled; };
這個(gè)函數(shù)是通過(guò)隨機(jī)數(shù), 讓數(shù)組無(wú)須排列,實(shí)際上是實(shí)現(xiàn)了一個(gè)模擬洗牌過(guò)程的算法
_.sortBy_.sortBy = function(obj, val, context) { // val應(yīng)該是對(duì)象的一個(gè)屬性, 或一個(gè)處理器函數(shù), 如果是一個(gè)處理器, 則應(yīng)該返回需要進(jìn)行比較的數(shù)據(jù) var iterator = _.isFunction(val) ? val : function(obj) { return obj[val]; }; // 調(diào)用順序: _.pluck(_.map().sort()); // 調(diào)用_.map()方法遍歷集合, 并將集合中的元素放到value節(jié)點(diǎn), 將元素中需要進(jìn)行比較的數(shù)據(jù)放到criteria屬性中 // 調(diào)用sort()方法將集合中的元素按照criteria屬性中的數(shù)據(jù)進(jìn)行順序排序 // 調(diào)用pluck獲取排序后的對(duì)象集合并返回 return _.pluck(_.map(obj, function(value, index, list) { return { value : value, criteria : iterator.call(context, value, index, list) }; }).sort(function(left, right) { var a = left.criteria, b = right.criteria; if(a === void 0) return 1; if(b === void 0) return -1; return a < b ? -1 : a > b ? 1 : 0; }), "value"); };
這個(gè)函數(shù)對(duì)集合中元素, 按照特定的字段或值進(jìn)行排列,相比Array.prototype.sort方法, sortBy方法支持對(duì)對(duì)象排序
_.groupBy_.groupBy = function(obj, val) { var result = {}; // val將被轉(zhuǎn)換為進(jìn)行分組的處理器函數(shù), 如果val不是一個(gè)Function類型的數(shù)據(jù), 則將被作為篩選元素時(shí)的key值 var iterator = _.isFunction(val) ? val : function(obj) { return obj[val]; }; // 迭代集合中的元素 each(obj, function(value, index) { // 將處理器的返回值作為key, 并將相同的key元素放到一個(gè)新的數(shù)組 var key = iterator(value, index); (result[key] || (result[key] = [])).push(value); }); // 返回已分組的數(shù)據(jù) return result; };
這個(gè)函數(shù)將集合中的元素, 按處理器返回的key分為多個(gè)數(shù)組
_.sortedIndex_.sortedIndex = function(array, obj, iterator) { // 如果沒(méi)有指定處理器參數(shù), 則使用默認(rèn)的處理器函數(shù),該函數(shù)會(huì)返回參數(shù)本身 iterator || ( iterator = _.identity); var low = 0, high = array.length; // 不斷與中間值對(duì)比,尋找obj的正確插入點(diǎn) while(low < high) { // (low + high) >> 1 相當(dāng)于 Math.floor((low + high) / 2) var mid = (low + high) >> 1; iterator(array[mid]) < iterator(obj) ? low = mid + 1 : high = mid; } // 返回obj插入array之后的索引號(hào) return low; };
這個(gè)函數(shù)的作用是將obj插入已經(jīng)排序的array中,返回obj在array中的索引號(hào)
_.toArray_.toArray = function(obj) { if(!obj) return []; if(_.isArray(obj)) return slice.call(obj); // 將arguments轉(zhuǎn)換為數(shù)組 if(_.isArguments(obj)) return slice.call(obj); if(obj.toArray && _.isFunction(obj.toArray)) return obj.toArray(); // 將對(duì)象轉(zhuǎn)換為數(shù)組, 數(shù)組中包含對(duì)象中所有屬性的值列表(不包含對(duì)象原型鏈中的屬性) return _.values(obj); };
這個(gè)函數(shù)很簡(jiǎn)單,作用是將一個(gè)集合轉(zhuǎn)換一個(gè)數(shù)組并返回
_.size_.size = function(obj) { // 如果集合是一個(gè)數(shù)組, 則計(jì)算數(shù)組元素?cái)?shù)量 // 如果集合是一個(gè)對(duì)象, 則計(jì)算對(duì)象中的屬性數(shù)量(不包含對(duì)象原型鏈中的屬性) return _.isArray(obj) ? obj.length : _.keys(obj).length; };
這個(gè)函數(shù)用于計(jì)算集合中元素的數(shù)量,isArray和keys函數(shù)后面會(huì)介紹到
_.first / _.head / _.take_.first = _.head = _.take = function(array, n, guard) { // 如果沒(méi)有指定參數(shù)n, 則返回第一個(gè)元素 // 如果指定了n, 則返回一個(gè)新的數(shù)組, 包含順序指定數(shù)量n個(gè)元素 // guard參數(shù)用于確定只返回第一個(gè)元素, 當(dāng)guard為true時(shí), 指定數(shù)量n無(wú)效 return (n != null) && !guard ? slice.call(array, 0, n) : array[0]; };
這個(gè)函數(shù)用于返回一個(gè)數(shù)組的第一個(gè)或順序指定的n個(gè)元素
_.initial_.initial = function(array, n, guard) { // 如果沒(méi)有傳遞參數(shù)n, 則默認(rèn)返回除最后一個(gè)元素外的其它元素 // 如果傳遞參數(shù)n, 則返回從最后一個(gè)元素開始向前的n個(gè)元素外的其它元素 // guard用于確定只返回一個(gè)元素, 當(dāng)guard為true時(shí), 指定數(shù)量n無(wú)效 return slice.call(array, 0, array.length - ((n == null) || guard ? 1 : n)); };
這個(gè)函數(shù)返回一個(gè)新數(shù)組, 包含除最后一個(gè)元素外的其它元素, 或排除從最后一個(gè)元素開始向前指定n個(gè)元素
_.last_.last = function(array, n, guard) { if((n != null) && !guard) { // 計(jì)算并指定獲取的元素位置n, 直到數(shù)組末尾, 作為一個(gè)新的數(shù)組返回 return slice.call(array, Math.max(array.length - n, 0)); } else { // 如果沒(méi)有指定數(shù)量, 或guard為true時(shí), 只返回最后一個(gè)元素 return array[array.length - 1]; } };
這個(gè)函數(shù)與first相反,返回?cái)?shù)組的最后一個(gè)或倒序指定的n個(gè)元素
_.rest / _.tail_.rest = _.tail = function(array, index, guard) { // 計(jì)算slice的第二個(gè)位置參數(shù), 直到數(shù)組末尾 // 如果沒(méi)有指定index, 或guard值為true, 則返回除第一個(gè)元素外的其它元素 // (index == null)值為true時(shí), 作為參數(shù)傳遞給slice函數(shù)將被自動(dòng)轉(zhuǎn)換為1 return slice.call(array, (index == null) || guard ? 1 : index); };
這個(gè)函數(shù)與initial相反,用于獲取除了第一個(gè)或指定前n個(gè)元素外的其它元素
_.campact_.compact = function(array) { return _.filter(array, function(value) { return !!value; }); };
這個(gè)函數(shù)借助filter函數(shù),返回?cái)?shù)組中所有值能被轉(zhuǎn)換為true的元素, 返回一個(gè)新的數(shù)組,不能被轉(zhuǎn)換的值包括 false, 0, "", null, undefined, NaN, 這些值將被轉(zhuǎn)換為false
_.flatten_.flatten = function(array, shallow) { // 迭代數(shù)組中的每一個(gè)元素, 并將返回值作為demo傳遞給下一次迭代 return _.reduce(array, function(memo, value) { // 如果元素依然是一個(gè)數(shù)組, 進(jìn)行以下判斷: // - 如果不進(jìn)行深層合并, 則使用Array.prototype.concat將當(dāng)前數(shù)組和之前的數(shù)據(jù)進(jìn)行連接 // - 如果支持深層合并, 則迭代調(diào)用flatten方法, 直到底層元素不再是數(shù)組類型 if(_.isArray(value)) return memo.concat( shallow ? value : _.flatten(value)); // 數(shù)據(jù)(value)已經(jīng)處于底層, 不再是數(shù)組類型, 則將數(shù)據(jù)合并到memo中并返回 memo[memo.length] = value; return memo; }, []); };
這個(gè)函數(shù)用于將一個(gè)多維數(shù)組合成為一維數(shù)組, 支持深層合并,其中第二個(gè)參數(shù)shallow用于控制合并深度, 當(dāng)shallow為true時(shí), 只合并第一層, 默認(rèn)進(jìn)行深層合并
_.without_.without = function(array) { return _.difference(array, slice.call(arguments, 1)); };
這個(gè)函數(shù)用于篩選并返回當(dāng)前數(shù)組中與指定數(shù)據(jù)不相等的差異數(shù)據(jù),具體可以參看我后續(xù)對(duì)difference函數(shù)的介紹
_.uniq/_.unique_.uniq = _.unique = function(array, isSorted, iterator) { // 如果使用了iterator處理器, 則先將當(dāng)前數(shù)組中的數(shù)據(jù)會(huì)先經(jīng)過(guò)按迭代器處理, 并返回一個(gè)處理后的新數(shù)組 // 新數(shù)組用于作為比較的基準(zhǔn) var initial = iterator ? _.map(array, iterator) : array; // 用于記錄處理結(jié)果的臨時(shí)數(shù)組 var results = []; // 如果數(shù)組中只有2個(gè)值, 則不需要使用include方法進(jìn)行比較, 將isSorted設(shè)置為true能提高運(yùn)行效率 if(array.length < 3) isSorted = true; // 使用reduce方法迭代并累加處理結(jié)果 // initial變量是需要進(jìn)行比較的基準(zhǔn)數(shù)據(jù), 它可能是原始數(shù)組, 也可能是處理器的結(jié)果集合(如果設(shè)置過(guò)iterator) _.reduce(initial, function(memo, value, index) { // 如果isSorted參數(shù)為true, 則直接使用===比較記錄中的最后一個(gè)數(shù)據(jù) // 如果isSorted參數(shù)為false, 則使用include方法與集合中的每一個(gè)數(shù)據(jù)進(jìn)行對(duì)比 if( isSorted ? _.last(memo) !== value || !memo.length : !_.include(memo, value)) { // memo記錄了已經(jīng)比較過(guò)的無(wú)重復(fù)數(shù)據(jù) // 根據(jù)iterator參數(shù)的狀態(tài), memo中記錄的數(shù)據(jù)可能是原始數(shù)據(jù), 也可能是處理器處理后的數(shù)據(jù) memo.push(value); // 處理結(jié)果數(shù)組中保存的始終為原始數(shù)組中的數(shù)據(jù) results.push(array[index]); } return memo; }, []); // 返回處理結(jié)果, 它只包含數(shù)組中無(wú)重復(fù)的數(shù)據(jù) return results; };
這個(gè)函數(shù)用于對(duì)數(shù)組中的數(shù)據(jù)進(jìn)行去重(使用===進(jìn)行比較),當(dāng)isSorted參數(shù)不為false時(shí), 將依次對(duì)數(shù)組中的元素調(diào)用include方法, 檢查相同元素是否已經(jīng)被添加到返回值(數(shù)組)中,如果調(diào)用之前確保數(shù)組中數(shù)據(jù)按順序排列, 則可以將isSorted設(shè)為true, 它將通過(guò)與最后一個(gè)元素進(jìn)行對(duì)比來(lái)排除相同值, 使用isSorted效率會(huì)高于默認(rèn)的include方式,uniq方法默認(rèn)將以數(shù)組中的數(shù)據(jù)進(jìn)行對(duì)比, 如果聲明iterator處理器, 則會(huì)根據(jù)處理器創(chuàng)建一個(gè)對(duì)比數(shù)組, 比較時(shí)以該數(shù)組中的數(shù)據(jù)為準(zhǔn), 但最終返回的唯一數(shù)據(jù)仍然是原始數(shù)組
_.union_.union = function() { // union對(duì)參數(shù)中的多個(gè)數(shù)組進(jìn)行淺層合并為一個(gè)數(shù)組對(duì)象傳遞給uniq方法進(jìn)行處理 return _.uniq(_.flatten(arguments, true)); };
這個(gè)函數(shù)與uniq作用一致, 不同之處在于union允許在參數(shù)中傳入多個(gè)數(shù)組
_.intersection_.intersection = _.intersect = function(array) { // rest變量記錄需要進(jìn)行比較的其它數(shù)組對(duì)象 var rest = slice.call(arguments, 1); // 使用uniq方法去除當(dāng)前數(shù)組中的重復(fù)數(shù)據(jù), 避免重復(fù)計(jì)算 // 對(duì)當(dāng)前數(shù)組的數(shù)據(jù)通過(guò)處理器進(jìn)行過(guò)濾, 并返回符合條件(比較相同元素)的數(shù)據(jù) return _.filter(_.uniq(array), function(item) { // 使用every方法驗(yàn)證每一個(gè)數(shù)組中都包含了需要對(duì)比的數(shù)據(jù) // 如果所有數(shù)組中均包含對(duì)比數(shù)據(jù), 則全部返回true, 如果任意一個(gè)數(shù)組沒(méi)有包含該元素, 則返回false return _.every(rest, function(other) { // other參數(shù)存儲(chǔ)了每一個(gè)需要進(jìn)行對(duì)比的數(shù)組 // item存儲(chǔ)了當(dāng)前數(shù)組中需要進(jìn)行對(duì)比的數(shù)據(jù) // 使用indexOf方法搜索數(shù)組中是否存在該元素(可參考indexOf方法注釋) return _.indexOf(other, item) >= 0; }); }); };
這個(gè)函數(shù)用于獲取當(dāng)前數(shù)組與其它一個(gè)或多個(gè)數(shù)組的交集元素,從第二個(gè)參數(shù)開始為需要進(jìn)行比較的一個(gè)或多個(gè)數(shù)組
_.difference_.difference = function(array) { // 對(duì)第2個(gè)參數(shù)開始的所有參數(shù), 作為一個(gè)數(shù)組進(jìn)行合并(僅合并第一層, 而并非深層合并) // rest變量存儲(chǔ)驗(yàn)證數(shù)據(jù), 在本方法中用于與原數(shù)據(jù)對(duì)比 var rest = _.flatten(slice.call(arguments, 1), true); // 對(duì)合并后的數(shù)組數(shù)據(jù)進(jìn)行過(guò)濾, 過(guò)濾條件是當(dāng)前數(shù)組中不包含參數(shù)指定的驗(yàn)證數(shù)據(jù)的內(nèi)容 // 將符合過(guò)濾條件的數(shù)據(jù)組合為一個(gè)新的數(shù)組并返回 return _.filter(array, function(value) { return !_.include(rest, value); }); };
這個(gè)函數(shù)會(huì)篩選并返回當(dāng)前數(shù)組中與指定數(shù)據(jù)不相等的差異數(shù)據(jù),一般用于刪除數(shù)組中指定的數(shù)據(jù), 并得到刪除后的新數(shù)組
小結(jié)今天一共介紹了21個(gè)函數(shù)的具體實(shí)現(xiàn),我都寫累了,大家可能也看累了吧,我覺(jué)得寫太多也不利于大家消化這些知識(shí),今天就到這兒吧。thx for reading, hope u enjoy
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.specialneedsforspecialkids.com/yun/78154.html
摘要:本文同步自我得博客我在這個(gè)系列的第一篇文章說(shuō)過(guò),我學(xué)是為了在學(xué)的時(shí)候少一些阻礙,從第一篇的寫作時(shí)間到今天,大概也有個(gè)十幾二十天,感覺(jué)拖得有點(diǎn)久,所以今天將會(huì)是源碼解析系列的最后一篇文章,我會(huì)在這篇文章中介紹剩下的所有函數(shù)。 本文同步自我得博客:http://www.joeray61.com 我在這個(gè)系列的第一篇文章說(shuō)過(guò),我學(xué)underscore是為了在學(xué)backbone的時(shí)候少一些阻礙...
摘要:本文同步自我得博客最近準(zhǔn)備折騰一下,在事先了解了之后,我知道了對(duì)這個(gè)庫(kù)有著強(qiáng)依賴,正好之前也沒(méi)使用過(guò),于是我就想先把徹底了解一下,這樣之后折騰的時(shí)候也少一點(diǎn)阻礙。 本文同步自我得博客:http://www.joeray61.com 最近準(zhǔn)備折騰一下backbone.js,在事先了解了backbone之后,我知道了backbone對(duì)underscore這個(gè)庫(kù)有著強(qiáng)依賴,正好undersc...
摘要:本文同步自我得博客最近十幾天都在忙畢業(yè)論文的事,所以上一次為大家介紹完這個(gè)框架的結(jié)構(gòu)或者說(shuō)是這個(gè)框架的設(shè)計(jì)思路之后就一直沒(méi)動(dòng)靜了,今天我又滿血復(fù)活了,讓我們繼續(xù)來(lái)探索的源碼奧秘吧。 本文同步自我得博客:http://www.joeray61.com 最近十幾天都在忙畢業(yè)論文的事,所以上一次為大家介紹完underscore這個(gè)框架的結(jié)構(gòu)(或者說(shuō)是這個(gè)框架的設(shè)計(jì)思路)之后就一直沒(méi)動(dòng)靜了,今...
摘要:總想找個(gè)機(jī)會(huì)夯實(shí)一下自己的基礎(chǔ),正好最近略有清閑,看視頻讀書擼代碼我選擇了第三者怎么感覺(jué)有點(diǎn)別扭,看視頻的話效率不高適合入門,看書的話一本你不知道的推薦給大家,選擇繼續(xù)看書的話還是算了吧,畢竟讀萬(wàn)卷書不如行萬(wàn)里路是吧。 總想找個(gè)機(jī)會(huì)夯實(shí)一下自己的JS基礎(chǔ),正好最近略有清閑,看視頻?讀書?擼代碼?我選擇了第三者(怎么感覺(jué)有點(diǎn)別扭),看視頻的話效率不高適合入門,看書的話,一本《你不知道的J...
摘要:而數(shù)組元素去重是基于運(yùn)算符的。而如果有迭代函數(shù),則計(jì)算傳入迭代函數(shù)后的值,對(duì)值去重,調(diào)用方法,而該方法的核心就是調(diào)用方法,和我們上面說(shuō)的方法一異曲同工。 Why underscore (覺(jué)得這部分眼熟的可以直接跳到下一段了...) 最近開始看 underscore.js 源碼,并將 underscore.js 源碼解讀 放在了我的 2016 計(jì)劃中。 閱讀一些著名框架類庫(kù)的源碼,就好像...
閱讀 3258·2021-09-22 15:58
閱讀 1722·2019-08-30 14:17
閱讀 1726·2019-08-28 18:05
閱讀 1511·2019-08-26 13:33
閱讀 689·2019-08-26 12:20
閱讀 614·2019-08-26 12:18
閱讀 3195·2019-08-26 11:59
閱讀 1411·2019-08-26 10:36