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