BackboneJs笔记之依赖库Underscore.js

Underscore.js是一个简洁、实用的JavaScript库，包含了多个独立的函数在开发中提供调用。

Underscore没有对原生JavaScript对象进行扩展，而是通过调用 _()方法进行封装，封装后的原生js对象便成为了Underscore对象；用value()方法可以获取原生js对象中的数据。

var data = {
    name: "栖溪阁晓生",
    email: "wujiang569@163.com"
}
var object = _(data);
console.log(object.value().name + "_" + object.value().email);

控制台打印结果显示：

Underscore库中有60多个函数，可划分为: 集合类、数组类、功能函数类、对象类、工具函数类。

集合

• each() 和 map()函数：根据一定条件遍历集合中的每一个元素；而each()和map()不同点在于前者无返回值，而后者返回一个过滤之后的新集合。

  调用格式：

  1. _.each(list, iterator, [context])
  2. _.map(list, iterator, [context])

var array = [1,2,3,4,5,6];
// 调用each函数
_.each(array,function(n){
    if ( !( n % 2 ) ) {
        console.log(n);
    }
})

console.log("---------------分割线---------------");

// 调用map()函数
var arr = _.map(array,function(n){
    if( !( n % 2) ) {
        return n;
    }
});
for (var i = 0; i < arr.length; i++) {
    if( arr[i] != undefined ){
        console.log( i + " -> " + arr[i] );
    }
}

控制台打印结果如下：

• find()和filter()函数： 在指定列表或对象中，查找符合条件的元素项；find()返回首个满足条件的元素值，如果未找到则返回"undefined"；filter()返回一个满足条件的数组，如未找到则返回一个空数组。

  调用格式：

  1. _.find(list, iterator, [context])

  2. _.filter(list, iterator, [context])

// 调用find()函数
var arr1 = [2,4,6,8,10,12];
var blnfind = _.find(arr1, function(n){
    return ( !( n % 2 == 0 ) );
});
console.log( blnfind != undefined ? blnfind : "未找到");

// 调用filter()函数
var arr2 = [1,4,3,6,5,8];
var arrFind = _.filter(arr2, function(n){
    return ( !( n % 2 == 0 ));
});
console.log( arrFind.length != 0 ? arrFind.toString() : "未找到");

显示结果：

• max() 和min()函数：返回list列表中的最大值和最小值。

  调用格式：

  1. _.max(list, [iterator], [context])

  2. _.min(list, [iterator], [context])

// 调用max()函数
var max = _.max([24, 57, 13]);
console.log("最大值为：" + max);

// 调用min()函数
var stu = [
    { name: '小三', age: 18 },
    { name: '小四', age: 30 },
    { name: '小五', age: 24 }
];
var min = _.min(stu, function(n){
	return n.age;
});
console.log("年龄最小的是： " + min.name);

显示结果：

• sortBy()和groupBy()函数：对列表或对象进行排序和分组，都返回一个新的对象列表。

  调用格式:

  1. _.strotBy(list, iterator, [context])

  2. _.groupBy(list, iterator, [context])

var stu = [
    { name: '小三', age: 18 },
    { name: '小四', age: 30 },
    { name: '小五', age: 24 }
];

//调用sortBy()函数
var sort = _.sortBy(stu, function(n){
	return n.age;
})
for(var p in sort){
	console.log( sort[p].name + "->" + sort[p].age);
}

//调用groupBy()函数
var group = _.groupBy(stu, function(n){
	return n.age>20;
})
console.log(group);

显示结果：

数组

• first()和last()函数：获取数组首个元素或指定位数的前面数组；获取最后一个元素或指定位数的后面数组。

  var stu = [
      { name: '小三', age: 18 },
      { name: '小四', age: 30 },
      { name: '小五', age: 24 }
  ];
  
  // 调用first()函数
  var first = _.first(stu, 2);
  console.log(first);
  
  // 调用last()函数
  var last = _.last(stu, 2);
  console.log(last);

显示结果：

• indexOf()和lastIndexOf()函数：查找某个元素是否存在于数组中，存在返回对应元素的索引值，不存在则返回-1。

  var stu = ['小一','小二','小三','小四','小五'];
  
  var find = _.indexOf(stu,'小四');
  console.log(find);
  
  var lastFind = _.lastIndexOf(stu,'小二');
  console.log(lastFind);

显示结果：

• without()和union()函数：前者移除数组中指定的元素，后者是将多个元素进行链接，去除重复元素；两者都返回一个新的数组。

  // 调用without()函数
  var newArr1 = _.without([40,60,50,40,4],4,40);
  console.log(newArr1.toString());
  
  // 调用union()函数
  var newArr2 = _.union([1,2,3],[3,4,5],[5,6,7]);
  console.log(newArr2.toString())

显示结果：

函数

• delay()函数：表示推迟一段代码或一个函数的执行。

  var fun = function(v){
  	alert('你输入的是： ' + v);
  }
  // _delay(function, wait, [*arguments])
  _.delay(fun, 3000, "underscore");

• once()函数：用于对项目变量进行初始化赋值。仅执行一次，再次执行无效。

• wrap()函数：包装。把函数本身包装至wrapper中

• compose()函数：返回一个经过多个函数组合后的列表，用于计算数学中一些比较复杂的运算。

对象

• keys()和values()函数：前者返回包含全部key值得数组，后者返回包含全部value值得数组。

  var info = {
      name: '栖溪阁',
      sex: '男',
      email: 'wujiang569@163.com'
  }
  var arrKey = _.keys(info);
  var arrValue = _.values(info);
  
  console.log(arrKey.toString());
  console.log(arrValue.toString());

显示结果：

• pick()和omit()函数：pick()函数可以从指定的对象中挑选出需要的任意key属性，omit()函数能够从指定的对象中排除不需要的任意key属性；两者都返回一个新的对象。

  var data = {
      A: 1,
      B: 2,
      C: 3,
      D: 4
  };
  
  //调用pick函数
  var newData1 = _.pick(data,'B','C');
  console.log(newData1);
  
  //调用omit函数
  var newData2 = _.omit(data,'B','C');
  console.log(newData2);

显示结果：

• defaults()函数：返回一个设置了默认属性内容的对象。

• has()函数：检测对象中是否包含给定的属性，结果返回true或false。

  var info = {
      name: '栖溪阁晓生',
      sex: '男',
      email: 'wujiang569@163.com'
  };
  
  var strShow;
  
  if(_.has(info,'score')){
  	strShow = info.score;
  } else {
  	strShow = "对象中不包含该属性！";
  }
  
  console.log(strShow);

显示结果：

功能

• random()函数：获取指定数字范围内的随机数。

  var intdef = _.random(10);
  var intnum = _.random(10,20);
  console.log("两个随机数分别为： " + intdef + " , " + intnum);

显示结果：

• excape()和unexcape()函数：编码和解码函数。

• template()函数：模板函数。

• chain()函数：调用该函数后，可以采用链式调用。

  var data = [1,2,3,4,5,6,7,8,9,10];
  var find = _.chain(data)
  			.filter(function(num){return num % 2 == 0;})
  			.without(data,2,10)
  			.last()
  			.value();
  console.log("最终值为：" + find);  // 显示结果为 8

参考资料

• Backbone.js实战