2015秋前端開發(fā)課件-深入underscore

2-深入U(xiǎn)nderscore.js

深入基于查詢的JavaScript2015Spring,xi'anUnderscore.jsUnderscore.js是JavaScript庫，擴(kuò)展了常規(guī)JavaScript功能提供了擴(kuò)展給對(duì)象，數(shù)組，選擇器，等在客戶端JavaScript（Web和手機(jī)）和服務(wù)器端JavaScript（Node.js）可用Underscore.js功能Underscore擴(kuò)展功能有：Collections集合each,map,find,filter,where,some,countByArrays數(shù)組first,last,union,uniq,rangeFunctions函數(shù)Bind,delay,defer,once,afterObjects對(duì)象Keys,values,extend,functions,clone模板和鏈?zhǔn)?/p>

擴(kuò)展集合集合Collections集合意味著數(shù)組和對(duì)象所有的Underscore方法都運(yùn)行在數(shù)組和對(duì)象上（關(guān)聯(lián)數(shù)組）集合擴(kuò)展_.each()-集合迭代_.map(),_.pluck()-集合投影_.filter(),_.reject(),_.where()-元素過濾器_.every(),_.some()-對(duì)集合求值_.sortBy(),_.groupBy()-排序并分組

集合：each()_.each()在元素列表上迭代，依照迭代函數(shù)生產(chǎn)出每個(gè)元素像for-in如果支持，委托至原生的forEach函數(shù)

能夠用對(duì)象：

varnumbers=[1,2,3,4,5,6,7,8];_.each(numbers,console.log);_.each(numbers,function(item){console.log(item);}//輸出所有數(shù)字_.each(console,console.log);//輸出所有控制臺(tái)成員varperson=newPerson("張三","李四");_.each(person,console.log);//輸出張三和李四_.each()演示集合：map()_.map()產(chǎn)生了新的元素?cái)?shù)組，當(dāng)值被計(jì)算之后委托至原生map映射，如果支持也可使用對(duì)象varnumbers=[0,1,2,3,4,5,6,7,8];varnumberNames=["zero","one","two","three",…]functionnumbersToNames(item){returnnumberNames[item];}_.map(numbers,numbersToNames);//打印數(shù)字名_.map(console,function(item){returnitem.toString();});_.map()演示集合：filter()和reject()過濾和排斥，返回原集合的子集，基于布爾表達(dá)式過濾返回匹配條件的所有項(xiàng)排斥返回不滿足條件的所有項(xiàng)varnumbers=[0,1,2,3,4,5,6,7,8];functionisEven(number){returnnumber%2===0;}vareven=_.filter(numbers,isEven);varodd=_.reject(numbers,isEven);_.filter()和_.reject()演示集合：where()_.where()基于屬性值來過濾集合返回原集合的子集varpeople=[{name:"張三",age:21}, {name:"李四",age:11}, {name:"王五",age:14}, {name:"趙六",age:11};varelevenYearsOld=_.where(people,{age:11});//返回李四和趙六_.where()演示集合：every()和some()_.every()如果每個(gè)元素都滿足布爾表達(dá)式，返回true_.some()如果有某個(gè)元素滿足布爾表達(dá)式，返回true如果沒有元素滿足條件，返回falsevarnumbers=[1,2,3,4,5,6,7,8,9,10];varanyEven=_.any(numbers,function(el){returnel%2==0;});//anyEven=truevarallEven=_.all(numbers,function(el){returnel%2==0;});//allEven=false;_.every()和_.some()演示集合：pluck()_.pluck()返回集合的投影選擇所有元素，但只返回其中部分_.map()的簡(jiǎn)化版本varpeople=[{name:'張三',age:40},{name:'李四',age:50},{name:'王五',age:60}];_.pluck(people,'name');//=>["張三","李四","王五"]_.pluck()演示集合：sortBy()和groupBy()_.sortBy()對(duì)集合的元素排序非常像原生的排序函數(shù)通過屬性排序通過迭代函數(shù)排序

_.groupBy()對(duì)集合的元素分組通過屬性分組通過迭代函數(shù)分組

varpeople=[…];people=_.sortBy(people,'name');_.groupBy([1.3,2.1,2.4],function(num){returnMath.floor(num);});//=>{1:[1.3],2:[2.1,2.4]}_.sortBy()和_.groupBy()演示數(shù)組擴(kuò)展數(shù)組擴(kuò)展數(shù)組擴(kuò)展只運(yùn)行在數(shù)組對(duì)象上并沒有運(yùn)行于關(guān)聯(lián)數(shù)組和對(duì)象上數(shù)組擴(kuò)展：_.first()和_.initial()-選擇第一項(xiàng)_.last()和_.rest()-選擇最后一項(xiàng)pact()-刪除所有false值_.union()和_.intersect()-聯(lián)合或相交兩個(gè)或多個(gè)數(shù)組數(shù)組：first()和initial()_.first()返回?cái)?shù)組的第一個(gè)元素可使用參數(shù)來返回前N個(gè)元素_.initial()返回除了最后一個(gè)元素的所有元素可使用參數(shù)返回除最后N個(gè)元素外所有元素varnumbers=[1,2,3,4,5];varfirst=_.first(numbers);//1VarfirstTwo=_.first(numbers,2);//[1,2]varnumbers=[1,2,3,4,5];varinitial=_.initial(numbers);

//[1,2,3,4]varinitialTwo=_.initial(numbers,2);

//[1,2,3]_.first()和_.initial()演示數(shù)組：last()和rest()_.last()返回?cái)?shù)組最后元素可用參數(shù)返回最后N個(gè)元素_.rest()返回除了第一個(gè)之外的所有元素可用參數(shù)返回除最初N個(gè)元素之外的所有元素varnumbers=[1,2,3,4,5];varfirst=_.last(numbers);//5VarfirstTwo=_.last(numbers,2);//[4,5]varnumbers=[1,2,3,4,5];varinitial=_.rest(numbers);

//[2,3,4,5]varinitialTwo=_.rest(numbers,2);

//[3,4,5]_.last()和_.rest()演示函數(shù)擴(kuò)展函數(shù)擴(kuò)展函數(shù)擴(kuò)展提供了額外的功能給常規(guī)函數(shù)函數(shù)擴(kuò)展：_.memoize(func)記住函數(shù)的調(diào)用如果函數(shù)用同樣的參數(shù)再次調(diào)用，記住的結(jié)果將返回pose(func1,func2,func3)返回函數(shù)的組合列表同func1(func2(func3()));

函數(shù)擴(kuò)展演示對(duì)象擴(kuò)展對(duì)象擴(kuò)展對(duì)象擴(kuò)展提供一些額外的功能到常規(guī)對(duì)象上對(duì)象擴(kuò)展：_.keys(obj)–列出對(duì)象的所有鍵_.values(obj)–列出對(duì)象的所有值_.invert(obj)–插入鍵和值_.extend(obj,properties)–執(zhí)行原型的繼承對(duì)象擴(kuò)展演示提問環(huán)節(jié)練習(xí)寫一個(gè)方法，從給定的學(xué)生數(shù)據(jù)中找到所有按字母表順序姓在名之前的學(xué)生。以全名的倒序打印學(xué)生，使用Underscore