查找:

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

underscore.js依赖库函数分析二(查找)的更多相关文章

  1. underscore.js依赖库函数分析一(遍历)

    Underscore简介: underscore是一个非常简洁,实用的javascript库,和jQuery封装类型差不多,但underscore是backbone的依赖 库,想运行backbone就 ...

  2. underscore.js 源码分析5 基础函数和each函数的使用

    isArrayLike 检测是数组对象还是纯数组 var property = function(key) { return function(obj) { return obj == null ? ...

  3. Vue.js 源码分析(二十七) 高级应用 异步组件 详解

    当我们的项目足够大,使用的组件就会很多,此时如果一次性加载所有的组件是比较花费时间的.一开始就把所有的组件都加载是没必要的一笔开销,此时可以用异步组件来优化一下. 异步组件简单的说就是只有等到在页面里 ...

  4. Vue.js 源码分析(二十六) 高级应用 作用域插槽 详解

    普通的插槽里面的数据是在父组件里定义的,而作用域插槽里的数据是在子组件定义的. 有时候作用域插槽很有用,比如使用Element-ui表格自定义模板时就用到了作用域插槽,Element-ui定义了每个单 ...

  5. Vue.js 源码分析(二十九) 高级应用 transition-group组件 详解

    对于过度动画如果要同时渲染整个列表时,可以使用transition-group组件. transition-group组件的props和transition组件类似,不同点是transition-gr ...

  6. Vue.js 源码分析(二十八) 高级应用 transition组件 详解

    transition组件可以给任何元素和组件添加进入/离开过渡,但只能给单个组件实行过渡效果(多个元素可以用transition-group组件,下一节再讲),调用该内置组件时,可以传入如下特性: n ...

  7. Vue.js 源码分析(二十五) 高级应用 插槽 详解

    我们定义一个组件的时候,可以在组件的某个节点内预留一个位置,当父组件调用该组件的时候可以指定该位置具体的内容,这就是插槽的用法,子组件模板可以通过slot标签(插槽)规定对应的内容放置在哪里,比如: ...

  8. Vue.js 源码分析(二十四) 高级应用 自定义指令详解

    除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令. 官网介绍的比较抽象,显得很高大上,我个人对自定义指令的理解是:当自定义指令作用在一些DOM元素或组件上 ...

  9. Vue.js 源码分析(二十三) 指令篇 v-show指令详解

    v-show的作用是将表达式值转换为布尔值,根据该布尔值的真假来显示/隐藏切换元素,它是通过切换元素的display这个css属性值来实现的,例如: <!DOCTYPE html> < ...

随机推荐

  1. 浅析_tmain()与main()的区别

    转自http://www.jb51.net/article/34516.htm _tmain()是为了支持unicode所使用的main一个别名,既然是别名,应该有宏定义过的,在哪里定义的呢?就在那个 ...

  2. 开启后台 Service 闪退

    04-29 15:36:23.395: E/ActivityThread(15275): Performing stop of activity that is not resumed: {com.e ...

  3. Stuts2的"struts.devMode"设置成true后,不起作用,仍需要重启tomcat

    在项目的struts.xml加入了常量配置:<constant name="struts.devMode" value="true" />后,重启服 ...

  4. JavaWeb学习之转发和重定向、会话技术:cookie、session、验证码实例、URLConnection使用(下载网页)(4)

    1.转发和重定向 HttpServletResponse response 转发: RequestDispatcher dispatcher = request.getRequestDispatche ...

  5. Chrome Crx 插件下载

    扯蛋的GFW屏蔽了google域导致下载Chrome插件加载失败,本人想收集以些chrome的Crx插件,可供直接下载 XMarks - 在不同电脑不同浏览器之间同步书签 下载地址:   http:/ ...

  6. 【翻译十九】-java之执行器

    Executors In all of the previous examples, there's a close connection between the task being done by ...

  7. android 入门-控件 测量状态栏高度

    private ViewTreeObserver viewTreeObserver; /** 获取可見区域高度 **/ WindowManager manager = getWindowManager ...

  8. android 入门-ID

    @+id/btn             //表示在R.java文件里面新增一个id为btn的控件索引,最常用的一种声明控件id的方式. @+android:id/list  //+android:表 ...

  9. WPF MVVM模式下实现ListView下拉显示更多内容

    在手机App中,如果有一个展示信息的列表,通常会展示很少一部分,当用户滑动到列表底部时,再加载更多内容.这样有两个好处,提高程序性能,减少网络流量.这篇博客中,将介绍如何在WPF ListView中实 ...

  10. [Outlook]设置邮件自动接收时间

    [Outlook]设置邮件自动接收时间   找了好久,一直都没设置正常,导致老是收到邮件有延迟,今天头脑清晰,搜了一下,然后自己竟然给找到了,记下来当笔记,好记性不如烂笔头,呵呵   搜索百度&quo ...