zoukankan      html  css  js  c++  java
  • underscore.js依赖库函数分析二(查找)

     查找:

           在underscore.js封装了对dom查找的操作,find()和filter()函数,find()函数的查找操作是返回首个与条件相符的元素值,filter()函数是找到与条件相符的所有元素,则返回的就是一个数组,如果没有找到符合条件,则返回一个空的数组。接下来一个个分析:

    find()函数:

         该函数根据iterator迭代器中的自定义函数条件,在集合列表中查找符合条件的第一个元素,如果找到,则返回第一个元素,否则返回“undefined”。

         实例:

       

    /**
     * Created by 蒯灵敏 on 14-10-5.
     */
    $(function(){
        var  list = [1,2,3,4,5];
        var first = _.find(list,function(n){
                return (!( n % 2 == 0));
        });
        console.log(first);
    });

    运行结果测返回第一个符合条件的元素 1,单纯看例子很简单,如果分析源码就会发现设计者的思路是怎么实现这个的,

    源码:

        // Return the first value which passes a truth test. Aliased as `detect`.
        _.find = _.detect = function(obj, iterator, context) {
            // result存放第一个能够通过验证的元素
            var result;
            // 通过any方法遍历数据, 并记录通过验证的元素
            any(obj, function(value, index, list) {
                // 如果处理器返回的结果被转换为Boolean类型后值为true, 则记录当前值并返回当前元素
                if (iterator.call(context, value, index, list)) {
                    result = value;
                    return true;
                }
            });
            return result;
        };

    在上面的例子中我们给find()函数传入的是一个集合,到源码这里参数为obj,程序拿到这个集合直接递给了一个any的函数进行真正的逻辑处理,看下这个any到底是怎么处理查找操作的:

    源码:

        // Determine if at least one element in the object matches a truth test.
        // Delegates to **ECMAScript 5**'s native `some` if available.
        // Aliased as `any`.
        var any = _.some = _.any = function(obj, iterator, context) {
            // 如果没有指定处理器参数, 则使用默认的处理器函数,该函数会返回参数本身
            iterator || (iterator = _.identity);
            var result = false;
            //如果obj参数为空则返回一个false值参数
            if (obj == null) return result;
            // 优先调用宿主环境提供的some方法
            if (nativeSome && obj.some === nativeSome) return obj.some(iterator, context);
            // 迭代集合中的元素
            each(obj, function(value, index, list) {
                if (result || (result = iterator.call(context, value, index, list))) return breaker;
            });
    
            //这里返回一个boolean值参数
            return !!result;
        };

    注:这里返回值得写法是双感叹号“!!”,说明下,javascript是弱类语音,变量没有固定的类型,于是通过这种在表达式或变量前面添加符号的方式来声明类型,这里的双感叹号将后面表达式或变量转换成boolean类型,如同三元表达式,

    看下面的代码就能一目了然:

    var val = !!document.getElementById

    换种思路呈现:

    var val  = document.getElementById ? true : false; 

     以上是find()函数的源码分析,下面是filter()函数

    filter()函数:

        该函数根据iterator迭代器的自定义函数条件,在集合列表中寻找符合条件的元素,返回出来的是一个数组。

        实例:

       

    /**
     * Created by 蒯灵敏 on 14-10-5.
     */
    $(function(){
        var  list = [1,2,3,4,5];
        var first = _.filter(list,function(n){
                return (!( n % 2 == 0));
        });
        console.log(first);
    });

    这段代码把符合条件的元素返回成一个数组,结果是[1,3,5]

     源码:

        // Return all the elements that pass a truth test.
        // Delegates to **ECMAScript 5**'s native `filter` if available.
        // Aliased as `select`.
        _.filter = _.select = function(obj, iterator, context) {
            //设置返回参数
            var results = [];
            if (obj == null) return results;
            // 优先调用宿主环境提供的filter方法
            if (nativeFilter && obj.filter === nativeFilter) return obj.filter(iterator, context);
            each(obj, function(value, index, list) {
                if (iterator.call(context, value, index, list)) results.push(value);
            });
            return results;
        };

    注:这里obj.filter的用法纯 js的方式实现,现代浏览器已经支持对each, filter, map, reduce的支持,在underscore.js中有些函数都会有个判断规律,就是先判断当前浏览器是否支持一些js原生态的方法,支持则直接调用,不支持走其他的逻辑程序。

    以上是underscore中的查询。还有很多知识点去学,继续激情的前进着。。。

  • 相关阅读:
    字符串编码之一:字符串语法
    PHP进阶学习系列1:字符串编码提纲
    关于技术成长的一些反思
    Yii2学习笔记002---Yii2的控制器和视图
    PHP5.3--PHP7 新特性总结
    计算机软考笔记之《数据库基础》
    计算机软考笔记之《文件结构》
    计算机软考笔记之《抽象数据类型(ADT)》
    计算机软考笔记之《数据压缩》
    计算机软考笔记之《数据结构与算法》
  • 原文地址:https://www.cnblogs.com/kuailingmin/p/4006687.html
Copyright © 2011-2022 走看看