zoukankan      html  css  js  c++  java
  • 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中的遍历操作就讲这些,接下来继续激情的前进着。。。

  • 相关阅读:
    财务自由之路-我用Airtest刷抖音致富
    Python基础-背单词游戏
    别人是在谈薪酬,而你是在自残
    不写一行代码,使用Airtest完成自动化测试
    精致的JavaScript代码
    浅谈排序二叉树
    JavaScript 生产者消费者模型
    IDEA 激活码全家桶 webStorm亲测可用【更新日期2020.3.30】
    Cocos-JS HTTP网络请求
    初始OpenGL
  • 原文地址:https://www.cnblogs.com/kuailingmin/p/4005735.html
Copyright © 2011-2022 走看看