首页

underscorejs

kkcode
kkcode
2021-08-13  阅读 651

模板 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!
复制代码
本文为作者原创文章,转载无需和我联系,但请注明转载链接。 【前端黑猫】
评论数量：0