2019年10月7日 星期一

JavaScript 的工具庫(Underscore.Js)

Underscore 是一個 JavaScript 的工具庫,它提供了一整套函數式編程的實用功能,但是沒有擴展任何 JavaScript 內置對象。它彌補了 jQuery 沒有實現的功能,同時又是 Backbone 必不可少的部分。

Underscore提供了100多個函數,包括常用的:map、filter、invoke —當然還有更多專業的輔助函數,如:函數綁定、JavaScript模板功能、創建快速索引、強類型相等測試等等。

為了你能仔細研讀,這裡包含了一個完整的測試套件

你還可以通讀帶有註釋的源碼


下載(點擊右鍵“另存為”)
開發版本(1.7.0) 46kb,未壓縮,包含大量註釋
生產環境版本(1.7.0) 5.2kb,去除註釋並壓縮  ( Source Map )

each _.each(list, iteratee, [context]) 別名:forEach
遍歷list中的所有元素,按順序用遍歷輸出每個元素。如果傳遞了context參數,則把iteratee綁定到context對像上。每次調用iteratee都會傳遞三個參數:(element, index, list)如果list是個JavaScript對象,iteratee的參數是(value, key, list) )。返回list以方便鍊式調用。(注:如果存在原生的forEach方法,Underscore就使用它代替。)
_.each([1、2、3],警報);
=>依次提醒每個數字...
_.each({one:1,two:2,3:3:3,alert);
=>依次提醒每個數字值...
注意:集合函數能在數組,對象,和類數組對象,比如arguments , NodeList 和類似的數據類型上正常工作。但是它通過鴨子類型工作,所以要避免傳遞一個不固定length屬性的對象(注:對像或數組的長度(length)屬性要固定的)。每個循環不能被破壞-打破,使用_.find代替,這也是很好的注意。
map _.map(list, iteratee, [context]) 別名:collect
通過變換函數(iteratee迭代器)把list中的每個值映射到一個新的數組中(注:產生一個新的數組)。如果存在原生的map方法,就用原生map方法來代替。如果list是個JavaScript對象,iteratee的參數是(value, key, list)
_.map([1,2,3],功能(NUM){返回NUM * 3;});
=> [3,6,9]
_.map({one:1,two:2,3 :: 3},function(num,key){return num * 3;});
=> [3,6,9]
reduce _.reduce(list, iteratee, [memo], [context]) Aliases: inject, foldl
別名為injectfoldl , reduce方法把list中元素歸結為一個單獨的數值。Memo是reduce函數的初始值,reduce的每一步都需要由iteratee返回。這個迭代傳遞4個參數:memo , value和迭代的index(或者key)和最後一個引用的整個list
如果沒有memo傳遞給reduce的初始調用,iteratee不會被列表中的第一個元素調用。第一個元素將取代傳遞給列表中下一個元素調用iterateememo參數,
var sum = _.reduce([1,2,3],function(memo,num){return memo + num;},0);
=> 6
reduceRight _.reduceRight(list, iteratee, memo, [context]) 別名: foldr
reducRight是從右側開始組合的元素的reduce函數,如果存在JavaScript 1.8版本的reduceRight,則用其代替。Foldr在javascript中不像其它有懶計算的語言那麼有用(注:lazy evaluation:一種求值策略,只有當表達式的值真正需要時才對錶達式進行計算)。
var list = [[0,1],[2,3],[4,5]];
var flat = _.reduceRight(list,function(a,b){return a.concat(b);},[]);
=> [4、5、2、3、0、1]
find _.find(list, predicate, [context]) 別名:detect
list中逐項查找,返回第一個通過predicate迭代函數真值檢測的元素值,如果沒有值傳遞給測試迭代器將返回undefined如果找到匹配的元素,函數將立即返回,不會遍歷整個list。
var even = _.find([1,2,3,4,5,6],function(num){return num%2 == 0;});
=> 2
filter _.filter(list, predicate, [context]) 別名:select
遍歷list中的每個值,返回包含所有通過predicate真值檢測的元素值。(注:如果存在原生filter方法,則用原生的filter方法。)
var evens = _.filter([1,2,3,4,5,6],function(num){return num%2 == 0;});
=> [2,4,6]
where_.where(list, properties)
遍歷list中的每一個值,返回一個數組,這個數組包含包含properties所列出的屬性的所有的鍵-值對。
_.where(listOfPlays,{作者:“莎士比亞”,年份:1611});
=> [{title:“ Cymbeline”,作者:“ Shakespeare”,年份:1611},
    {title:“ The Tempest”,作者:“ Shakespeare”,年份:1611}]
findWhere_.findWhere(list, properties)
遍歷list中的每一個值,返回匹配properties所列出的屬性的所有的鍵-值對的第一個值。
如果沒有找到匹配的屬性,或者list是空的,那麼將返回undefined
_.findWhere(publicServicePulitzers,{newsroom:“紐約時報”}});
=> {年份:1918年,新聞編輯室:《紐約時報》,
  原因:“由於其在公開發表大量官方報告方面的公共服務,
  歐洲政治家有關進展和進展的文件和講話
  戰爭的進行。”}
reject_.reject(list, predicate, [context])
返回list中沒有通過predicate真值檢測的元素集合,與filter相反。
varodds = _.reject([1、2、3、4、5、6],function(num){return num%2 == 0;});
=> [1、3、5]
every _.every(list, [predicate], [context]) 別名:all
如果list中的所有元素都通過predicate的真值檢測就返回true(注:如果存在原生的every方法,就使用原生的every。)
_.every([true,1,null,'yes'],_.identity);
=>錯誤
some _.some(list, [predicate], [context]) 別名:any
如果list中有任何一個元素通過predicate的真值檢測就返回true一旦找到了符合條件的元素,就直接中斷對list的遍歷. (注:如果存在原生的some方法,就使用原生的some。)
_.some([null,0,'yes',false]);
=>是的
contains _.contains(list, value) 別名:include
如果list包含指定的value則返回true(注:使用===檢測)。如果list是數組,內部使用indexOf判斷。
_.contains([1、2、3],3);
=>是的
invoke_.invoke(list, methodName, *arguments)
list的每個元素上執行methodName方法。任何傳遞給invoke的額外參數,invoke都會在調用methodName方法的時候傳遞給它。
_.invoke([[5,1,7],[3,2,1]],'排序');
=> [[1、5、7],[1、2、3]]
pluck _.pluck(list, propertyName)
pluck也許是map最常使用的用例模型的簡化版本,即萃取對像數組中某屬性值,返回一個數組。
var stooges = [{{name:'moe',age:40},{name:'larry',age:50},{name:'curly',age:60}];
_.pluck(stooges,'name');
=> [“ moe”,“ larry”,“ curly”]
max_.max(list, [iteratee], [context])
返回list中的最大值。如果傳遞iteratee參數,iteratee將作為list中每個值的排序依據。如果list為空,將返回-Infinity,所以你可能需要事先用isEmpty檢查list
var stooges = [{{name:'moe',age:40},{name:'larry',age:50},{name:'curly',age:60}];
_.max(stooges,function(stooge){return stooge.age;});
=> {名稱:“捲曲”,年齡:60};
min_.min(list, [iteratee], [context])
返回list中的最小值。如果傳遞iteratee參數,iteratee將作為list中每個值的排序依據。如果list為空,將返回-Infinity,所以你可能需要事先用isEmpty檢查list
變數= [10、5、100、2、1000];
_.min(數字);
=> 2
sortBy_.sortBy(list, iteratee, [context])
返回一個排序後的list拷貝副本。如果傳遞iteratee參數,iteratee將作為list中每個值的排序依據。迭代器也可以是字符串的屬性的名稱進行排序的(比如length )。
_.sortBy([1,2,3,4,5,6],function(num){return Math.sin(num);});
=> [5、4、6、3、1、2]
groupBy_.groupBy(list, iteratee, [context])
把一個集合分組為多個集合,通過iterator返回的結果進行分組.如果iterator 是一個字符串而不是函數,那麼將使用iterator作為各元素的屬性名來對比進行分組.
_.groupBy([1.3,2.1,2.4],function(num){return Math.floor(num);});
=> {1:[1.3],2:[2.1,2.4]}

_.groupBy(['一個','兩個','三個'],'長度');
=> {3:[“一個”,“兩個”],5:[“三個”]}
indexBy_.indexBy(list, iteratee, [context])
給定一個list,和一個用來返回一個在列表中的每個元素鍵的iterator函數(或屬性名),返回一個每一項索引的對象。groupBy非常像,但是當你知道你的鍵是唯一的時候可以使用indexBy
var stooges = [{{name:'moe',age:40},{name:'larry',age:50},{name:'curly',age:60}];
_.indexBy(stooges,'age');
=> {
  “ 40”:{名稱:“ moe”,年齡:40},
  “ 50”:{name:“ larry”,年齡:50},
  “ 60”:{名稱:“ curly”,年齡:60}
}
countBy_.countBy(list, iteratee, [context])
排序一個列表組成一個組,並且返回各組中的對象的數量的計數。類似groupBy,但是不是返回列表的值,而是返回在該組中值的數目。
_.countBy([1,2,3,4,5],function(num){
  返回num%2 == 0嗎?'even':'odd';
});
=> {賠率:3,偶數:2}
shuffle_.shuffle(list)
返回一個隨機亂序的list副本,使用 Fisher-Yates shuffle來進行隨機亂序.
_.shuffle([1、2、3、4、5、6]);
=> [4、1、6、3、5、2]
sample_.sample(list, [n])
list中產生一個隨機樣本。傳遞一個數字表示從list中返回n個隨機元素。否則將返回一個單一的隨機項。
_.sample([1、2、3、4、5、6]);
=> 4

_.sample([1、2、3、4、5、6],3);
=> [1、6、2]
toArray_.toArray(list)
list (任何可以迭代的對象)轉換成一個數組,在轉換arguments對象時非常有用。
(function(){return _.toArray(arguments).slice(1);})(1、2、3、4);
=> [2、3、4]
size_.size(list)
返回list的長度。
_.size({一個:1,兩個:2,三個:3});
=> 3
partition_.partition(array, predicate)
拆分一個數組(array)為兩個數組:第一個數組其元素都滿足predicate迭代函數,而第二個的所有元素均不能滿足predicate迭代函數。
_.partition([0,1,2,3,4,5],木屐);
=> [[1、3、5],[0、2、4]]

數組函數(Array Functions)

注:arguments(參數)對象將在所有數組函數中工作。然而, Underscore函數的設計並不只是針對稀疏("sparse" )數組的.
first _.first(array, [n]) 別名:head , take
返回array(數組)的第一個元素。傳遞n參數將返回數組中從第一個元素開始的n個元素(注:返回數組中前n個元素.)。
_.first([5,4,3,2,1]);
=> 5
initial_.initial(array, [n])
返回數組中除了最後一個元素外的其他全部元素。在arguments對像上特別有用。傳遞n參數將從結果中排除從最後一個開始的n個元素(注:排除數組後面的n個元素)。
_.initial([5,4,3,2,1]);
=> [5、4、3、2]
last_.last(array, [n])
返回array(數組)的最後一個元素。傳遞n參數將返回數組中從最後一個元素開始的n個元素(注:返回數組裡的後面的n個元素)。
_.last([5,4,3,2,1]);
=> 1
rest _.rest(array, [index]) 別名:tail, drop
返回數組中除了第一個元素外的其他全部元素。傳遞index參數將返回從index開始的剩餘所有元素。(感謝@德德德德擼指出錯誤)
_.rest([5,4,3,2,1]);
=> [4、3、2、1]
compact_.compact(array)
返回一個除去所有false值的array副本。在javascript中, false , null , 0 , "" , undefinedNaN都是false值.
_.compact([0,1,false,2,'',3]);
=> [1、2、3]
flatten_.flatten(array, [shallow])
將一個嵌套多層的數組array(數組) (嵌套可以是任何層數)轉換為只有一層的數組。如果你傳遞shallow參數,數組將只減少一維的嵌套。
_.flatten([1,[2],[3,[[4]]]]);
=> [1、2、3、4];

_.flatten([1,[2],[3,[[4]]],true);
=> [1、2、3,[[4]]];
without_.without(array, *values)
返回一個刪除所有values值後的array副本。(注:使用===表達式做相等測試。)
_.without([1、2、1、0、3、1、4],0、1);
=> [2、3、4]
union_.union(*arrays)
返回傳入的arrays(數組)並集:按順序返回,返回數組的元素是唯一的,可以傳入一個或多個arrays(數組)
_.union([1、2、3],[101、2、1、10],[2、1]);
=> [1、2、3、101、10]
intersection_.intersection(*arrays)
返回傳入arrays(數組)交集。結果中的每個值是存在於傳入的每個arrays(數組)裡。
_.intersection([1、2、3],[101、2、1、10],[2、1]);
=> [1、2]
difference_.difference(array, *others)
類似於without,但返回的值來自array參數數組,並且不存在於other數組.
_.difference([1、2、3、4、5],[5、2、10]);
=> [1、3、4]
uniq _.uniq(array, [isSorted], [iteratee]) 別名:unique
返回array去重後的副本,使用===做相等測試.如果您確定 array已經排序,那麼給isSorted參數傳遞true值,此函數將運行的更快的算法.如果要處理對像元素,傳參iterator來獲取要對比的屬性.
_.uniq([1、2、1、3、1、4]);
=> [1、2、3、4]
zip_.zip(*arrays)
將每個arrays中相應位置的值合併在一起。在合併分開保存的數據時很有用.如果你用來處理矩陣嵌套數組時, _.zip.apply可以做類似的效果。
_.zip(['moe','larry','curly'],[30,40,50],[true,false,false]);
=> [[“ moe”,30,true],[“ larry”,40,false],[“ curly”,50,false]]

_.zip.apply(_,arrayOfRowsOfData);
=> arrayOfColumnsOfData
object_.object(list, [values])
將數組轉換為對象。傳遞任何一個單獨[key, value]對的列表,或者一個鍵的列表和一個值得列表。如果存在重複鍵,最後一個值將被返回。
_.object(['moe','larry','curly'],[30,40,50]);
=> {moe:30,larry:40,curly:50}

_.object([['moe',30],['larry',40],['curly',50]]);
=> {moe:30,larry:40,curly:50}
indexOf_.indexOf(array, value, [isSorted])
返回value在該array中的索引值,如果value不存在array中就返回-1使用原生的indexOf函數,除非它失效。如果您正在使用一個大數組,你知道數組已經排序,傳遞trueisSorted將更快的用二進制搜索..,或者,傳遞一個數字作為第三個參數,為了在給定的索引的數組中尋找第一個匹配值。
_.indexOf([1、2、3],2);
=> 1
lastIndexOf_.lastIndexOf(array, value, [fromIndex])
返回value在該array中的從最後開始的索引值,如果value不存在array中就返回-1如果支持原生的lastIndexOf,將使用原生的lastIndexOf函數。傳遞fromIndex將從你給定的索性值開始搜索。
_.lastIndexOf([1、2、3、1、2、3],2);
=> 4
sortedIndex_.sortedIndex(list, value, [iteratee], [context])
使用二分查找確定valuelist中的位置序號,value按此序號插入能保持list原有的排序。如果提供iterator函數,iterator將作為list排序的依據,包括你傳遞的value。 iterator也可以是字符串的屬性名用來排序(比如length )。
_.sortedIndex([10,20,30,40,50],35);
=> 3

var stooges = [{{name:'moe',age:40},{name:'curly',age:60}]];
_.sortedIndex(stooges,{name:'larry',age:50},'age');
=> 1
range_.range([start], stop, [step])
一個用來創建整數靈活編號的列表的函數,便於eachmap循環。如果省略start則默認為0step默認為1 .返回一個從startstop的整數的列表,用step來增加(或減少)獨占。值得注意的是,如果stop值在start前面(也就是stop值小於start值),那麼值域會被認為是零長度,而不是負增長。-如果你要一個負數的值域,請使用負數step .
_.range(10);
=> [0、1、2、3、4、5、6、7、8、9]
_.range(1,11);
=> [1、2、3、4、5、6、7、8、9、10]
_.range(0,30,5);
=> [0、5、10、15、20、25]
_.range(0,-10,-1);
=> [0,-1,-2,-3,-4,-5,-6,-7,-8,-9]
_.range(0);
=> []

與函數有關的函數(Function (uh, ahem) Functions)

bind_.bind(function, object, *arguments)
綁定函數function到對象object上,也就是無論何時調用函數,函數里的this都指向這個object .任意可選參數arguments可以傳遞給函數function ,可以填充函數所需要的參數,這也被稱為partial application對於沒有結合上下文的partial application綁定,請使用partial
(注:partial application翻譯成“部分應用”或者“偏函數應用”。partial application可以被描述為一個函數,它接受一定數目的參數,綁定值到一個或多個這些參數,並返回一個新的函數,這個返回函數只接受剩餘未綁定值的參數。參見:http://en.wikipedia.org/wiki/Partial_application。感謝@一任風月憶秋年的建議)。
var func = function(greeting){return greeting +':'+ this.name};
func = _.bind(func,{name:'moe'},'hi');
func();
=>'嗨:萌'
bindAll_.bindAll(object, *methodNames)
methodNames參數指定的一些方法綁定到object上,這些方法就會在對象的上下文環境中執行。綁定函數用作事件處理函數時非常便利,否則函數被調用時this一點用也沒有。methodNames參數是必須的。
var buttonView = {
  標籤:“下劃線”,
  onClick:function(){alert('clicked:'+ this.label); },
  onHover:function(){console.log('hovering:'+ this.label); }
};
_.bindAll(buttonView,'onClick','onHover');
//單擊按鈕時,this.label將具有正確的值。
jQuery('#underscore_button')。bind('click',buttonView.onClick);
partial_.partial(function, *arguments)
局部應用一個函數填充在任意個數的參數改變其動態this值。bind方法很相近。你可以在你的參數列表中傳遞_來指定一個參數,不應該被預先填充, but left open to supply at call-time. You may pass _ in your list of arguments to specify an argument that should not be pre- filled, but left open to supply at call-time.(翻譯不好,求好的翻譯)
var add = function(a,b){return a + b; };
add5 = _.partial(add,5);
add5(10);
=> 15
memoize_.memoize(function, [hashFunction])
Memoizes方法可以緩存某函數的計算結果。對於耗時較長的計算是很有幫助的。如果傳遞了 hashFunction參數,就用hashFunction的返回值作為key存儲函數的計算結果。 hashFunction默認使用function的第一個參數作為key。memoized值的緩存可作為返回函數的cache屬性。
var fibonacci = _.memoize(function(n){
  返回n <2?n:斐波那契(n-1)+斐波那契(n-2);
});
delay_.delay(function, wait, *arguments)
類似setTimeout,等待wait毫秒後調用function如果傳遞可選的參數arguments,當函數function執行時,arguments會作為參數傳入。
var log = _.bind(console.log,console);
_.delay(log,1000,'logged Later');
=>'稍後記錄'//一秒鐘後出現。
defer_.defer(function, *arguments)
延遲調用function直到當前調用棧清空為止,類似使用延時為0的setTimeout方法。對於執行開銷大的計算和無阻塞UI線程的HTML渲染時候非常有用。如果傳遞arguments參數,當函數function執行時,arguments會作為參數傳入。
_.defer(function(){alert('deferred');});
//警報運行前從函數返回。
throttle_.throttle(function, wait, [options])
創建並返回一個像節流閥一樣的函數,當重複調用函數的時候,最多每隔wait毫秒調用一次該函數。對於想控制一些觸發頻率較高的事件有幫助。(注:詳見:javascript函數的throttle和debounce
默認情況下,throttle將在你調用的第一時間盡快執行這個function,並且,如果你在wait週期內調用任意次數的函數,都將盡快的被覆蓋。如果你想禁用第一次首先執行的話,傳遞{leading: false},還有如果你想禁用最後一次執行的話,傳遞{trailing: false}
var節流= _.throttle(updatePosition,100);
$(window).scroll(節流);
debounce_.debounce(function, wait, [immediate])
返回function函數的防反跳版本,將延遲函數的執行(真正的執行)在函數最後一次調用時刻的wait毫秒之後.對於必須在一些輸入(多是一些用戶操作)停止到達之後執行的行為有幫助。例如:渲染一個Markdown格式的評論預覽,當窗口停止改變大小之後重新計算佈局,等等.
傳參immediatetruedebounce會在wait時間間隔的開始調用這個函數。(注:並且在waite的時間之內,不會再次調用。)在類似不小心點了提交按鈕兩下而提交了兩次的情況下很有用。(感謝 @ProgramKid的翻譯建議)
var lazyLayout = _.debounce(calculateLayout,300);
$(窗口).resize(lazyLayout);
once_.once(function)
創建一個只能調用一次的函數。重複調用改進的方法也沒有效果,只會返回第一次執行時的結果。作為初始化函數使用時非常有用,不用再設一個boolean值來檢查是否已經初始化完成.
var initialize = _.once(createApplication);
初始化();
初始化();
//應用程序僅創建一次。
after_.after(count, function)
創建一個函數,只有在運行了count次之後才有效果.在處理同組異步請求返回結果時,如果你要確保同組裡所有異步請求完成之後才執行這個函數,這將非常有用。
var renderNotes = _.after(notes.length,render);
_.each(notes,function(note){
  note.asyncSave({success:renderNotes});
});
//保存所有註釋後,renderNotes將運行一次。
before_.before(count, function)
創建一個函數,調用不超過count次。count已經達到時,最後一個函數調用的結果是被記住並返回。
var MonthlyMeeting = _.before(3,askForRaise);
每月例會();
每月例會();
每月例會();
//任何後續調用的結果與第二個調用相同
wrap_.wrap(function, wrapper)
將第一個函數function封裝到函數wrapper裡面,並把函數function作為第一個參數傳給wrapper .這樣可以讓wrapperfunction運行之前和之後執行代碼,調整參數然後附有條件地執行.
var hello = function(name){返回“ hello:” +名稱;};
你好= _.wrap(你好,函數(func){
  返回“ before,” + func(“ moe”)+“,after”;
});
你好();
=>'之前,你好:萌,之後'
negate_.negate(predicate)
返回一個新的predicate函數的否定版本。
var isFalsy = _.negate(Boolean);
_.find([-2,-1,0,1,2],isFalsy);
=> 0
compose_.compose(*functions)
返回函數集functions組合後的複合函數,也就是一個函數執行完之後把返回的結果再作為參數賦給下一個函數來執行.以此類推.在數學裡,把函數f() , g() ,和h()組合起來可以得到復合函數f(g(h()))
var greet = function(name){return“ hi:” + name; };
var exclaim = function(statement){return statement.toUpperCase()+“!”; };
var welcome = _.compose(greet,exclaim);
歡迎('moe');
=>“嗨:教育部!”

對象函數(Object Functions)

keys_.keys(object)
獲取object對象所有的屬性名稱。
_.keys({一個:1,兩個:2,三個:3});
=> [“一個”,“兩個”,“三個”]
values_.values(object)
返回object對象所有的屬性值。
_.values({一個:1,兩個:2,三個:3});
=> [1、2、3]
pairs_.pairs(object)
把一個對象轉變為一個[key, value]形式的數組。
_.pairs({一個:1,兩個:2,三個:3});
=> [[[“一個”,1],[“兩個”,2],[“三個”,3]]
invert_.invert(object)
返回一個object副本,使其鍵(keys)和值(values)對換。對於這個操作,必須確保object裡所有的值都是唯一的且可以序列號成字符串.
_.invert({Moe:“ Moses”,Larry:“ Louis”,Curly:“ Jerome”});
=> {摩西:“萌”,路易:“拉里”,杰羅姆:“彎”}};
functions _.functions(object) 別名:methods
返回一個對象裡所有的方法名,而且是已經排序的—也就是說,對象裡每個方法(屬性值是一個函數)的名稱.
_。職能(_);
=> [“ all”,“ any”,“ bind”,“ bindAll”,“ clone”,“ compact”,“ compose” ...
extend_.extend(destination, *sources)
複製source對像中的所有屬性覆蓋到destination對像上,並且返回destination對象.複製是按順序的,所以後面的對象屬性會把前面的對象屬性覆蓋掉(如果有重複).
_.extend({name:'moe'},{age:50});
=> {名稱:“ moe”,年齡:50}
pick_.pick(object, *keys)
返回一個object副本,只過濾出keys (有效的鍵組成的數組)參數指定的屬性值。或者接受一個判斷函數,指定挑選哪個key。
_.pick({name:'moe',age:50,userid:'moe1'},'name','age');
=> {名稱:“ moe”,年齡:50}
_.pick({name:'moe',age:50,userid:'moe1'},function(value,key,object){
  返回_.isNumber(value);
});
=> {年齡:50}
omit_.omit(object, *keys)
返回一個object副本,只過濾出除去keys (有效的鍵組成的數組)參數指定的屬性值。或者接受一個判斷函數,指定忽略哪個key。
_.omit({name:'moe',age:50,userid:'moe1'},'userid');
=> {名稱:“ moe”,年齡:50}
_.omit({name:'moe',age:50,userid:'moe1'},function(value,key,object){
  返回_.isNumber(value);
});
=> {名稱:'moe',用戶名:'moe1'}
defaults_.defaults(object, *defaults)
defaults對象填充object中的undefined屬性。並且返回這個object一旦這個屬性被填充,再使用defaults方法將不會有任何效果。(感謝@一任風月憶秋年的拍磚)
var iceCream = {flavor:“ chocolate”};
_.defaults(iceCream,{味道:“香草”,灑出:“批次”});
=> {風味:“巧克力”,撒上:“很多”}
clone_.clone(object)
創建一個淺複製(淺拷貝)的克隆object任何嵌套的對像或數組都通過引用拷貝,不會復制。
_.clone({name:'moe'});
=> {name:'moe'};
tap_.tap(object, interceptor)
object作為參數來調用函數interceptor,然後返回object這種方法的主要意圖是作為函數鍊式調用的一環,為了對此對象執行操作並返回對象本身。
_.chain([1,2,3,200])
  .filter(函數(NUM){返回NUM%2 == 0;})
  .tap(警告)
  .MAP(函數(NUM){返回NUM *是否})
  。值();
=> // [2,200](已更改)
=> [4,40000]
has_.has(object, key)
對像是否包含給定的鍵嗎?等同於object.hasOwnProperty(key),但是使用hasOwnProperty函數的一個安全引用,以防意外覆蓋
_.has({a:1,b:2,c:3},“ b”);
=>是的
property_.property(key)
返回一個函數,這個函數返回任何傳入的對象的key 屬性。
var Tired = {name:'tired'};
'moe'=== _.property('name')(moe);
=>是的
matches_.matches(attrs)
返回一個斷言函數,這個函數會給你一個斷言可以用來辨別給定的對像是否匹配attrs指定鍵/值屬性。
var ready = _.matches({selected:true,visible:true});
var readyToGoList = _.filter(list,ready);
isEqual_.isEqual(object, other)
執行兩個對象之間的優化深度比較,確定他們是否應被視為相等。
var moe = {name:'moe',luckyNumbers:[13,27,34]};
var clone = {名稱:“ moe”,luckyNumbers:[13、27、34]};
萌==克隆;
=>錯誤
_.isEqual(moe,clone);
=>是的
isEmpty_.isEmpty(object)
如果object不包含任何值(沒有可枚舉的屬性),返回true對於字符串和類數組(array-like)對象,如果length屬性為0,那麼_.isEmpty檢查返回true
_.isEmpty([1,2,3]);
=>錯誤
_。是空的({});
=>是的
isElement_.isElement(object)
如果object是一個DOM元素,返回true
_.isElement(jQuery('body')[0]);
=>是的
isArray_.isArray(object)
如果object是一個數組,返回true
(function(){return _.isArray(arguments);})();
=>錯誤
_.isArray([1,2,3]);
=>是的
isObject_.isObject(value)
如果object是一個對象,返回true需要注意的是JavaScript數組和函數是對象,字符串和數字不是。
_.isObject({});
=>是的
_.isObject(1);
=>錯誤
isArguments_.isArguments(object)
如果object是一個參數對象,返回true
(function(){return _.isArguments(arguments);})(1、2、3);
=>是的
_.isArguments([1,2,3]);
=>錯誤
isFunction_.isFunction(object)
如果object是一個函數(Function),返回true
_.isFunction(alert);
=>是的
isString_.isString(object)
如果object是一個字符串,返回true
_.isString(“ moe”);
=>是的
isNumber_.isNumber(object)
如果object是一個數值,返回true (包括NaN )。
_.isNumber(8.4 * 5);
=>是的
isFinite_.isFinite(object)
如果object是一個有限的數字,返回true
_.isFinite(-101);
=>是的

_.isFinite(-Infinity);
=>錯誤
isBoolean_.isBoolean(object)
如果object是一個布爾值,返回trueReturns true if object is either true or false .
_.isBoolean(NULL);
=>錯誤
isDate_.isDate(object)
如果object是一個Date類型(日期時間),返回true
_.isDate(new Date());
=>是的
isRegExp_.isRegExp(object)
如果object是一個正則表達式,返回true
_.isRegExp(/累了/);
=>是的
isNaN_.isNaN(object)
如果objectNaN,返回true
注意:這和原生的isNaN函數不一樣,如果變量是undefined,原生的isNaN函數也會返回true
_.isNaN(NaN);
=>是的
isNaN(undefined);
=>是的
_.isNaN(undefined);
=>錯誤
isNull_.isNull(object)
如果object的值是null,返回true
_.isNull(null);
=>是的
_.isNull(undefined);
=>錯誤
isUndefined_.isUndefined(value)
如果valueundefined,返回true
_.isUndefined(window.missingVariable);
=>是的

實用功能(Utility Functions)

noConflict_.noConflict()
放棄Underscore的控制變量"_"。返回Underscore對象的引用。
var下劃線= _.noConflict();
identity_.identity(value)
返回與傳入參數相等的值.相當於數學裡的: f(x) = x
這個函數看似無用,但是在Underscore裡被用作默認的迭代器iterator.
var Tired = {name:'tired'};
moe === _.identity(moe);
=>是的
constant_.constant(value)
創建一個函數,這個函數返回相同的值用來作為_.constant的參數。
var Tired = {name:'tired'};
moe === _.constant(moe)();
=>是的
noop_.noop()
返回undefined,不論傳遞給它的是什麼參數。可以用作默認可選的回調參數。
obj.initialize = _.noop;
times_.times(n, iteratee, [context])
調用給定的迭代函數n次,每一次調用iteratee傳遞index參數。生成一個返回值的數組。
注意:本例使用鍊式語法
_(3).times(function(n){genie.grantWishNumber(n);});
random_.random(min, max)
返回一個minmax之間的隨機整數。如果你只傳遞一個參數,那麼將返回0和這個參數之間的整數。
_.random(0,100);
=> 42
mixin_.mixin(object)
允許用您自己的實用程序函數擴展Underscore。傳遞一個{name: function}定義的哈希添加到Underscore對象,以及面向對象封裝。
_.mixin({
  大寫:function(string){
    返回string.charAt(0).toUpperCase()+ string.substring(1).toLowerCase();
  }
});
_(“ fabio”)。capitalize();
=>“ Fabio”
iteratee_.iteratee(value, [context], [argCount])
一個重要的內部函數用來生成可應用到集合中每個元素的回調,返回想要的結果-無論是等式,任意回調,屬性匹配,或屬性訪問。
通過_.iteratee轉換判斷的Underscore方法的完整列表是 map , find , filter , reject , every , some , max , min , sortBy , groupBy , indexBy , countBy , sortedIndex , partition ,和unique .
var stooges = [{{name:'curly',age:25},{name:'moe',age:21},{name:'larry',age:23}];
_.map(stooges,_.iteratee('age'));
=> [25,21,23];
uniqueId_.uniqueId([prefix])
為需要的客戶端模型或DOM元素生成一個全局唯一的id。如果prefix參數存在, id將附加給它。
_.uniqueId('contact_');
=>'contact_104'
escape_.escape(string)
轉義HTML字符串,替換& , < , > , " , ' ,和/字符。
_.escape('Curly,Larry&Moe');
=>“柯里(Carry)和拉姆(Moe)”
unescape_.unescape(string)
escape相反。轉義HTML字符串,替換& , < , > , " , ` ,和/字符。
_.unescape('Curly,Larry&amp; Moe');
=>“捲曲,拉里&萌”
result_.result(object, property)
如果對象object中的屬性property是函數,則調用它,否則,返回它。
var object = {cheese:'crumpets',stuff:function(){return'unsense'; }};
_.result(object,'cheese');
=>“小塊”
_.result(object,'stuff');
=>“廢話”
now_.now()
一個優化的方式來獲得一個當前時間的整數時間戳。可用於實現定時/動畫功能。
_。現在();
=> 1392066795351
template_.template(templateString, [settings])
將JavaScript模板編譯為可以用於頁面呈現的函數,對於通過JSON數據源生成複雜的HTML並呈現出來的操作非常有用。模板函數可以使用 <%= … %>插入變量,也可以用<% … %>執行任意的JavaScript代碼。如果您希望插入一個值,並讓其進行HTML轉義,請使用<%- … %>當你要給模板函數賦值的時候,可以傳遞一個含有與模闆對應屬性的data對象。如果您要寫一個一次性的,您可以傳對象data 作為第二個參數給模板template來直接呈現,這樣頁面會立即呈現而不是返回一個模板函數.參數settings是一個哈希表包含任何可以覆蓋的設置_.templateSettings .
var created = _.template(“ hello:<%= name%>”);
編譯({name:'moe'});
=>“你好:萌”

var template = _.template(“ <b> <%-value%> </ b>”);
template({value:'<script>'});
=>“ <b>&lt; script&gt; </ b>”
您也可以在JavaScript代碼中使用print .有時候這會比使用<%= ... %>更方便.
var created = _.template(“ <%print('Hello'+ epithet);%>”);
編譯({epithet:“ stooge”});;
=>“你好st”
如果ERB式的分隔符您不喜歡,您可以改變Underscore的模板設置,使用別的符號來嵌入代碼.定義一個interpolate正則表達式來逐字匹配嵌入代碼的語句,如果想插入轉義後的HTML代碼則需要定義一個escape正則表達式來匹配,還有一個evaluate正則表達式來匹配您想要直接一次性執行程序而不需要任何返回值的語句.您可以定義或省略這三個的任意一個.例如,要執行 Mustache.js 類型的模板:
_.templateSettings = {
  插值:/\{\{(.+?)\}\}/g
};

var template = _.template(“ Hello {{name}}!”);
template({name:“ Mustache”});
=>“你好,鬍子!”
默认的, template 通过 with 语句 来取得 data 所有的值. 当然, 您也可以在 variable 设置里指定一个变量名. 这样能显著提升模板的渲染速度.
_.template(“使用'with':<%= data.answer%>”,{variable:'data'})({answer:'no'});
=>“使用'with':no”
預編譯模闆對調試不可重現的錯誤很有幫助.這是因為預編譯的模板可以提供錯誤的代碼行號和堆棧跟踪,有些模板在客戶端(瀏覽器)上是不能通過編譯的在編譯好的模板函數上,有source 屬性可以提供簡單的預編譯功能.
<腳本>
  JST.project = <%= _.template(jstText).source%>;
</ script>

鍊式語法(Chaining)

您可以在面向對像或者函數的風格下使用Underscore, 這取決於您的個人偏好. 以下兩行代碼都可以把一個數組裡的所有數字乘以2.
_.map([1,2,3],function(n){return n * 2;});
_([1、2、3])。map(function(n){return n * 2;});
對一個對象使用chain方法,會把這個對象封裝並讓以後每次方法的調用結束後都返回這個封裝的對象,當您完成了計算,可以使用value函數來取得最終的值.以下是一個同時使用了map/flatten/reduce 的鍊式語法例子,目的是計算一首歌的歌詞裡每一個單詞出現的次數.
var歌詞= [
  {line:1,文字:“我是伐木工人,我還可以”},
  {line:2,文字:“我整夜睡覺,我整天工作”},
  {line:3,單詞:“他是伐木工人,他還好”}},
  {行:4,字詞:“他整夜睡覺,整天工作”}
];

_.chain(歌詞)
  .map(function(line){return line.words.split('');})
  .flatten()
  .reduce(function(counts,word){
    counts [word] =(counts [word] || 0)+ 1;
    返回計數;
  },{})
  。值();

=> {伐木工人:2,所有人:4,晚上:2 ...}
此外, 數組原型方法 也通過代理加入到了鍊式封裝的Underscore對象,所以您可以在鍊式語法中直接使用reversepush方法,然後再接著其他的語句.
chain_.chain(obj)
返回一個封裝的對象.在封裝的對像上調用方法會返回封裝的對象本身,直道value方法調用為止.
var stooges = [{{name:'curly',age:25},{name:'moe',age:21},{name:'larry',age:23}];
var youngest = _.chain(stooges)
  .sortBy(function(stooge){return stooge.age;})
  .map(function(stooge){return stooge.name +'is'+ stooge.age;})
  。第一()
  。值();
=>“ moe是21”
value_(obj).value()
獲取封裝對象的最終值.
_([1、2、3])。value();
=> [1、2、3]





資料來源: https://www.bootcss.com/p/underscore/

沒有留言:

張貼留言