• 17-underscore库(下)


    一、函数介绍

    1、bind

    结构

    _.bind(function, object, *arguments) 
    

    说明

    一个对象中所有的成员函数的this都指向这个对象

    举例

    _.bind(function, object, [*arguments]) 
    var func = function(greeting){ 
           return greeting + ': ' + this.name //this指向的是bind的第二个参数
    };
    var newfunc = _.bind(func, {name : 'moe'}, 'hi');
    // bind返回的是一个新的function对象
    

    2、bindAll

    结构

    _.bindAll(object, *methodNames) 
    

    说明

    最常见的方法。作用是改变默认的function中的this指向。

    举例

    var buttonView = {
      label   : 'underscore',
      onClick : function(){ alert('clicked: ' + this.label); },
      onHover : function(){ console.log('hovering: ' + this.label); }
    };
    _.bindAll(buttonView);
    jQuery('#underscore_button').bind('click', buttonView.onClick);
    //当成员函数作为事件监听的时候,因为默认的事件监听,this都会指向当前事件源
    //bindAll之后可以保证onClick中的this仍指向buttonView
    

    3、once

    结构

    _.once(function) 
    

    说明

    能确保func只调用一次,如果用func返回一个什么对象,这个对象成了单例。

    举例

    var initialize = _.once(createApplication);
    initialize();
    initialize();
    

    4、warp

    结构

    _.wrap(function, wrapper) 
    

    说明

    可以将函数再包裹一层,返回一个新的函数,新的函数里面可以调用原来的函数,可以将原函数的处理结果再处理一次返回

    举例

    var hello = function(name) { return "hello: " + name; };
    //wrap返回一个新的函数
    hello = _.wrap(hello, function(func) {
      // 在新函数内部可以继续调用原函数
      return "before, " + func("moe") + ", after";
    });
    hello();
    
    

    5、delay

    结构

    _.delay(function, wait, [*arguments])   
    

    说明

    在指定的wait后面执行函数与setTimeout功能一致

    举例

    var log = _.bind(console.log, console);
    _.delay(log, 1000, 'logged later');
    

    6、defer

    结构

    _.defer(function, [*arguments])
    
    

    说明

    也是延迟执行方法,不同的是他能保证在当前堆栈中的所有的代码跑完之后再执行function。其实就是setTimeout(fn,1);

    举例

    _.defer(function(){ alert('deferred'); });
    

    7、compose

    结构

    _.compose(*functions) 
    

    说明

    将多个函数处理过程合并,每个函数可以调用前面函数的运行结果,_.compose(func1,func2);相当于func1(func2())

    举例

    var greet    = function(name){ return "hi: " + name; };
    var exclaim  = function(statement){ return statement.toUpperCase() + "!"; };
    var welcome = _.compose(greet, exclaim);
    welcome('moe');
    

    8、after:

    结构

    _.after(count, function)    
    

    说明

    创建一个新的函数,当func反复调用时,count次才调用一次

    举例

    function a(){
        alert("a");
    }
    var afterA = _.after(3,a);
    afterA();//调用
    afterA();//不alert
    afterA();//不alert
    afterA();//调用
    
    

    9、memoize

    结构

    _.memoize(function, [hashFunction]) 
    

    说明

    该方法可以缓存函数返回结果,如果一个函数计算需要很长的时间,多次反复计算可以只计算一次缓存结果,默认的缓存key是函数调用时的第一个参数,也可以自己定义function(第二个参数)来计算key

    举例

    _.memoize = function(func, hasher) {
        var memo = {};//缓存存放位置
         //_.indentity默认取数组第一个元素
        hasher || (hasher = _.identity);
        return function() {
          var key = hasher.apply(this, arguments);
          return _.has(memo, key) ? memo[key] : (memo[key] = func.apply(this, arguments));
        };
      };
    
    

    二、对象方法介绍

    1、keys

    结构

    _.keys(object) 
    

    说明

    可以非常方便地返回一个object自身所有的key,但不包含从原型链继承下来的

    举例

    function Student(name, age) {
        this.name = name;
        this.age = age;
    }
    var xiaoming = new Student('小明', 20);
    _.keys(xiaoming); // ['name', ‘age']
    

    2、allKeys

    结构

    _.memoize(function, [hashFunction]) 
    

    说明

    除了object自身的key,还包含从原型链继承下来的

    举例

    function Student(name, age) {
        this.name = name;
        this.age = age;
    }
    Student.prototype.school = 'No.1 Middle School';
    var xiaoming = new Student('小明', 20);
    _.allKeys(xiaoming); // ['name', 'age', 'school']
    
    

    3、values

    结构

    _.values(object) 
    

    说明
    和keys()类似,values()返回object自身但不包含原型链继承的所有值

    举例

    var obj = {
        name: '小明',
        age: 20
    };
    _.values(obj); // ['小明', 20]
    
    

    4、mapObject

    结构

    _.mapObject(object, iteratee, [context]) 
    

    说明
    就是针对object的map版本

    举例

    var obj = { a: 1, b: 2, c: 3 };
    // 注意传入的函数签名,value在前,key在后:
    _.mapObject(obj, (v, k) => 100 + v); // { a: 101, b: 102, c: 103 }
    
    

    5、invert

    结构

    _.invert(object) 
    

    说明
    把object的每个key-value来个交换,key变成value,value变成key

    举例

    var obj = {
        Adam: 90,
        Lisa: 85,
        Bart: 59
    };
    _.invert(obj); // { '59': 'Bart', '85': 'Lisa', '90': 'Adam' }
    
    

    6、extend

    结构

    _.extend(destination, *sources) 
    

    说明
    把多个object的key-value合并到第一个object并返回

    举例

    var a = {name: 'Bob', age: 20};
    _.extend(a, {age: 15}, {age: 88, city: 'Beijing'}); 
    // {name: 'Bob', age: 88, city: 'Beijing'}
    // 变量a的内容也改变了:
    a; // {name: 'Bob', age: 88, city: ‘Beijing'}
    注意:如果有相同的key,后面的object的value将覆盖前面的object的value
    

    7、extendOwn

    结构

    _.extendOwn(destination, *sources) 
    

    说明
    extendOwn()和extend()类似,但获取属性时忽略从原型链继承下来的属性

    举例

    _.pick({name: 'moe', age: 50, userid: 'moe1'}, 'name', 'age');//{name: 'moe', age: 50}
    _.pick({name: 'moe', age: 50, userid: 'moe1'}, function(value, key, object) {
      return _.isNumber(value);
    });//{age: 50}
    

    8、clone

    结构

    _.clone(object) 
    

    说明
    如果我们要复制一个object对象,就可以用clone()方法,它会把原有对象的所有属性都复制到新的对象中

    注意:clone()是“浅复制”。所谓“浅复制”就是说,两个对象相同的key所引用的value其实是同一对象
    source.skills === copied.skills; // true
    也就是说,修改source.skills会影响copied.skills。

    举例

    var source = {
        name: '小明',
        age: 20,
        skills: ['JavaScript', 'CSS', 'HTML']
    };
    var copied = _.clone(source)
    

    9、isEqual

    结构

    _.isEqual(object, other) 
    

    说明
    extendOwn()和extend()类似,但获取属性时忽略从原型链继承下来的属性

    举例

    var o1 = { name: 'Bob', skills: { Java: 90, JavaScript: 99 }};
    var o2 = { name: 'Bob', skills: { JavaScript: 99, Java: 90 }};
    
    o1 === o2; // false
    _.isEqual(o1, o2); // true
    
    isEqual()其实对Array也可以比较
    var o1 = ['Bob', { skills: ['Java', 'JavaScript'] }];
    var o2 = ['Bob', { skills: ['Java', 'JavaScript'] }];
    
    o1 === o2; // false
    _.isEqual(o1, o2); // true
    
    
  • 相关阅读:
    CSS3 3D Transform
    js关闭当前页面(窗口)的几种方式总结
    JavaScript书籍阅读
    使用@media screen解决移动web开发的多分辨率问题
    ie678 兼容问题
    JS动态引入js,CSS——动态创建script/link/style标签
    扁平化设计的流行配色方案
    最简单的jquery轮播图
    ie7 z-index 失效问题
    js正则表达式手机号(邮箱)验证
  • 原文地址:https://www.cnblogs.com/fengxuefei/p/6250581.html
Copyright © 2020-2023  润新知