解析$.grep()源码及透过$.grep()看(两次取反)!!的作用
先上jquery源码:
grep: function( elems, callback, inv ) {
var retVal,
ret = [],
i = 0,
length = elems.length;
inv = !!inv;
// Go through the array, only saving the items
// that pass the validator function
for ( ; i < length; i++ ) {
retVal = !!callback( elems[ i ], i );
if ( inv !== retVal ) {
ret.push( elems[ i ] );
}
}
return ret;
},
这里的grep(过滤方法)不仅可以过滤数组,还可以过滤jquery中的this(jquery对象)和类数组(arguments);
它可以接受三个参数,第一个参数为需要操作的数组,第二个参数为数组每一项需要进行的回调函数;第三个参数可有可无的布尔值(当第三个参数没有时及undefined或者为null的时候通过!!inv转化为false);
对于callback执行的结果来说可能是布尔值,也可能是null或者undefined;所以又用到了两次取反保证最后得到的是一个布尔值;
callback有两个参数:第一个参数为数组的一个元素,第二个参数为index下标
当第三个参数为false/null或者说没有第三个参数(undefined)的时候;通过if ( inv !== retVal )得到的数组是retVal为true及callback返回为true的,也及是得到的是筛选出来的;如果第三个参数true,通过if ( inv !== retVal )得到的数组是retVal为false及callback返回为false的,也及是得到的是筛选之剩下的(过滤掉的);
1 var arr=$.grep([0,1,2,3,4,5,6],function(n,i){
2 return n>2
3 });
4 上面的例子返回[3,4,5,6],但是我们给inv的值为true,例如
5 var arr=$.grep([0,1,2,3,4,5,6],function(n,i){
6 return n>2
7 },ture);
8 所以现在返回的是[0,1,2],也就是被callback函数过滤掉的元素。
对于两次取反
由于对null与undefined用!操作符时都会产生true的结果,所以用两个感叹号的作用就在于,如果给出了第三个参数且非null/undefined/0""/等值,则inv为true,否则为false。
这样做的目的就是保证inv和retVal的值都只能在true/false中取,而非其它值null/undefined等,为后续判断提供便利。
1 var o={flag:true};
2 var test=!!o.flag;//等效于var test=o.flag||false;当o没有flag属性的时候也可以得到布尔值test
3 alert(test)
解析$.grep()源码及透过$.grep()看(两次取反)!!的作用的更多相关文章
- [源码解析] 从TimeoutException看Flink的心跳机制
[源码解析] 从TimeoutException看Flink的心跳机制 目录 [源码解析] 从TimeoutException看Flink的心跳机制 0x00 摘要 0x01 缘由 0x02 背景概念 ...
- 鸿蒙内核源码分析(Shell编辑篇) | 两个任务,三个阶段 | 百篇博客分析OpenHarmony源码 | v71.01
子曰:"我非生而知之者,好古,敏以求之者也." <论语>:述而篇 百篇博客系列篇.本篇为: v71.xx 鸿蒙内核源码分析(Shell编辑篇) | 两个任务,三个阶段 ...
- 读lodash源码之从slice看稀疏数组与密集数组
卑鄙是卑鄙者的通行证,高尚是高尚者的墓志铭. --北岛<回答> 看北岛就是从这两句诗开始的,高尚者已死,只剩卑鄙者在世间横行. 本文为读 lodash 源码的第一篇,后续文章会更新到这个仓 ...
- 从源码的角度再看 React JS 中的 setState
在这一篇文章中,我们从源码的角度再次理解下 setState 的更新机制,供深入研究学习之用. 在上一篇手记「深入理解 React JS 中的 setState」中,我们简单地理解了 React 中 ...
- 6. SOFAJRaft源码分析— 透过RheaKV看线性一致性读
开篇 其实这篇文章我本来想在讲完选举的时候就开始讲线性一致性读的,但是感觉直接讲没头没尾的看起来比比较困难,所以就有了RheaKV的系列,这是RheaKV,终于可以讲一下SOFAJRaft的线性一致性 ...
- 不能再被问住了!ReentrantLock 源码、画图一起看一看!
前言 在阅读完 JUC 包下的 AQS 源码之后,其中有很多疑问,最大的疑问就是 state 究竟是什么含义?并且 AQS 主要定义了队列的出入,但是获取资源.释放资源都是交给子类实现的,那子类是怎么 ...
- 硬核剖析ThreadLocal源码,面试官看了直呼内行
工作面试中经常遇到ThreadLocal,但是很多同学并不了解ThreadLocal实现原理,到底为什么会发生内存泄漏也是一知半解?今天一灯带你深入剖析ThreadLocal源码,总结ThreadLo ...
- opencv源码阅读之——iOS的两条接口UIImageToMat()和MatToUIImage()
本文为作者原创,未经允许不得转载:原文由作者发表在博客园: http://www.cnblogs.com/panxiaochun/p/5387743.html 在ios下开发基于opencv的程序时经 ...
- 【一起学源码-微服务】Nexflix Eureka 源码八:EurekaClient注册表抓取 精妙设计分析!
前言 前情回顾 上一讲 我们通过单元测试 来梳理了EurekaClient是如何注册到server端,以及server端接收到请求是如何处理的,这里最重要的关注点是注册表的一个数据结构:Concurr ...
随机推荐
- hello, angular
开始系统学习一下angular!首先是hello world.根据官网给出的例子,我们一下做出下面这个东西: <!DOCTYPE html> <html ng-app> < ...
- 浏览器插件-ActiveX
浏览器插件:B/S模式下通过在客户端浏览器安装插件调用外设或者处理特殊格式数据. 常用插件有身份证阅读器.sim卡阅读器.银行卡校验插件.手写板插件.小键盘插件: 处理表格数据的华表插件.图片合成插件 ...
- XML操作:1.XML类(http://blog.csdn.net/happy09li/article/details/7460521)
XML绑定TreeView private void XmlOperation_Load(object sender, EventArgs e) { path = AppDomain.CurrentD ...
- 命令行创建maven模块工程
上一边文章,借助外部eclipse来创建模块项目,本文直接使用maven命令来创建 mvn archetype:generate -DgroupId=com.mycompany.demo -Darti ...
- 让div变得大方美观 bootstrap
<div class="panel panel-default "> <div class="panel-heading"> <h ...
- ADO.NET 快速入门(四):从数据库填充 DataSet
从数据库获取数据很容易,处理数据更容易.如果想要从数据库获取只进.只读的数据流结果集,你可以使用 DataReader 执行命令并且检索它.关于如何使用 DataReader,请参考:使用 OLE D ...
- stm32上的Lava虚拟机开发进度汇报(4)
这段时间颓废了,基本上没在弄这个东西. 主要是因为前段时间把代码基本上写完之后,但是问题一大堆,除了自己写的几个简单测试程序,其他现成的东西没有一个是能正常运行的,很是郁闷,也不知道哪里有错误,所以放 ...
- Codeforces Round #333 (Div. 2) A. Two Bases 水题
A. Two Bases Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/602/problem/ ...
- python常用功能总结
经常写python,但很多小的点都记不住,每用必查,总结下来,下次查自己的吧. 1.时间获取: import time print time.strftime("%Y-%m-%d %H:% ...
- C语言经典算法100例(二)
11.判断某一年是否是闰年. //判断某一年份是否是闰年 int IsLeapYear(int year) { return (year % 400 == 0 || (year % 4 == 0) & ...