查找:

在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. oracle sqlplus存储过程控制台输出信息

    如果你是使用PL/sql工具,在command 窗口下执行set serveroutput on 然后exec sp;可以看到了或者在sqlplus 中执行上面的代码

  2. python基础——获取对象信息

    python基础——获取对象信息 当我们拿到一个对象的引用时,如何知道这个对象是什么类型.有哪些方法呢? 使用type() 首先,我们来判断对象类型,使用type()函数: 基本类型都可以用type( ...

  3. Java 回调机制的理解

    // 在接口中声明一个处理耗时操作结果的回调方法. // Local 实现这个接口,实现处理耗时操作结果的回调方法. // Local 获得 Remote 对象,在子线程中调用 Remote 的处理耗 ...

  4. 红外解码编码学习----verilog

    在设计中运用红外遥控器可以很好的解决按键缺少的问题,还可以方便的控制产品. 红外发射部分: 红外发射管: 判断红外发射管的好坏 : 电路原理图: 接收部分: 传输的NEC协议: 本实验电路: veri ...

  5. Cocoapods 更新后 使用

    platform:ios,'8.0'target 'APPNAME' do pod 'SMSSDK' pod 'MBProgressHUD', '0.9.1' pod 'AFNetworking', ...

  6. DHCP的若干原理解释

    转自:http://blog.chinaunix.net/uid-22287947-id-1775641.html 搜罗了几种关于dhcp的原理和过程解释 DHCP(Dynamic Host Conf ...

  7. sqlplus使用(一)

    一,sqlplus 环境变量 sqlplus的环境变量(来自SQL*Plus® User's Guide and Reference Release 11.2) Parameter or Variab ...

  8. log4j设置日志格式为UTF-8

    想要log4j输出的日志文件的编码格式为UTF-8.正常情况下只需要添加下述的代码即可: log4j.appender.appender_name.Encoding=UTF-8 但是在spring与l ...

  9. php开发(CI框架使用)

    年前接了一个外包项目,要求使用PHP,琢磨来琢磨去,感叹道PHP框架实在是太多了!去知乎搜索一轮,最后决定使用CI, 相关议论如下:https://www.zhihu.com/question/216 ...

  10. 运维自动化之ansible的安装与使用(包括模块与playbook使用)(转发)

    原文  http://dl528888.blog.51cto.com/2382721/1435415 我使用过puppet(地址是http://dl528888.blog.51cto.com/2382 ...