BackBone 学习笔记 02 库函数Collections类

    在具体讲Backbone之前，要讲讲其依赖库Underscore，它拥有60多个独立的函数，这些函数能提供非常丰富的实用功能。学好它，能为后续的Backbone提供基础。

    先让大家看段代码

  var data={        Code:1001,        Name:"XiSe"    }

    这是一个原生的JS对象，而Underscore用_()方法可以将原生的JS对象转换成Underscore对象。然后用value()方法提取出数据。

 var obj=_(data); console.log(obj.value().Code+"->"+obj.value().Name);

    那么，你肯定会问，直接用原生对象不更好，更方便？

    前面也说过Underscore有60多个独立函数，我们需要的是要能够使用它，所以将原生的js对象转换成Underscore可不是简单的为了取值。

    Underscore的60多个函数，按照不同对象可分为集合类Collections,数组类Arrays，功能函数Functions,对象Objects,工具函数Utility.这五大类型模块。

    今天就先讲讲Collections:

    它包含了8个函数 each(),map(),find(),filter(),max(),min(),sortBy(),groupBy().

    下面进行逐步介绍其用法。

    一：each()和map()用于遍历对象。

    还是新建个html将之前那3个js引入，然后再新建个js,代码如下。

// JavaScript Document$(function (){        //Collections 集合 函数                //1 遍历 each() map()        var data1=_.each([1,2,3,4,5,6],function (n){        if(!(n%2)){         console.log(n);          //return n;         //没有任何返回内容         //n是形参         }                 });       console.log(data1);       //Array [ 1, 2, 3, 4, 5, 6 ]    var data2=_.map([1,2,3,4,5,6],function (n){        if(!(n%2)){        console.log(n);        return n;        //若不return 则全部undefined        }        });    console.log(data2);    //Array [ undefined, 2, undefined, 4, undefined, 6 ]    /*    each 与map的区别     each 只按过滤条件遍历，该动作无返回内容    map则会返回一个过滤了的数组     该数组与原data长度一样 过滤了的值    被undefined取代         */});

    然后可以在浏览的控制台看出上面2个函数的结果

    第一个each()的结果为先生打出了 2 4 8及符合!(n%2)的结果 最后我还打出了each()之后的值

为Array [ 1, 2, 3, 4, 5, 6 ]，说明,each()函数只是将要遍历的对象一个一个的迭代的放入形参n中

，该动作是没有任何返回内容的。

    接下来看看map()方法，就可以看出它与each()的区别了，虽然都是遍历，但是要返回一个与原对象同样大小的数组，并且过滤了的数据会被undefined取代。所以控制台的结果是Array [ undefined, 2, undefined, 4, undefined, 6 ]。

    二：find()和filter()用于查找,过滤。

    同样，给代码

        //2 过滤 find() filter()    var data3=_.find([2,4,6,8,10,12],function (n){        if(!(n%2==0))        return n;        });    console.log(data3!=undefined?data3:"未找到");    //"未找到"    //返回的是第一个找到的元素 否则undefined length==0        var data4=_.filter([1,2,3,4,5,6],function (n){        if(!(n%2==0))        return n;        });    console.log(data4.length!=0?data4:"未找到");        //Array [ 1, 3, 5 ]    //返回的是所有符合要求的元素的数组      //若是未找到即返回一个空数组 data.length=0

    find()和filter()也是将元素一个一个的放入n中，进行过滤。

    不过区别是find()返回的是第一个找到的元素，如果一个都没找到则返回undefined.

    filter()却是返回所有符合要求的元素的数组。若没有找到则返回一个空数组。

    三：max()和min() 最大小值

        //3 最大小 max() min()    var data5=_.max([1,2,3,4,5,6]);    console.log(data5);    //6    var data6=_.min([1,2,3,4,5,6]);    console.log(data6);    //1        //它 还可以配合迭代器使用    var stu=[{Code:1001,Name:'Xise'},    {Code:1002,Name:'Xise1'},    {Code:1003,Name:'Xise3'}    ];    var data7=_.max(stu,function (obj){        return obj.Code;        });    console.log(data7);    //Object { Code: 1003, Name: "Xise3" }    //同理    var data8=_.min(stu,function (obj){        return obj.Code;        });    console.log(data8);    //Object { Code: 1001, Name: "Xise" }

    大家一看就知道怎么用了，注意的是它可以配合迭代器使用。具体看看上面就能理解了吧。

    四：sortBy()和groupBy() 排序和分组

    先说说排序：

//4 排序与分组 sortBy() groupBy()    var data9=_.sortBy(stu,function (obj){        return obj.Code;        });    for(var i in data9){        console.log(data9[i].Code+"->"+data9[i].Name);        }        /*    "1001->Xise"     "1002->Xise1"     "1003->Xise3"    */

 （stu是最大值最小值那个）使用起来很简单如上。

    比较复杂一点的就是groupBy()

var data10=_.groupBy(stu,function (obj){        return obj.Code>1002;        });    console.log(data10);    //Object { false: Array[2], true: Array[1] }

    这里的分组时分为了2组,true组和false组,Code>1002的会被分到true组，剩下的被分到false组，控制台的结果是:Object { false: Array[2], true: Array[1] }

    这就是groupBy()的用法。

    现在想想，如何把2组中的值取出来呢？

    现学现用，聪明的你一定知道了，不就是遍历嘛...代码如下

    _.each(data10,function(value,key){        if(key=='false'){            console.log(key+"->"+value);                _.each(value,function(value,key){                    console.log(key+"->"+value);                        _.each(value,function(value,key){                            console.log(key+"->"+value);                            });                    });                    }        else{            console.log(key+"->"+value);                _.each(value,function(value,key){                    console.log(key+"->"+value);                        _.each(value,function(value,key){                            console.log(key+"->"+value);                            });                    });                }        });

    今天要讲的就到这里了，那么下次再见。

    提示：学任何东西，得自己实践才能有效果哦!