Underscore.js常用方法

Posted 2020-08-16 【唐】三三

从其他语言转向javascript时，通常都会遇到一些困惑性问题。比如，Java中的HashMap在Javascript中如何实现？Javascript面向对象式编程如何实现继承？如何实现通用的iterator对集合对象做遍历？如何对Array实现快速排序？….

如果你真的可以自己实现这些功能，那么你的Javascript基础很扎实的！我很佩服你！但对于大部分人来说，这些基础功能应该是由底层API支持的，就像JDK一样。Underscore为我们提供了这样的一个实用工具包，而且它真的很实用！

只有你动手做了，你才能有收获。

目录

1.集合相关方法

       1.1.数组的处理

               map（循环，有返回值），将返回的值依次存入一个新的数组

               each（循环，无返回值）

               reduce（累计计算），将操作结果累计在某一个初始值之上，全部操作结束之后，返回累计的值。

               shuffle（随机乱序副本），返回一个随机乱序的 list 副本

        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         将函数推迟到待运行的任务数为0时再运行，类似于setTimeout推迟0秒运行的效果

       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常用方法

 

 

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. underscore.js源码研究

   underscore.js源码解析

   Underscore js是一个JavaScript实用库

   Underscore js是一个JavaScript实用库

   underscore.js

   underscore.js 分析 第四天