首页

underscorejs

kkcode
2021-08-13  阅读 643

模板 template

    <script type="text/template" id="tpl">
        <% _.each(data, function(n){ %>
            <p>姓名:<%= n.name %></p>
        <% }); %>
    </script>

    let data = [
        {name : '阿里巴巴'},
        {name : '百度'}
    ];

 _.template($('#tpl').html(), data ); // 直接使用 data 作为模板数据复制代码

2. 使用_.template(tplStr), 相关代码如下

    <script type="text/template" id="tpl">
        <% _.each(data, function(n){ %>
            <p>姓名:<%= n.name %></p>
        <% }); %>
    </script>
    // 注意 data 数据的区别
    let data = {data :[
        {name : '阿里巴巴'},
        {name : '百度'}
    ]};
    let comp = _.template( $('#tpl').html() ); // 预编译
    $('body').append( comp (data) ); // 渲染数据复制代码

两种方式的主要区别在于,数据对象在模板中的取值,第一种方式传什么就处理什么数据,传过来数据就是数据源。第二种是数据的键作为数据源。注意区别,如果使用模块化,可以不用在 html 文件中使用 script, 可以将模板作为一个独立的 js 文件,方便复用

集合 collections

集合,顾名思义处理数据集合的方法,在 javascript 中,集合主要指数组和对象,当然在 es6 中,涉及到 Set 和 Map 数据结构。关于 set 和 map 的数据结构的集合不在讨论范围。请查阅相关资料。在使用集合方法的时候,为了便于理解,把数组理解成特殊的对象,数组的索引是对象的键,数组的元素是对应的键值。

each

  1. each(list, iteratee, [context]) 别名: forEach
  2. 功能:遍历对象,与 jquery 中的 $.each() 和 $().each() 以及 html5 中的 forEach() 功能相似,有细微的差别。
  3. 返回值:返回集合本身
  4. 参数:list, 待遍历的集合; iteratee,回调函数;context, 作用域,关于作用域的使用请查相关的资料,主要是针对 this 指针,指向当前集合。
    _.each({one: '阿里巴巴', two: '腾讯', three: '百度'},function(value,key){
        console.log(value); // 阿里巴巴 腾讯 百度
    });
    // 注意回调函数中的,对于对象来说 value 表示是值,key表示的是键。
复制代码

map

  1. map(list, iteratee, [context]) 别名: collect
  2. 功能:通过回调函数,将集合中的每一个元素映射到一个新的数组中。与 jquery 中的 $.map() 功能类似
  3. 返回值:新的数组
  4. 参数:同上
    _.map([1, 2, 3], function(num){
        return num * 3
    });  // [3,6,9]

    _.map({one: 1, two: 2, three: 3}, function(num, key){
        return num * 3;
    }); // [3,6,9]
复制代码

reduce

  1. reduce(list, iteratee, [memo], [context]) 别名: inject, foldl
  2. 功能:迭代,根据执行的不同方法,进行数据迭代
  3. 返回值:迭代后的结果
  4. 参数:list,同上;iteratee,回调函数;memo,迭代的起始值,可选;context,作用域,与前文相同;
    /****************************** 累加 ***************************/
    var result = _.reduce([1,2,3,4,5],function(v1,v2){
        return v1 + v2; // v1,表示每次迭代后的结果,v2,表示当前对象
     },10); // 参数10, 表示迭代的起始值。不传,默认是集合的第一个元素
     console.log( result ); // 25
    /*************************** 合并数组 ***************************/
    var result = _.reduce([[1,2],[3,4],5,6,[[7,8]]],function(v1,v2){
        return v1.concat( v2 ); 
    });
    console.log( result ); // [1,2,3,4,5,6,[7,8]]
复制代码

reduceRight

功能与 reduce 类似,别名: foldr,不同的是,该方法从后向前迭代,其他并无区别,用法参考 reduce,需要说明的是,在 es5 提供了同样的方法,方法名与功能相同,可以直接使用。

find

  1. find(list, predicate, [context] 别名: detect
  2. 功能:查找某一指定的元素,或者指定条件的值,找到立即返回。
  3. 返回值:返回满足条件的值,条件拒不满足,返回 undefined
  4. 参数:list,同上;predicate,查找的条件;context,作用域,同上
    var even = _.find([ 1, 3, 4, 5, 6 , 2 ], function( num ){ 
        return num % 2 == 0; 
    });
    console.log(even); // 4

    var result = _.find([ 'a','bb','cc','dd' ], function( str ){ 
        return str.length == 2; 
    });
复制代码

filter

  1. filter(list, predicate, [context]) 别名: select
  2. 功能:功能与 find 类似不同的是 filter 遍历所有的数据,返回所有满足条件的数据
  3. 返回值:满足条件的数组
  4. 参数:同上
   var evens = _.filter([1, 2, 3, 4, 5, 6], function(num){
       return num % 2 == 0; 
    });
    console.log( evens ) ; // [2,4,6]        
复制代码

where

  1. where(list, properties)
  2. 功能:筛选含有 properties 所有的元素,
  3. 返回值:返回一个数组
  4. 参数:list,同上;properties,键值对的对象
    var result = _.where([
        {title: "The Tempest", author: "Shakespeare", year: 1611},
        {title: "The Tempest", year: 44},
        {title: "The Tempest", author: "Shakespeare", year: 50},
        {year: 44}],{year:44});
    console.log( result ); // [{title: "The Tempest", year: 44},{year: 44}]
复制代码

findWhere

  1. findWhere(list, properties)
  2. 功能:功能与 where 基本相同,不同点是 findWhere 返回第一个查找到的元素,即条件成立后立即停止查找,并返回查找到的值。
    var result = _.findWhere([
        {title: "The Tempest", year: 1611},
        {title: "The Tempest", year: 44},
        {author: "Shakespeare", year: 1611,'csss':'css'}],{year: 1611});
        console.log( result ); // {title: "The Tempest", year: 1611}
复制代码

reject

  1. reject(list, predicate, [context])
  2. 功能:返回不满足条件的数据,与 filter 功能相反,无其他区别。
  3. 返回值:不满足条件的数组
  4. 参数:list,同上;predicate,查找的条件;context,作用域,同上
    var result = _.reject([1, 2, 3, 4, 5, 6], function( item ){ 
        return item % 2 == 0;
    });
    console.log( result ); // [1,3,5]
复制代码

every

  1. every(list, [predicate], [context]) 别名: all
  2. 功能:检测所有的数据是否满足条件,若全部满足返回 true,否则返回 false;注意是 falsly 值,0,undefined,null,false,'';es5 提供了该方法
  3. 返回值:布尔值
  4. 参数:同上
    var result = _.every([true, 1, null, 'yes']);
    console.log( result ); // false
复制代码

some

  1. some(list, [predicate], [context]) 别名: any
  2. 功能:检测数据是否满足条件,只要有一个数据为真则返回 true,否则返回 false,用法与 every 相似。不同在于一个是存在,一个是全部满足。es5 提供了该方法
    var result = _.some([null, 0, 'yes', false]);
    console.log( result ); // true        
复制代码

contains

  1. contains(list, value) 别名: include
  2. 功能:检测集合中是否包含某一值,若包含返回 true,否则返回 false
  3. 返回值:布尔值
  4. 参数:list, 数据集合;value,指定的数据
    var result = _.contains([1, 2, 3], 3);
    console.log( result ); // true

    var result = _.contains( {'name':123,'age':'age',sex:'男'}, '男' );
    console.log( result ); // true
复制代码

invoke

  1. invoke(list, methodName, *arguments)
  2. 功能:为集合中每一项执行一个方法,在自定义方法中 this 表示当前对象。
  3. 返回值:返回执行后的结果
  4. 参数:list, 集合;methodName,方法的引用,方法的参数;
    var result = _.invoke([[5, 1, 7], [3, 2, 1]], 'sort'); // 排序
    console.log( result ); // [ [1, 5, 7], [1, 2, 3] ]

    var result = _.invoke([[5, 1, 7], [3, 2, 1]], 'reverse'); // 倒置
    console.log( result ); // [[7, 1, 5], [1, 2, 3]]

    // 自定义方法 arguments 表示方法的参数
    var result = _.invoke( [ 1, 2, 3, 4, 5 ], 'toFixed', 2 ); // 保留2位小数
    console.log(result); // ["1.00", "2.00", "3.00", "4.00", "5.00"]

    // 自定义方法 this 表示当前元素
    var result = _.invoke( [ 1, 2, 3, 4, 5 ], function(){
        return this + 10;    
    }); 
    console.log( result ); // [11, 12, 13, 14, 15]

    // 自定义方法传参
    var result = _.invoke( [ 1, 2, 3, 4, 5 ], function( a ){
        return this * a;    
    },10);
    console.log( result ); // [10, 20, 30, 40, 50]
复制代码

pluck

  1. pluck(list, propertyName)
  2. 功能:即萃取对象数组中某属性值,返回一个数组。
  3. 返回值:返回一个由属性值组成的新数组
  4. 参数:list,数据集合,propertyName,待提取的键
    var result =  _.pluck(
        [
            {name: 'moe',  age: 40 }, 
            {name: 'larry', age: 50},
            {name: 'curly',age: 60}
        ], 'name'); 
      console.log( result ); // ["moe", "larry", "curly"]
复制代码

max

  1. max(list, [iteratee], [context])
  2. 功能:获取集合中的最大值,如果 list 为空,将返回 - Infinity,所以你可能需要事先用 isEmpty 检查 list。
  3. 返回值:返回最大值
  4. 参数:list,集合;iteratee,回调函数,context,上下文;
    var result = _.max(
        [
            {name: 'moe', age: 40}, 
            {name: 'larry', age: 50}, 
            {name: 'curly', age: 60}
        ], function( item ){ 
            return item.age; 
        });
    console.log( result ); // {name: "curly", age: 60}
复制代码

min

  1. 功能:与 max 用法相似,不同的是 min 是获取最小值。请参考 max 方法
    var result = _.min( [10, 5, 100, 2, 1000], function( a, b ){
        console.log(a,b); // a 值,b 索引
    });
    console.log( result ); // 2
复制代码

sortBy

  1. sortBy(list, iteratee, [context])
  2. 功能:按照给定的条件,排序。回调函数中可以是字符串的属性为条件 (比如 length)。可以使用在条件前使用 '-' 号,反向排序
  3. 返回值:排序后的副本
  4. 参数:同上
    var result = _.sortBy([1, 2, 3, 4, 5, 6], function( item ){ 
        return Math.sin( item ); // 按sin值得大小对元素排列 
    });
    console.log( result ); // [5, 4, 6, 3, 1, 2]

    var result = _.sortBy(['alibaba','xiaomi','tengxu','baidu','cctv'],function( item ){ 
        return item.length; // 按字符串长度排序 
    });
    console.log(result); // ["cctv", "baidu", "xiaomi", "tengxu", "alibaba"]

    var result = _.sortBy([
        {'age':30},
        {'age':8,'name':'百度'},
        {'age':50,'name':'阿里'}
    ], function( item ){ 
        return  item.age; 
    });
    console.log(result) // [{'age':8,'name':'百度'},{'age':30},{'age':50,'name':'阿里'}] 

    var result = _.sortBy([ 5, 0, 2, -1, -3, 4, -17, 6], function( item ){ 
        return Math.abs( num ); // 按绝对值 的大小 排列数据 
    });
console.log( result ); // [0, -1, 2, -3, 4, 5, 6, -17]
复制代码

groupBy

  1. groupBy(list, iteratee, [context])
  2. 功能:把一个集合根据条件分组成多个集合。条件作为键,满足条件的项,作为值 (数组)
  3. 返回值:返回一个对象
  4. 参数:同上
    var result = _.groupBy([1.3, 2.1, 2.4, 8.3], function( item ){ 
        return Math.floor( item ); 
    });
    console.log( result,123 ); // { 1:[ 1.3 ], 2:[ 2.1, 2.4 ] }

    // 使用属性,作为条件
    var result = _.groupBy(['one', 'two', 'three'], 'length');
    console.log( result ); // { 2:[ "one", "two" ], 5:[ "three" ] }
    // 使用函数,作为条件
    var result = _.groupBy(['one', 'two', 'three'], function( value, key ){
        return value.length; 
    });
    console.log( result ); // { 2:[ "one", "two" ], 5:[ "three" ] }
复制代码

indexBy

  1. indexBy(list, iteratee, [context])
  2. 功能:和 groupBy 类似,以某一指定的属性名或条件作为键,满足条件的项作为值,必须保证指定的条件唯一,如果重复会被覆盖;
    //以键名为条件
     var result = _.indexBy([
        { name: 'moe', age: 40 }, 
        { name: 'larry', age: 50 }, 
        { name: 'curly', age: 60},
    ],'age'); 
    console.log( result ); //{ 40 : { name : "moe", age : 40}, 50 : { name : "larry", age : 50 }, 60 : { name : "curly", age : 60 } }

    // 以函数为条件
    var result = _.indexBy([
        { name: 'moe', age: 40 }, 
        { name: 'larry', age: 50 }, 
        { name: 'curly', age: 60},
    ],function( item, key ){
        return item.age;
    });
    console.log( result ); //' {40 : { name : "moe", age : 40}, 50 : { name : "larry", age : 50 }, 60 : { name : "curly", age : 60 } }
复制代码

countBy

  1. countBy(list, iteratee, [context])
  2. 功能:实现计数功能,满足某一条件的数量
  3. 返回值:以指定键和数量组成的对象
  4. 参数:同上
    var result = _.countBy([1, 2, 3, 4, 5], function( item ) {
        return item % 2 == 0 ? 'even': 'odd'; // 计算奇数偶数的个数,并以指定的键值返回
    });
    console.log( result ); // { odd : 3, even : 2 }
复制代码

shuffle

  1. shuffle(list)
  2. 功能:打乱指定的数组
  3. 返回值:返回打乱后的数组副本
  4. 参数:list, 集合;
    var result = _.shuffle([1, 2, 3, 4, 5, 6]);
    console.log( result ); // 从新组合的数组
复制代码

sample

  1. sample(list, [n])
  2. 功能:从 list 中产生一个随机样本。
  3. 返回值:返回样本数组
  4. 参数:list,集合;n,可选,指定样本的长度。不传则返回长度为 1 的样本。
    var result = _.sample([1, 2, 3, 4, 5, 6]);
    console.log( result );        
复制代码

toArray

  1. toArray(list)
  2. 功能:将类素组转成数组
  3. 返回值:数组
  4. 参数:list,类数组
    var result = (function(){ 
        return _.toArray(arguments).slice(1); 
    })(1, 2, 3, 4);
    console.log( result ); // [2, 3, 4]
复制代码

size

  1. size(list)
  2. 功能:获取 list 长度
  3. 返回值:list 的长度。
  4. 参数:list,集合
    var result = _.size( { one: 1, two: 2, three: 3} );
    console.log( result ); // 3      
复制代码

partition

  1. partition(array, predicate)
  2. 功能:拆分一个数组(array)为两个数组。第一个数组其元素都满足 predicate 迭代函数, 而第二个的所有元素均不能满足 predicate 迭代函数。
  3. 返回值:二维数组
  4. 参数:array,数组;predicate,条件;
    var result = _.partition([0, 1, 2, 3, 4, 5], function( item ){
        return item % 2 == 0;
    });
    console.log( result ); // [[0, 2, 4],[1, 3, 5]]
复制代码

数组 (Arrays)

first

  1. first(array, [n]) 别名: head, take
  2. 功能:获取元素的前 n 个元素,默认获取第一个元素
  3. 返回值:返回新数组或第一个元素值
  4. 参数:array, 数组;n 可选,不传默认为 1
var result = _.first([5, 4, 3, 2, 1]);
console.log( result ); // 5
var result = _.first([5, 4, 3, 2, 1],3);
console.log( result ); // [5, 4, 3]

var result = _.first([{name:'name'},{age:'age'},{sex:'sex'}]);
console.log( result ); // { name:'name' }
复制代码

initial

  1. initial(array, [n])
  2. 功能:获取去除数组中最后 n 个元素后的元素,默认去除最后一个元素
  3. 返回值:新数组
  4. 参数:array, 数组;n 可选,不传默认为 1
    var result = _.initial([5, 4, 3, 2, 1]);
    console.log( result ); // [5, 4, 3, 2]

    var result = _.initial([5, 4, 3, 2, 1],3);
    console.log( result ); // [5, 4]
复制代码

last

  1. last(array, [n])
  2. 功能:获取数组中的最后 n 个元素,默认返回最后一个元素
  3. 返回值:返回新数组或最后一个元素
  4. 参数:array, 数组;n 可选,不传默认为 1
    var result = _.last([5, 4, 3, 2, 1]);
    console.log( result ); // 1

    var result = _.last([5, 4, 3, 2, 1],2);
    console.log( result ); // [2,1]
复制代码

rest

  1. rest(array, [n])
  2. 功能:获取去除数组前 n 个元素的元素,默认去除第一个元素
  3. 返回值:返回新数组
  4. 参数:array, 数组;n 可选,不传默认为 1
    var result = _.rest( [5, 4, 3, 2, 1] );
    console.log( result ); // [4, 3, 2, 1]

    var result = _.rest( [5, 4, 3, 2, 1], 3 );
    console.log( result ); // [2, 1]
复制代码

compact

  1. compact(array) ( 翻译:紧缩 )
  2. 功能:去除数组中的 falsy 值,在 javascript 中, false, null, 0, "", undefined 和 NaN 都是 false 值
  3. 返回值:返回新数组
  4. 参数:array, 数组
    var result = _.compact( [0, 1, false, 2, '', 3, 'xyz', undefined, null ] );
    console.log( result ); // [1, 2, 3, "xyz"]
复制代码

flatten

  1. flatten(array, [shallow])( 翻译:使... 变平 )
  2. 功能:将多维数组转换成一维数组,或者将多维数组减少一维
  3. 返回值:返回新数组
  4. 参数:array, 多维数组;shallow,可选不传默认转换成一维,否则将数组减少一维
    var result = _.flatten([1, [2], [3, [[4]]]]);
    console.log( result ); // [1, 2, 3, 4] 

    var result = _.flatten([1, [2], [3, [[4]]]],true);
    console.log( result ); //' [1,2,3,[[4]]]
复制代码

without

  1. without(array, *values)
  2. 功能:去除指定的数组元素
  3. 返回值:返回新数组
  4. 参数:array, 数组;*value,指定的元素值
    var result = _.without([1, 2, 1, 0, 3, 1, 4], 0, 1);
    console.log( result ); // [2,3,4]
复制代码

union

  1. union(*arrays) (翻译:联盟,联合)
  2. 功能:获取数组并集
  3. 返回值:返回新数组
  4. 参数:*array, 数组,参数如果不是数组会被忽略;
    var result = _.union([1, 2, 3], [101, 2, 1, 10], [2, 1]); 
    console.log( result ); // [1, 2, 3, 101, 10]
复制代码

intersection

  1. intersection(*arrays) (翻译:交集)
  2. 功能:获取数组交集
  3. 返回值:返回新数组
  4. 参数:*array,数组
    var result = _.intersection([1, 2, 3], [101, 2, 1, 10], [2, 1]);
    console.log( result ); // [1,2]
复制代码

difference

  1. difference(array, *array) (翻译:差别,差异)
  2. 功能:获取数组中与其他数组不同的元素
  3. 返回值:返回新数组
  4. 参数:array,数组;*array,数组
    var result = _.difference( [1, 2, 3, 4, 5], [5, 2, 10], [1] );
    console.log( result ); // [3,4]
复制代码

uniq

  1. uniq(array, [isSorted], [iteratee])
  2. 功能:获取去重后的元素
  3. 返回值:返回新数组
  4. 参数:array,数组;isSorted,是否已经排序,若果已经排序会执行更优的算法,提高性能。iteratee,回调函数
    var result = _.uniq([1, 2, 1, 3, 1, 4]);
    console.log( result ); //
    var result = _.uniq([{name:1},{name:2},{name:3},{name:4},{name:3},{name:2}],function( key, value ){
        return key.name;
    });
    console.log( result ); // [{name:1},{name:2},{name:3},{name:4}]
复制代码

zip

  1. zip(*arrays)
  2. 功能:将每一个数组中的每一项的元素一一对应,组成一个新的数组
  3. 返回值:返回一个二维数组
  4. 参数:*arrays,数组
    var result = _.zip(["moe", "larry", "curly"], [30, 40, 50], [true, false,false]);
    console.log( result ); // [["moe", 30, true], ["larry", 40, false], ["curly", 50, false]]
复制代码

object

  1. object(list, [values])
  2. 功能:将数组转换为对象
  3. 返回值:对象
  4. 参数:list 的每一项为对象的 key,values 的每一项为对象的 value,list 中的每一项与 values 中的每一项一一对应。
    var result = _.object(['moe', 'larry', 'curly'], [30, 40, 50]);
    console.log( result ); // { moe : 30, larry : 40, curly : 50 }

    var result = _.object([ [ 'xxxx', 30 ], [ 'yyyy', 40 ], [ 'zzzz', 50 ] ]);
    console.log( result ); // {xxxx: 30, yyyy: 40, zzzz: 50}
复制代码

indexOf

  1. indexOf(array, value, [isSorted])
  2. 功能:获取指定元素的索引
  3. 返回值:返回元素的索引值,如果元素不存在返回 -1
  4. 参数:array, 数组;value, 元素;isSorted,同上。
    var result = _.indexOf([1, 2, 3], 2);
    console.log( result ); // 1
复制代码

lastIndexOf

  1. lastIndexOf(array, value, [fromIndex])
  2. 功能:获取指定元素的索引,从后向前搜索。
  3. 返回值:返回元素的索引值,如果元素不存在返回 -1
  4. 参数:array, 数组;value, 元素;fromIndex,将从给定的索引值开始向前搜索。
    var result = _.lastIndexOf([1, 2, 3, 1, 2, 3], 1);
    console.log( result ); // 3

    var result = _.lastIndexOf([1, 2, 3, 1, 2, 3], 2, 4);
    console.log( result ); // 4
复制代码

sortedIndex

  1. sortedIndex(list, value, [iteratee], [context])
  2. 功能:获取元素在已经排序后的位置,即索引
  3. 返回值:返回索引值
  4. 参数:list, 数组;value 元素;iteratee, 回调函数,作为排序的依据,context 作用域,主要针对 this 指向
    var arr = [10, 20, 30, 40, 50];
    var result = _.sortedIndex( arr, 35);
    arr.splice(result,0,35);
    console.log( arr ); // [10, 20, 30, 35, 40, 50]

    var result = _.sortedIndex([
            {name: 'moe', age: 40}, 
            {name: 'curly', age: 60}
        ], {name: 'larry', age: 50}, 'age');
    console.log( result ); // 1
复制代码

findIndex

  1. findIndex(array, predicate, [context])
  2. 功能:获取数组中某一元素的索引,功能与 lastIndexOf 相似,但功能更强大
  3. 返回值:返回索引值,找到即返回,不存在返回 -1
  4. 参数:array, 数组;predicate 条件检测;context 作用域,主要针对 this 指向
    var result = _.findIndex([4, 6, 8, 12], 12); 
    console.log(result); 
复制代码

findLastIndex

  1. findLastIndex(array, predicate, [context])
  2. 功能:获取指定元素的索引,从后向前搜索。功能与 indexOf 相似,但功能更强大
  3. 返回值:返回索引值,找到即返回,不存在返回 -1
  4. 参数:同上

range

  1. range([start], stop, [step])
  2. 功能:创建一个数组列表
  3. 返回值:返回一个从 start 到 stop 的整数的列表。
  4. 参数:start,起始值,若不传默认是从 0 开始;stop,终止值,step,可选,指定步长,默认步长为 1; 默认为为升序,如果需要设置降序,需要指定步长为负,起始值大于终止值
    var result = _.range( 0, -10, -1 );
    console.log( result ); // [0, -1, -2, -3, -4, -5, -6, -7, -8, -9]

    var result = _.range(10);
    console.log( result ); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

    var result = _.range(0,10,2);
    console.log( result ); // [0, 2, 4, 6, 8]
复制代码

函数 (Functions)

bind

  1. bind(function, object, *arguments)
  2. 功能:改变 this 指向,并将 this 指向指定的对象
  3. 返回值:改变指针后的函数
  4. 参数:function,需要改变 this 指向的函数;object,对象,即 this 指针指向的对象;

*arguments,参数列表,函数参数列表,即参数 function 的列表

var func = function(greeting){ 
    return greeting + ":"  + this.name 
};
var func = _.bind(func, {"name": "moe"}, "hi");
console.log( func() ); // hi: moe
复制代码

bindAll

  1. bindAll(object, *methodNames)
  2. 功能:将方法绑定到指定对象,即方法中的 this 始终指向 object。
  3. 参数:object,需要绑定的对象;*methodNames,指定需要绑定的方法
var buttonView = {
    label  : 'underscore',
    onClick: function(){ 
        alert( 'clicked: ' + this.label ); 
    },
    onHover: function(){ 
        console.log('hovering: ' + this.label ); 
    }
};
_.bindAll(buttonView, 'onClick', 'onHover');
$('button').click(buttonView.onClick); // 使 this 始终指向被绑定的对象,避免this指针指向当前对象
复制代码

partial

  1. partial(function, *arguments)
  2. 功能:将某个函数与参数绑定,然后作为一个新函数返回。
  3. 返回值:返回一个已经绑定了参数的函数。
  4. 参数:function,待处理的函数;*arguments,需要给函数绑定的参数
    var add = function(a, b, c ) { 
        return a / b + c; 
    };
    add5 = _.partial(add, 5);
    add10 = _.partial(add5, 10);
    console.log( add10( 2 ) ); // 2.5
复制代码

memoize

  1. memoize(function, [hashFunction])
  2. 功能:缓存函数执行的结果,对于耗时较长的计算是很有帮助的。
  3. 返回值:返回一个已经绑定了参数的函数。
  4. 参数:function,待执行的函数; 如果传递了 hashFunction 参数,就用 hashFunction 的返回值作为 key 存储函数的计算结果
    var fibonacci = _.memoize(function(n) {
        return n < 2 ? n : fibonacci( n - 1 ) + fibonacci( n - 2 );
    });
    var result = fibonacci( 10 );
    console.log( result ); // 55
    // 可以通过下面的方式获取已经计算过的值
    console.log( fibonacci( 9 ) ); // 34
    console.log( fibonacci.cache[9] ); // 34
复制代码

delay

  1. delay(function, wait, *arguments)
  2. 功能:类似 setTimeout,等待 wait 毫秒后调用 function
  3. 返回值:返回定时器 ID
  4. 参数:function,回调函数;wait,延时时间;*arguments,回调函数的参数列表
    var log = _.bind(console.log, console); // 固定 this 指针指向
    var result = _.delay(log, 1000, "logged later"); // 1s之后打印 logged later
    console.log( result ); // 返回定时器id
复制代码

defer

  1. defer(function, *arguments)
  2. 功能:延迟调用 function 直到当前调用栈清空为止,类似使用延时为 0 的 setTimeout 方法
  3. 返回值:定时器 ID
  4. 参数:function,回调函数;*arguments,回调函数的参数列表
 _.defer(function(a,b){ 
    console.log(a,b,a); // 10 undefined 10    
},"10");
复制代码

throttle

  1. throttle(function, wait, [options])

  2. 功能:创建并返回一个像节流阀一样的函数,当重复调用函数的时候,最多每隔 wait 毫秒调用一次该函数。

  3. 返回值:返回函数本身 (throttle)

  4. 参数:function,执行频繁的函数;wait,下一次执行的时间;options,对象,可选。 如果你想禁用第一次首先执行的话,传递 {leading: false},还有如果你想禁用最后一次执行的话,传递 {trailing: false}。

     var throttled = _.throttle(function(a,b){}, 100);
     $(window).scroll(throttled); // 滚动事件触发频繁,节流提高性能
    复制代码

debounce

  1. debounce(function, wait, [immediate])
  2. 功能:将延迟函数的执行 (真正的执行) 在函数最后一次调用时刻的 wait 毫秒之后,防止多次被执行,尤其在交互中非常有用
  3. 返回值:函数
  4. 参数:function,待执行的函数;wait,下一次执行的时间,即间隔时间;immediate,可选, 为 true 在指定的时间内执行
    var lazyLayout = _.debounce(function(){
        console.log(123);
    }, 3000);
    $('input').click(lazyLayout); // 每次都会在三秒之后调用该函数,防止重复执行
复制代码

once

  1. once(function)
  2. 功能:创建一个只能调用一次的函数。重复调用改进的方法也没有效果,只会返回第一次执行时的结果。
  3. 返回值:函数
  4. 参数:function,函数
    function lg( a, b ){
        return a + b;
    };
    var initialize = _.once( lg );
    console.log( initialize(1,2) ); // 3
复制代码

after

  1. after(count, function)
  2. 功能:创建一个函数, 只有在运行了 count 次之后才有效果。

在处理同组异步请求返回结果时, 如果你要确保同组里所有异步请求完成之后才 执行这个函数, 这将非常有用。

  1. 返回值:函数
  2. 参数:count,执行的次数;function,待处理的函数
    var renderNotes = _.after(3, function(){ // 在执行三次之后,执行回调函数

    });
    _.each(notes, function(note) {
         note.asyncSave({success: renderNotes});
    });
复制代码

before

  1. before(count, function)
  2. 功能:创建一个函数, 调用不超过 count 次。
  3. 返回值:函数
  4. 参数:count,次数;function,回调函数
    var monthlyMeeting = _.before(3, function( a, b ){
        return a + b;
    });
    console.log( monthlyMeeting( 10, 20 ) ); // 30
    console.log( monthlyMeeting( 10, 40 ) ); // 50
    console.log( monthlyMeeting( 10, 40 ) ); // 50
    console.log( monthlyMeeting( 10, 40 ) ); // 50
复制代码

wrap

  1. wrap(function, wrapper)
  2. 功能:将第一个函数 function 封装到函数 wrapper 里面, 并把函数 function 作为第一个参数传给 wrapper,

控制已知函数的执行顺序

  1. 返回值:函数
  2. 参数:function,函数引用;wrapper,回调函数
    var hello = function( name ) { 
        return "hello: " + name; 
    };
    hello = _.wrap( hello, function( func ) { // 函数重载
        return "before, " + func( "moe" ) + ", after";
    });
    console.log( hello() ); // before, hello: moe, after
复制代码

negate

  1. negate(predicate)
  2. 功能:返回一个新的 predicate 函数的否定版本。
  3. 返回值:函数
  4. 参数:函数或者基本类型,如: Number, String, Boolean
    var isFalsy = _.negate(Number);
    var result = _.find( [-2, 'true', null, 0, 1, 2], isFalsy );
    console.log( result ); // null
复制代码

compose

  1. compose(*functions)
  2. 功能:复合调用函数,类似数学中的复合函数 f(g(h()))
  3. 返回值:函数执行后的结果
  4. 参数:*functions,函数列表,参数执行是从后向前执行,逐级向左执行。
    var greet    = function(name){ 
        return "hi: " + name; 
    };
    var exclaim  = function(statement){ 
        return statement.toUpperCase() + "!"; 
    };
    var test = function( a ){
        return ' ' + a + '   tttt';
    };
    console.log(_.compose(greet,exclaim,test)('alibaba')); // hi:  ALIBABA   TTTT!
复制代码
本文为作者原创文章,转载无需和我联系,但请注明转载链接。 【前端黑猫】