博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
解析$.grep()源码及透过$.grep()看(两次取反)!!的作用
阅读量:5025 次
发布时间:2019-06-12

本文共 1496 字,大约阅读时间需要 4 分钟。

先上jquery源码:

1 grep: function( elems, callback, inv ) { 2     var retVal, 3         ret = [], 4         i = 0, 5         length = elems.length; 6     inv = !!inv; 7  8     // Go through the array, only saving the items 9     // that pass the validator function10     for ( ; i < length; i++ ) {11         retVal = !!callback( elems[ i ], i );12         if ( inv !== retVal ) {13             ret.push( elems[ i ] );14         }15     }16 17     return ret;18 },

这里的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>23 });4 上面的例子返回[3,4,5,6],但是我们给inv的值为true,例如5 var arr=$.grep([0,1,2,3,4,5,6],function(n,i){6 return n>27 },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属性的时候也可以得到布尔值test3 alert(test)

 

转载于:https://www.cnblogs.com/cdwp8/p/4153968.html

你可能感兴趣的文章
机器学习好网站
查看>>
python 中的 sys , os 模块用法总结
查看>>
解题:国家集训队 Middle
查看>>
响应者链
查看>>
指针从函数内部带回返回值
查看>>
在使用webView播放flash或视频文件时无法关闭声音的问题
查看>>
redhat 7 源码安装 mysql5.5.49
查看>>
CCP浅谈
查看>>
NAT虚拟网络配置
查看>>
c#部分---需要实例化的内容;
查看>>
销售类
查看>>
技术项目,问题
查看>>
线程池总结
查看>>
Learning to rank (software, datasets)
查看>>
git常见问题
查看>>
.NETFramework:template
查看>>
HM16.0之帧内模式——xCheckRDCostIntra()函数
查看>>
Jmeter性能测试 入门
查看>>
安卓动画有哪几种?他们的区别?
查看>>
Nodejs学习总结 -Express入门(一)
查看>>