2015秋前端开发课件-深入underscore

2-深入Underscore.js

深入基于查询的JavaScript2015Spring,xi'anUnderscore.jsUnderscore.js是JavaScript库，扩展了常规JavaScript功能提供了扩展给对象，数组，选择器，等在客户端JavaScript（Web和手机）和服务器端JavaScript（Node.js）可用Underscore.js功能Underscore扩展功能有：Collections集合each,map,find,filter,where,some,countByArrays数组first,last,union,uniq,rangeFunctions函数Bind,delay,defer,once,afterObjects对象Keys,values,extend,functions,clone模板和链式

扩展集合集合Collections集合意味着数组和对象所有的Underscore方法都运行在数组和对象上（关联数组）集合扩展_.each()-集合迭代_.map(),_.pluck()-集合投影_.filter(),_.reject(),_.where()-元素过滤器_.every(),_.some()-对集合求值_.sortBy(),_.groupBy()-排序并分组

集合：each()_.each()在元素列表上迭代，依照迭代函数生产出每个元素像for-in如果支持，委托至原生的forEach函数

能够用对象：

varnumbers=[1,2,3,4,5,6,7,8];_.each(numbers,console.log);_.each(numbers,function(item){console.log(item);}//输出所有数字_.each(console,console.log);//输出所有控制台成员varperson=newPerson("张三","李四");_.each(person,console.log);//输出张三和李四_.each()演示集合：map()_.map()产生了新的元素数组，当值被计算之后委托至原生map映射，如果支持也可使用对象varnumbers=[0,1,2,3,4,5,6,7,8];varnumberNames=["zero","one","two","three",…]functionnumbersToNames(item){returnnumberNames[item];}_.map(numbers,numbersToNames);//打印数字名_.map(console,function(item){returnitem.toString();});_.map()演示集合：filter()和reject()过滤和排斥，返回原集合的子集，基于布尔表达式过滤返回匹配条件的所有项排斥返回不满足条件的所有项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()如果每个元素都满足布尔表达式，返回true_.some()如果有某个元素满足布尔表达式，返回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()的简化版本varpeople=[{name:'张三',age:40},{name:'李四',age:50},{name:'王五',age:60}];_.pluck(people,'name');//=>["张三","李四","王五"]_.pluck()演示集合：sortBy()和groupBy()_.sortBy()对集合的元素排序非常像原生的排序函数通过属性排序通过迭代函数排序

_.groupBy()对集合的元素分组通过属性分组通过迭代函数分组

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()演示数组扩展数组扩展数组扩展只运行在数组对象上并没有运行于关联数组和对象上数组扩展：_.first()和_.initial()-选择第一项_.last()和_.rest()-选择最后一项pact()-删除所有false值_.union()和_.intersect()-联合或相交两个或多个数组数组：first()和initial()_.first()返回数组的第一个元素可使用参数来返回前N个元素_.initial()返回除了最后一个元素的所有元素可使用参数返回除最后N个元素外所有元素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()演示数组：last()和rest()_.last()返回数组最后元素可用参数返回最后N个元素_.rest()返回除了第一个之外的所有元素可用参数返回除最初N个元素之外的所有元素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()演示函数扩展函数扩展函数扩展提供了额外的功能给常规函数函数扩展：_.memoize(func)记住函数的调用如果函数用同样的参数再次调用，记住的结果将返回pose(func1,func2,func3)返回函数的组合列表同func1(func2(func3()));

函数扩展演示对象扩展对象扩展对象扩展提供一些额外的功能到常规对象上对象扩展：_.keys(obj)–列出对象的所有键_.values(obj)–列出对象的所有值_.invert(obj)–插入键和值_.extend(obj,properties)–执行原型的继承对象扩展演示提问环节练习写一个方法，从给定的学生数据中找到所有按字母表顺序姓在名之前的学生。以全名的倒序打印学生，使用Underscore