underscore.js依赖库函数分析一（遍历）

Underscore简介：

    underscore是一个非常简洁，实用的javascript库，和jQuery封装类型差不多，但underscore是backbone的依赖 库，想运行backbone就必须先引入underscore.js。“_”开头是依赖库underscore的一个特征，用于区分其他库函数名。“.” 以后就是函数的名称。

 

Underscore函数：

    underscore中封装了60多个函数，供开发者使用，接下来我进行分类一个个分析。

    1.遍历

       在underscore中，提供了each 和map遍历操作，这2个都有一个共同的特征，就是根据一定的条件去遍历集合中的每一个元素。但他们之间的操作方式却是不同的。

         each()函数：

            调用的格式：

               _.each(list,iterator,[context])

              该函数式根据iterator迭代器提供的过滤条件，遍历list列表中的每一个元素。

             源码：

   var each = _.each = _.forEach = function(obj, iterator, context) {

        if (obj == null) return;

        if (nativeForEach && obj.forEach === nativeForEach) {

         //如果宿主环境支持, 则优先调用JavaScript 1.6提供的forEach方法

            obj.forEach(iterator, context);

        } else if (obj.length === +obj.length) {

            // 对[数组]中每一个元素执行处理器方法

            for (var i = 0, length = obj.length; i < length; i++) {

                if (iterator.call(context, obj[i], i, obj) === breaker) return;

            }

        } else {

            // 对{对象}中每一个元素执行处理器方法

            var keys = _.keys(obj);

            for (var i = 0, length = keys.length; i < length; i++) {

                if (iterator.call(context, obj[keys[i]], keys[i], obj) === breaker) return;

            }

        }

    };

         函数思路：如果宿主支持原生的forEach方法，那就是直接调用原生的，如果不支持就走遍历方式，（一般为浏览器或node.js支持原生的forEach方法）。

         这里有一个判断方式很少见，obj.length === +obj.length。

         一般我们判断2个参数“==”用双等于，但这里用全等于“===”，先说下全等于，用双等于我们比对的2个相同的值为true，而全等于比对则返回false,因为全等于不会将比对的对象类型进行转换。后面有个“+”号，作用是将+号后面的操作转换成数字类型。查阅了一下资料：分析了作者为什么用这样的写法：如果obj参数类型是字符串，我们可以拿到length属性，如果是一个function或一个数组，也可以拿到length属性，如果是一个Object对象，我们就拿不到length属性了。对于非数组，非函数，非字符串的我们同for in循环遍历数据。

        用_.each编写的小实例如下：

     

/**

 * Created by 蒯灵敏 on 14-10-4.

 */

$(function(){

    var  list = [1,2,3,4,5];

    _.each(list,function(n){

        if(!(n % 2)){

            console.log(n);

        }

    });

});

　　　　注：上述代码功能是在控制台中输出偶数，结果（2,4）。iterator迭代器是一个自定义的函数。each()函数是没有返回值。

         map()函数：

    　　 调用的格式：

               _.map(list,iterator,[context])

              该函数的功能是根据iterator迭代器的函数，遍历list列表中的每一个元素，在完成列表元素遍历之后该函数将返回一个数组对象。

             先看源码：        

    _.map = _.collect = function(obj, iterator, context) {

        // 用于存放返回值的数组

        var results = [];

        if (obj == null) return results;

        // 优先调用宿主环境提供的map方法

        if (nativeMap && obj.map === nativeMap) return obj.map(iterator, context);

        // 迭代处理集合中的元素

        each(obj, function(value, index, list) {

            // 将每次迭代处理的返回值存储到results数组

            results.push(iterator.call(context, value, index, list));

        });

        //返回结果

        return results;

    };

注：map/collect函数与each的区别在于map/collect会存储每次迭代的返回值, 并作为一个新的数组返回

实例代码如下：

/**

 * Created by 蒯灵敏 on 14-10-4.

 */

$(function(){

    var  list = [1,2,3,4,5];

    var results;

    results =  _.map(list,function(n){

        if(!(n % 2)){

            return  n;

        }

    })

    console.log(results);



});

注：在火狐运行之后的结果是[undefined,2,undefined,4,undefined]

在这个结果中我们可以看出对于不符合条件的数组元素都变成了“undefined”，如果提取出可用数组来还需要一个遍历操作， 代码如下:

$(function(){

    var  list = [1,2,3,4,5];

    var results;

    var _list = [];

    results =  _.map(list,function(n){

        if(!(n % 2)){

            return  n;

        }

    })

    for(var i =  0; i< results.length; i++){

          if(results[i] != undefined){

              _list.push(results[i]);

          }

    }

    console.log(_list);



});

注火狐运行结果是[2,4]

underscore中的遍历操作就讲这些，接下来继续激情的前进着。。。