underscore.js依赖库函数分析二（查找）

时间：2023-01-21 09:09:40

查找：

在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中的查询。还有很多知识点去学，继续激情的前进着。。。

相关文章