当前位置: 首页 > 编程日记 > 正文

jquery源码解析:each,makeArray,merge,grep,map详解

jQuery的工具方法,其实就是静态方法,源码里面就是通过extend方法,把这些工具方法添加给jQuery构造函数的。

jQuery.extend({

......

each: function( obj, callback, args ) {   //$.each(arr , function(i,value){}),第三个参数用于内部调用。此方法就是来遍历数组的,然后取数组中的值进行显示。不能改变原数组arr,跟map一样,但是map返回新数组,而each返回原数组。这里跟原生的forEach和map的回调方法参数不一样,原生的回调方法中,第三个参数是原数组,可以在回调方法中改变原数组的值。但jQuery的回调方法,不会传第三个参数。
    var value,
      i = 0,
      length = obj.length,
      isArray = isArraylike( obj );   //是否是类数组或数组,json(不包括jQuery这种对象形式)返回false

if ( args ) {    //jQuery内部使用
      if ( isArray ) {
        for ( ; i < length; i++ ) {
          value = callback.apply( obj[ i ], args );

if ( value === false ) {
            break;
          }
        }
      }

else {
        for ( i in obj ) {
          value = callback.apply( obj[ i ], args );

if ( value === false ) {
            break;
          }
        }
      }

}

else {       //我们在外面调用时,执行的代码
      if ( isArray ) {   //如果是类数组
        for ( ; i < length; i++ ) {
          value = callback.call( obj[ i ], i, obj[ i ] );  //回调方法返回false就停止循环

if ( value === false ) {
            break;
          }
        }
      }

else {
        for ( i in obj ) {  //如果是json对象
          value = callback.call( obj[ i ], i, obj[ i ] );

if ( value === false ) {
            break;
          }
        }
      }
    }

return obj;
  },

trim: function( text ) {   //core_trim是字符串的trim方法
    return text == null ? "" : core_trim.call( text );
  },

makeArray: function( arr, results ) {  //把所有东西转换成数组,$.makeArray(json) -> [],第二个参数是给内部用的
    var ret = results || [];

if ( arr != null ) {
      if ( isArraylike( Object(arr) ) ) {

 //如果arr为数字123,这里会返回false,因为number不是类数组。但是如果是字符串"hello",Object会把它转成具有length的json对象,所以就返回true。字符串是有length属性的。
        jQuery.merge( ret,
          typeof arr === "string" ?
            [ arr ] : arr
        );
      }

else {    //如果传入123,就执行这里,把123push到数组中。假设有第二个参数,$.makeArray(123,{length:0}) ,那么就会出现[].push.call({length:0},123),这里我做了测试,是没有任何问题的,会变成{length:1,0:123}

core_push.call( ret, arr );   
      }
    }

return ret;
  },

inArray: function( elem, arr, i ) {  //元素是否在arr数组中,从i位置开始找。core_indexOf=[].indexOf
    return arr == null ? -1 : core_indexOf.call( arr, elem, i );
  },

merge: function( first, second ) {    //合并数组
    var l = second.length,
      i = first.length,
      j = 0;

if ( typeof l === "number" ) {    //第二个参数,可能不是数组或类数组,特殊json。第一个参数必须是。
      for ( ; j < l; j++ ) {
        first[ i++ ] = second[ j ];
      }
    }

else {
      while ( second[j] !== undefined ) {   //普通json的情况,{0:"0",1:"1"},但必须是0,1,2...这种
        first[ i++ ] = second[ j++ ];
      }
    }

first.length = i;    //当第一个参数,不是数组时,比如是{0:"0",1:"1",length:2},length就需要手动改变

return first;
  },

grep: function( elems, callback, inv ) {

//过滤得到一个新数组,$.grep(arr,function(value,index){ return value>2}),arr数组中大于2的,才会返回生成数组。也就是返回true时,才会返回此值生成数组,第三个参数,true,就代表相反的(小于等于2)返回生成数组

var retVal,
      ret = [],
      i = 0,
      length = elems.length;
    inv = !!inv;    //转换成true or false,不传的时候是undefined,就会变成fase.

for ( ; i < length; i++ ) {
      retVal = !!callback( elems[ i ], i );    //转换成true or false
      if ( inv !== retVal ) {
        ret.push( elems[ i ] );
      }
    }

return ret;
  },

map: function( elems, callback, arg ) {  //支持普通json,数组,类数组,特殊json(jQuery对象形式)

  //$.map(arr,function(value,index){ return }),通过回调,把返回的值组成一个全新的数组,返回全新的数组。第三个参数内部调用
    var value,
      i = 0,
      length = elems.length,
      isArray = isArraylike( elems ),    //数组和类数组都可以,jQuery对象形式也可以
      ret = [];

if ( isArray ) {
        for ( ; i < length; i++ ) {
          value = callback( elems[ i ], i, arg );

if ( value != null ) {   //回调返回的值不是null或者undefined,就存入新数组中
            ret[ ret.length ] = value;
          }
        }

}

else {      //普通json就执行这里,比如:{name:"chaojidan",age:25}
        for ( i in elems ) {
          value = callback( elems[ i ], i, arg );//callback("chaojidan",name)

if ( value != null ) {
            ret[ ret.length ] = value;
          }
        }
    }

return core_concat.apply( [], ret );

//core_concat=[].concat,以防回调方法返回的是数组形式,那么就会出现复合数组,比如:ret = [[1],[2],[3]],通过concat([1],[2],[3]),合并,返回[1,2,3]
  },

......

})

加油!

转载于:https://www.cnblogs.com/chaojidan/p/4156600.html

相关文章:

swift实现提示框第三方库:MBProgressHUD

GitHud的下载地址是&#xff1a;https://github.com/jdg/MBProgressHUD/ 下载完成后&#xff0c;将MBProgressHUD.h和MBProgressHUD.m拖入已经新建好的Swift项目。因为使用的swift语言&#xff0c;所以拖入项目的时候会提示是否新建一个桥接objective-c与swift的文件&#xff…

这段Python代码让程序员赚300W,公司已确认!网友:神操作!

Python到底还能给人多少惊喜&#xff1f;笔者最近看到了这两天关于Python最热门的话题&#xff0c;关于《地产大佬潘石屹学Python的原因》&#xff0c;结果被这个回答惊到了&#xff1a;来源&#xff1a;知乎 https://www.zhihu.com/question/355880221笔者翻了翻那些回答&…

FFmpeg中可执行文件ffmpeg用法汇总

从https://ffbinaries.com/downloads 下载最新的4.1版本的Windows 64位FFmpeg&#xff0c;FFmpeg是一个快速的音频/视频转换工具&#xff0c;FFmpeg可以作为一个命令行程序单独使用。 通过执行以下命令将FFmpeg信息重定位到ffmpeg_help.txt文件中便于查看&#xff0c;其内容如…

下载Ext JS 5.1 gpl版本的方法

先进入官网&#xff1a;http://www.sencha.com然后在导航的Products中选择Sencha Ext JS&#xff0c;会看到以下页面&#xff1a;这时候不要单击Download按钮&#xff0c;而是要单击导航中的DETAILS&#xff0c;页面切换后&#xff0c;就可在底部看到GPL版本的下载按钮了&#…

对MBProgressHUD进行封装并精简使用

几个效果图&#xff1a; 以下源码是MBProgressHUD支持最新的iOS8的版本&#xff0c;没有任何的警告信息 MBProgressHUD.h 与 MBProgressHUD.m MBProgressHUD.hMBProgressHUD.m以下是本人在MBProgressHUD基础上封装的类&#xff0c;觉得部分的使用基于block ShowHUD.h 与 Show…

基于Hash的消息认证码HMAC简介及在OpenSSL中使用举例

HMAC(Hash-based Message Authentication Code)&#xff1a;基于Hash的消息认证码&#xff0c;是一种通过特别计算方式之后产生的消息认证码(MAC)&#xff0c;使用密码散列函数&#xff0c;同时结合一个加密密钥。它可以用来保证数据的完整性&#xff0c;同时可以用来作某个消息…

英特尔发布oneAPI软件计划及beta产品,面向异构计算提供统一可扩展的编程模型

近日&#xff0c;在2019年超级计算大会上&#xff0c;英特尔发布了一项全新软件行业计划oneAPI&#xff0c;助力充分释放高性能计算与人工智能技术融合时代多架构计算的潜力&#xff0c;同时发布了一个oneAPI beta产品。 英特尔oneAPI行业计划&#xff0c;为跨多种包括CPU、GP…

Mac下配置Maven

1.Java环境变量设置就不说。 但是配置Maven需要检查下Java环境变量的设置。需要检查JAVA_HOME环境变量以及Java命令 wanyakundeMacBook-Pro:Library wanyakun$ echo $JAVA_HOME /Library/Java/JavaVirtualMachines/jdk1.7.0_60.jdk/Contents/Home wanyakundeMacBook-Pro:Librar…

UIAlertAction的用法

let alertController UIAlertController(title:"系统提示", message:"您确定要退出程序吗&#xff1f;", preferredStyle: .alert) let cancelAction UIAlertAction(title:"取消", style: .cancel, handler:nil) let okAction UIAlertAction(tit…

在Windows和Linux上编译gRPC源码操作步骤(C++)

gRPC最新发布版本为v1.23.0&#xff0c;下面以此版本为例说明在Windows和Linux下编译过程。 Windows7/10 vs2103编译gRPC源码操作步骤&#xff1a; 1. 需要本机已安装Git、CMake、Perl、Go、yasm&#xff1b; 2. 依次执行如下命令&#xff1a; git clone https://github.co…

这些算法工程师,他们真的是太难了!

现在的算法工程师真的是太难了&#xff01;要让AI会看人眼都分辨不清的医疗影像数据又不够&#xff0c;还得用前沿技术好不容易学会看片&#xff0c;还要让AI会分析病理赋予AI诊断疾病的使命然后几十种模型&#xff0c;N次计算只给一张显卡Boss就问&#xff1a;你打算怎么做&am…

Java 汉子转拼音

1. 引入: pinyin4j-1.1.0 包; http://pan.baidu.com/s/1eQ8a874 2. 转换; private static String ChineseToPinyin(String name){String pinyinName"";char[] nameChar name.toCharArray(); HanyuPinyinOutputFormat defaultFormat new HanyuPinyinOutputFormat()…

Swift - 使用Alamofire通过HTTPS进行网络请求,及证书的使用

&#xff08;本文代码已升级至Swift3&#xff09; 我原来写过一篇文章介绍如何使用证书通过SSL/TLS方式进行网络请求&#xff08;Swift - 使用URLSession通过HTTPS进行网络请求&#xff0c;及证书的使用&#xff09;&#xff0c;当时用的是 URLSession。本文介绍如何使用 Alam…

gRPC简介及简单使用(C++)

gRPC是一个现代的、开源的、高性能远程过程调用(RPC)框架&#xff0c;可以在任何平台运行。gRPC使客户端和服务器端应用程序能够透明地进行通信&#xff0c;并简化了连接系统的构建。gRPC支持的语言包括C、Ruby、Python、Java、Go等。 gRPC默认使用Google的Protocol Buffers&a…

YC中国被撤,陆奇独立运营个人新品牌「奇绩创坛」

整理 | Jane出品 | AI科技大本营&#xff08;ID&#xff1a;rgznai100&#xff09;近日&#xff0c;Y Combinator&#xff08;以下简称 YC&#xff09; 发布消息称&#xff0c;YC 将撤回 YC 中国业务与运营&#xff0c;这一品牌也将停止使用&#xff0c;YC的战略布局将调整重新…

shell 脚本逐行读取多个文件,并逐行对应

#!/bin/bashfor i in seq 448doaaased -n "$i"p num.txtbbbsed -n "$i"p text.txt/root/cooper/sms.pl $aaa $bbbdonenum.txt 记录了348个号码text.txt中记录了348个字段效果是取num.txt中第一行作为第一行参数 取text.txt中第一行作为第二个参数num.txt要…

iOS常用知识点1

多线程、特别是NSOperation 和 GCD 的内部原理。 运行时机制的原理和运用场景。 SDWebImage的原理。实现机制。如何解决TableView卡的问题。 block和代理的&#xff0c;通知的区别。block的用法需要注意些什么。 strong&#xff0c;weak&#xff0c;retain&#xff0c;assign&a…

美团BERT的探索和实践 | CSDN原力计划

扫码参与CSDN“原力计划”作者 | 杨扬 佳昊 金刚等来源 | CSDN原力计划作品*点击阅读原文&#xff0c;查看美团技术团队更多干货文章。背景2018年&#xff0c;自然语言处理&#xff08;Natural Language Processing&#xff0c;NLP&#xff09;领域最激动人心的进展莫过于预训练…

程序员的自我修养--链接、装载与库笔记:可执行文件的装载与进程

可执行文件只有装载到内存以后才能被CPU执行。 1. 进程虚拟地址空间 程序和进程有什么区别&#xff1a;程序(或者狭义上讲可执行文件)是一个静态的概念&#xff0c;它就是一些预先编译好的指令和数据集合的一个文件&#xff1b;进程则是一个动态的概念&#xff0c;它是程序运…

JDBC实例--工具类升级,使用Apache DBCP连接池重构DBUtility,让连接数据库更有效,更安全...

直接使用JDBC访问数据库时&#xff0c;需要避免以下隐患: 1. 每一次数据操作请求都需要建立数据库连接、打开连接、存取数据和关闭连接等步骤。而建立和打开数据库连接是一件既耗资源又费时的过程&#xff0c;如果频繁发生这种数据库操作&#xff0c;势必会使系统性能下降。 2.…

程序员的自我修养--链接、装载与库笔记:Linux共享库的组织

共享库(Shared Library)概念&#xff1a;其实从文件结构上来讲&#xff0c;共享库和共享对象没什么区别&#xff0c;Linux下的共享库就是普通的ELF共享对象。由于共享对象可以被各个程序之间共享&#xff0c;所以它也就成为了库的很好的存在形式&#xff0c;很多库的开发者都以…

iOS下JS与原生OC互相调用

iOS开发免不了要与UIWebView打交道&#xff0c;然后就要涉及到JS与原生OC交互&#xff0c;今天总结一下JS与原生OC交互的两种方式。 JS调用原生OC篇 方式一 第一种方式是用JS发起一个假的URL请求&#xff0c;然后利用UIWebView的代理方法拦截这次请求&#xff0c;然后再做相…

马斯克发首款会上火星的电动皮卡:28万起,可防弹,造型相当“赛博朋克”...

整理 | Jane、非主流出品 | AI科技大本营&#xff08;ID&#xff1a;rgznai100&#xff09;【导读】马斯克今日发布酝酿多年、“真爱系列”的第一辆电动皮卡Cybertruck&#xff0c;Cybertruck 是赛博朋克&#xff08;cyberpunk&#xff09;与卡车&#xff08;truck&#xff09;…

让你提升命令行效率的 Bash 快捷键

为什么80%的码农都做不了架构师&#xff1f;>>> 原文&#xff1a;http://linuxtoy.org/archives/bash-shortcuts.html 生活在 Bash shell 中&#xff0c;熟记以下快捷键&#xff0c;将极大的提高你的命令行操作效率。 编辑命令 Ctrl a &#xff1a;移到命令行首Ct…

程序员的自我修养--链接、装载与库笔记:Windows下的动态链接

Windows下的PE的动态链接与Linux下的ELF动态链接相比&#xff0c;有很多类似的地方&#xff0c;但也有很多不同的地方。 1. DLL简介 DLL即动态链接库(Dynamic-Link Library)的缩写&#xff0c;它相当于Linux下的共享对象。Windows系统中大量采用了这种DLL机制&#xff0c;甚至…

iOS下JS与OC互相调用(一)--UIWebView 拦截URL

1.在JS 中做一次URL跳转&#xff0c;然后在OC中拦截跳转。&#xff08;这里分为UIWebView 和 WKWebView两种&#xff0c;去年因为还要兼容iOS 6&#xff0c;所以没办法只能采用UIWebView来做。&#xff09;2.利用WKWebView 的MessageHandler。3.利用系统库JavaScriptCore&#…

AI换脸鉴别率超99.6%,微软用技术应对虚假信息

来源 | 微软亚洲研究院AI头条&#xff08;ID:MSRAsia&#xff09;近日社交网络上爆红的一款换脸应用&#xff0c;让许多普通用户体验到了跟爱豆同框、与偶像飙戏的快乐&#xff0c;也因数据使用带来的问题陷入了舆论的漩涡——除了用户隐私保障&#xff0c;如何辨别和处理换脸应…

使用Apache Tiles3.x构建界面布局(一)

Tiles是一个免费的开源模板Java应用程序的框架。基于复合模式简化的用户界面的构建。对于复杂的网站仍是最简单、最优雅的方式与任何MVC技术一起工作。Struts2对Tiles提供了支持&#xff0c;如今Tiles发展已有13个年头&#xff0c;成为Apache的一个独立项目&#xff0c;我们可以…

iOS下JS与OC互相调用(二)--WKWebView 拦截URL

在上篇文章中讲述了使用UIWebView拦截URL的方式来处理JS与OC交互。 由于UIWebView比较耗内存&#xff0c;性能上不太好&#xff0c;而苹果在iOS 8中推出了WKWebView。 同样的用WKWebView也可以拦截URL&#xff0c;做JS 与OC交互。关于WKWebView与UIWebView的对比&#xff0c;大…

基于模型的强化学习比无模型的强化学习更好?错!

作者 | Carles Gelada and Jacob Buckman编辑 | DeepRL来源 | 深度强化学习实验室&#xff08;ID:Deep-RL)【导读】许多研究人员认为&#xff0c;基于模型的强化学习&#xff08;MBRL&#xff09;比无模型的强化学习&#xff08;MFRL&#xff09;具有更高的样本效率。但是&…