首页 > 代码库 > （2）Underscore.js常用方法

（2）Underscore.js常用方法

2024-08-17 21:35:24   220人阅读

技术分享
目录
1.集合相关方法
       1.1.数组的处理
               map（循环，有返回值），将返回的值依次存入一个新的数组
               each（循环，无返回值）
               reduce，
               shuffle，
        1.2.数组的特征
               every（判断与），   方法判断数组的所有元素是否都满足某个条件。如果都满足则返回true，否则返回false。
               some（判断或），   方法则是只要有一个元素满足，就返回true，否则返回false。
               size，                        返回list的长度。
       1.3.数组的过滤
               filter（查找true），    对集合的每个成员进行某种操作，只返回操作结果为true的成员
               reject（查找false），  只返回操作结果为false的成员。
               find（查找），             返回第一个操作结果为true的成员。如果所有操作结果都为false，则返回undefined
               contains（包含），     如果某个值在数组内，则返回true，否则返回false。
               countBy（分组），     将操作结果相同的成员算作一类，最后返回一个对象，表明每种操作结果对应的成员数量。
2.对象相关方法
       toArray，
       pluck，
3.与函数相关的方法
       3.1.bind          该方法绑定函数运行时的上下文，返回一个新函数。
       3.2.bindall      该方法可以一次将多个方法，绑定在某个对象上面
       3.3.partial       将函数与某个参数绑定，作为一个新函数返回
       3.4.wrap         将一个函数作为参数传入另一个函数，返回前者的一个新版本
       3.5.compose  接受一系列函数作为参数，由后向前依次运行，上一个函数的运行结果，作为后一个函数的运行参数
4.函数运行控制
       4.1.memoize
       4.2.delay
       4.3.defer
       4.4.throttle
       4.5.debounce
       4.6.once
       4.7.after
5.工具方法
       5.1.链式操作
       5.2.template
                5.2.1.templateString
                5.2.2.data



（2）Underscore.js常用方法<link rel="stylesheet" name="wiz_tmp_editor_style" href="http://www.mamicode.com/5db8b7eb-744d-4187-876b-e58e1cacc99d_files/fonts_46.css"><link rel="stylesheet" name="wiz_tmp_editor_style" href="http://www.mamicode.com/5db8b7eb-744d-4187-876b-e58e1cacc99d_files/fonts_21.css"><link rel="stylesheet" name="wiz_tmp_editor_style" href="http://www.mamicode.com/5db8b7eb-744d-4187-876b-e58e1cacc99d_files/fonts_86.css"><link rel="stylesheet" name="wiz_tmp_editor_style" href="http://www.mamicode.com/5db8b7eb-744d-4187-876b-e58e1cacc99d_files/fonts_86.css">
1
集合相关方法
 

数组的处理

map   _.map(list, iteratee, [context]) Alias: collect 
方法对集合的每个成员依次进行某种操作，将返回的值依次存入一个新的数组
  1. / 数组  
  2. var map1 = _.map([1, 2, 3], function(num){ return num * 3; });  
  3. console.log(map1);// [3, 6, 9]  
  4. // 对象  
  5. var map2 =_.map({one : 1, two : 2, three : 3}, function(num, key){ return num * 3; });  
  6. console.log(map2);// [3, 6, 9]  

each _.each(list, iteratee, [context]) Alias: forEach 
方法与map类似，依次对数组所有元素进行某种操作，不返回任何值。
  1. _.each([1, 2, 3], alert);  
  2. _.each({one : 1, two : 2, three : 3}, alert);  

reduce
方法依次对集合的每个成员进行某种操作，然后将操作结果累计在某一个初始值之上，全部操作结束之后，返回累计的值。该方法接受三个参数。
第一个参数是被处理的集合，
第二个参数是对每个成员进行操作的函数，
第三个参数是累计用的变量。
  1. var sum =  _.reduce([1, 2, 3], function(memo, num){ return memo + num; }, 0);  
  2. console.info(sum) //6  
例子2：
  1.      var result =   _.reduce([2,4,6,8,10],function(memo, value, idx, arr) {  
  2.             //memo:是reduce函数的初始值:2，6，12，20  
  3.             //value:迭代的当前值：4，6，8，10  
  4.             //idx：迭代的index：1，2，3，4  
  5.             //arr：整个list：[2, 4, 6, 8, 10]  
  6.             return memo + value;  
  7. });     
  8.         //30  
  9.         console.info(result);  

shuffle_.shuffle(list) 
返回一个随机乱序的 list 副本
  1. var shuffle =  _.shuffle([1, 2, 3, 4, 5, 6]);  
  2. console.log(shuffle)  
  3. // [4, 1, 6, 3, 5, 2]  
  4. // [6, 4, 3, 1, 2, 5]  
  5. // [6, 3, 2, 4, 1, 5]   
  6. // [1, 2, 5, 4, 6, 3]  

数组的特征
Underscore.js提供了一系列方法，判断数组元素的特征。这些方法都返回一个布尔值，表示是否满足条件。

every_.every(list, [predicate], [context]) Alias: all 
方法判断数组的所有元素是否都满足某个条件。如果都满足则返回true，否则返回false。
  1. var _everyResult = _.every([1, 2, 3, 4, 5, 6], function(num){  return num % 2 == 0; });  
  2. console.log(_everyResult)  
  3. // false  

some_.some(list, [predicate], [context]) Alias: any 
方法则是只要有一个元素满足，就返回true，否则返回false。
  1. var _someResult = _.some([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; });  
  2. console.log(_someResult);  
  3. //true  

size_.size(list) 
返回list的长度。
  1. var sizeResult = _.size({one : 1, two : 2, three : 3});  
  2. var sizeResult2 = _.size([1, 2, 3, 4, 5, 6]);  
  3. console.info(sizeResult);// 3  
  4. console.info(sizeResult2);//6  

数组的过滤

Underscore.js提供了一系列方法，用于过滤数组，找到符合要求的成员。

filter_.filter(list, predicate, [context]) Alias: select 
方法依次对集合的每个成员进行某种操作，只返回操作结果为true的成员。
  1. var   _filterResult =  _.filter([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; });  
  2. console.log(_filterResult);  
  3. // [2, 4, 6]  

reject_.reject(list, predicate, [context]) 
方法只返回操作结果为false的成员。
  1. _.reject([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; });  
  2. // [1, 3, 5]  

find_.find(list, predicate, [context]) Alias: detect 
方法依次对集合的每个成员进行某种操作，返回第一个操作结果为true的成员。如果所有成员的操作结果都为false，则返回undefined。
  1. var _findResult = _.find([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; });  
  2. console.log(_findResult);  
  3. // 结果为true的：2  

contains_.contains(list, value, [fromIndex]) Alias: includes 
方法表示如果某个值在数组内，则返回true，否则返回false。
  1. _.contains([1, 2, 3], 3);  
  2. // true  

countBy_.countBy(list, iteratee, [context]) 
方法依次对集合的每个成员进行某种操作，将操作结果相同的成员算作一类，最后返回一个对象，表明每种操作结果对应的成员数量。
  1. _.countBy([1, 2, 3, 4, 5], function(num) {  
  2. return num % 2 == 0 ? ‘even‘ : ‘odd‘;  
  3. });  
  4. // {odd: 3, even: 2}  

2
对象相关方法
 
toArray_.toArray(list) 
方法将对象转为数组，只包含对象成员的值。典型应用是将对类似数组的对象转为真正的数组。
  1. _.toArray({a:0,b:1,c:2});  
  2. // [0, 1, 2]  

pluck_.pluck(list, propertyName) 
方法将多个对象的某一个属性的值，提取成一个数组。
  1. var stooges = [{name : ‘moe‘, age : 40}, {name : ‘larry‘, age : 50}, {name : ‘curly‘, age : 60}];  
  2. var _pluckResult = _.pluck(stooges, ‘name‘);  
  3. console.log(_pluckResult);  
  4. // ["moe", "larry", "curly"]  

3
与函数相关的方法
 
不同的运行环境下，JavaScript函数内部的变量所在的上下文是不同的。这种特性会给程序带来不确定性，为了解决这个问题，Underscore.js提供了两个方法，用来给函数绑定上下文。

1bind


bind_.bind(function, object, *arguments)
该方法绑定函数运行时的上下文，返回一个新函数。
1.绑定函数 function 到对象 object 上 
2. 函数里的 this 都指向这个 object
3.任意可选参数arguments 可以传递给函数 function

例子1

技术分享 


 例子2

  1. var o = {    
  2.     p: 2,    
  3.     m: function (){console.log(this.p);}    
  4. };    
  5. o.m()    
  6. //console.log(this.p):   2    
  7. _.bind(o.m,{p:1})()    
  8. //console.log(this.p):   1      

除了前两个参数以外，bind方法还可以接受更多参数，它们表示函数方法运行时所需的参数。

例子3


技术分享
 上面代码中bind方法有5个参数，最后那三个是给定add方法的运行参数，所以运行结果为4

2bindAll


bindAll_.bindAll(object, *methodNames) 
该方法可以一次将多个方法，绑定在某个对象上面
  1. var o = {  
  2.     p1 : ‘123‘,  
  3.     p2 : ‘456‘,  
  4.     m1 : function() { console.log(this.p1); },  
  5.     m2 : function() { console.log(this.p2); },  
  6. };  
  7.   
  8. _.bindAll(o, ‘m1‘, ‘m2‘);  
上面代码一次性将两个方法（m1和m2）绑定在o对象上面。

3partial


partial_.partial(function, *arguments) 
除了绑定上下文，Underscore.js还允许绑定参数。partial方法将函数与某个参数绑定，然后作为一个新函数返回
  1. /////////  
  2. // 例子1 
  3. /////////  
  4. var add = function(a, b) {   
  5.     return a + b;   
  6. };  
  7. add5 = _.partial(add, 5);  
  8. add5(10);  
  9. //add = function(a=5,b=10)  
  10. // 15  
  11.   
  12. /////////  
  13. // 例子2 
  14. /////////  
  15. var subtract = function(a, b) {   
  16.     return b - a;   
  17. };  
  18. sub5 = _.partial(subtract, 5);  
  19. sub5(20);  
  20. //subtract = function(a=5,b=20)  
  21. //15  
  22.   
  23. //////////////////////////////////////  
  24. // 例子3                              
  25. // Using a placeholder(这里的20是第3个参数) 
  26. //////////////////////////////////////  
  27. subFrom20 = _.partial(subtract, _, 20);  
  28. subFrom20(5);  
  29. //subtract = function(a=5,b=20)  
  30. //15  

4wrap

wrap_.wrap(function, wrapper) 
该方法将一个函数作为参数，传入另一个函数，最终返回前者的一个新版本。

  1. var hello = function(name) { return "hello: " + name; };  
  2. hello = _.wrap(hello, function(func) {  
  3.     return "before, " + func("moe") + ", after";  
  4. });  
  5. hello();  
  6. // ‘before, hello: moe, after‘  

上面代码先定义hello函数，然后将hello传入一个匿名定义，返回一个新版本的hello函数

5compose


compose_.compose(*functions) 
该方法接受一系列函数作为参数，由后向前依次运行，上一个函数的运行结果，作为后一个函数的运行参数。也就是说，将f(g(),h())的形式转化为f(g(h()))。

  1. var greet = function(name){ console.log( "hi: " + name )};  
  2. var exclaim = function(statement){ console.log( statement + "!")};  
  3. var welcome = _.compose(exclaim, greet);  
  4. welcome(‘moe‘);  
  5. // ‘hi: moe!‘  

上面代码调用welcome时，先运行greet函数，再运行exclaim函数。并且，greet函数的运行结果是exclaim函数运行时的参数。


4
函数运行控制
 
Underscore.js允许对函数运行行为进行控制。

1memoize

memoize_.memoize(function, [hashFunction]) 
该方法缓存一个函数针对某个参数的运行结果，对于耗时较长的计算是很有帮助的。
var fibonacci = _.memoize(function(n) {  
    return n < 2 ? n : fibonacci(n - 1) + fibonacci(n - 2);  
});

2delay

delay_.delay(function, wait, *arguments) 
方法可以将函数推迟指定的时间再运行。
var log = _.bind(console.log, console);
_.delay(log, 1000, ‘logged later‘);
// ‘logged later‘  -- Appears after one second.

3defer

defer_.defer(function, *arguments) 
该方法可以将函数推迟到待运行的任务数为0时再运行，类似于setTimeout推迟0秒运行的效果。
_.defer(function(){ alert(‘deferred‘); });
// Returns from the function before the alert runs.

4throttle

throttle_.throttle(function, wait, [options]) 
该方法返回一个函数的新版本。连续调用这个新版本的函数时，必须等待一定时间才会触发下一次执行。
// 返回updatePosition函数的新版本
var throttled = _.throttle(updatePosition, 100);
// 新版本的函数每过100毫秒才会触发一次
$(window).scroll(throttled);

5debounce

debounce_.debounce(function, wait, [immediate]) 
该方法返回的新函数有调用的时间限制，每次调用必须与上一次调用间隔一定的时间，否则就无效。它的典型应用是防止用户双击某个按钮，导致两次提交表单。
$("button").on("click", _.debounce(submitForm, 1000, true));
上面代码表示click事件发生后，调用函数submitForm的新版本。该版本的两次运行时间，必须间隔1000毫秒以上，否则第二次调用无效。最后那个参数true，表示click事件发生后，立刻触发第一次submitForm函数，否则就是等1000毫秒再触发。

6once

once_.once(function) 
该方法返回一个只能运行一次的新函数。该方法主要用于对象的初始化。
var initialize = _.once(createApplication);
initialize();
initialize();
// Application只被创造一次

7after

after_.after(count, function) 
创建一个函数, 只有在运行了 count 次之后才有效果. 
在处理同组异步请求返回结果时, 如果你要确保同组里所有异步请求完成之后才 执行这个函数, 这将非常有用。
该方法返回的新版本函数，只有在被调用一定次数后才会运行，主要用于确认一组操作全部完成后，再做出反应。
var renderNotes = _.after(notes.length, render);
_.each(notes, function(note) {
    note.asyncSave({success: renderNotes});
});

5
工具方法
 
链式操作
_.(users)
.filter(function(user) { return user.name === name })
.sortBy(function(user) { return user.karma })
.first()
.value()

template
template_.template(templateString)([settings]) 
该方法用于编译HTML模板。它接受三个参数
_.template(templateString)([data], [settings])
templateString：模板字符串
data：输入模板的数据
settings：设置

1templateString

模板字符串 templateString 就是普通的HTML语言，其中的变量使用<%= … %>的形式插入；data对象负责提供变量的值。

  1. var txt = "<h2><%= word %></h2>";    
  2. var _html = _.template(txt)({word : "Hello World"});  
  3. //console.log(_html)  
  4. // "<h2>Hello World</h2>"    

如果变量的值包含五个特殊字符（& < > ” ‘ /），就需要用<%- … %>转义。

  1. var txt = "<h2><%- word %></h2>";  
  2. _.template(txt)({word : "H & W"})  
  3. // <h2>H &amp; W</h2>  

JavaScript命令可以采用<% … %>的形式插入。下面是判断语句的例子。

  1. var txt = "<% var i = 0; if (i<1){ %>"  
  2.         + "<%= word %>"  
  3.         + "<% } %>";  
  4. _.template(txt)({word : "Hello World"})  
  5. // Hello World  

常见的用法还有循环语句

  1. var list = "<% _.each(people, function(name) { %> <li><%= name %></li> <% }); %>";  
  2. _.template(list)({people : [‘moe‘, ‘curly‘, ‘larry‘]});  
  3. // "<li>moe</li><li>curly</li><li>larry</li>"  

如果template方法只有第一个参数templateString，省略第二个参数，那么会返回一个函数，以后可以向这个函数输入数据。

  1. var t1 = _.template("Hello <%=user%>!");    
  2. t1({ user: "<Jane>" })   
  3. // ‘Hello <Jane>!‘  

默认的, template 通过 with 语句来取得 data 所有的值. 当然, 您也可以在 variable 设置里指定一个变量名. 这样能显著提升模板的渲染速度.
  1. //对象赋值  
  2.  _html = _.template("Using ‘with‘: <%= data.answer %>", {variable: ‘data‘})({answer: ‘no‘});  
  3. console.log(_html)  
  4. // "Using ‘with‘: no"  


2data


templateString中的所有变量，在内部都是obj对象的属性，而obj对象就是指第二个参数data对象。下面两句语句是等同的

  1. _.template("Hello <%=user%>!", { user: "" })  
  2. _.template("Hello <%=obj.user%>!", { user: "" })  

如果要改变obj这个对象的名字，需要在第三个参数中设定。

  1. _.template("<%if (data.title) { %>Title: <%= title %><% } %>", null,{ variable: "data" });  

因为template在变量替换时，内部使用with语句，所以上面这样的做法，运行速度会比较快

原文资料：http://www.css88.com/archives/4784



来自为知笔记(Wiz)


（2）Underscore.js常用方法


联系
我们