jQuery each函数源码分析


Posted in Javascript onMay 25, 2016

jQuery.each方法用于遍历一个数组或对象,并对当前遍历的元素进行处理,在jQuery使用的频率非常大,下面就这个函数做了详细讲解:

代码

/*! 
* jQuery源码分析-each函数 
* jQuery版本:1.4.2 
* 
* ---------------------------------------------------------- 
* 函数介绍 
* 
* each函数通过jQuery.extend函数附加到jQuery对象中: 
* jQuery.extend({ 
* each: function() {} 
* }); 
* 如果对jQuery.extend函数源码还不了解,可以参考《jQuery源码分析-extend函数》一文 
* 
* jQuery.each方法用于遍历一个数组或对象,并对当前遍历的元素进行处理 
* jQuery.each方法可以为处理函数增加附带的参数(带参数与不带参数的回调使用方法不完全一致) 
* 
* ---------------------------------------------------------- 
* 使用说明 
* each函数根据参数的类型实现的效果不完全一致: 
* 1、遍历对象(有附加参数) 
* $.each(Object, function(p1, p2) { 
* this; //这里的this指向每次遍历中Object的当前属性值 
* p1; p2; //访问附加参数 
* }, ['参数1', '参数2']); 
* 
* 2、遍历数组(有附件参数) 
* $.each(Array, function(p1, p2){ 
* this; //这里的this指向每次遍历中Array的当前元素 
* p1; p2; //访问附加参数 
* }, ['参数1', '参数2']); 
* 
* 3、遍历对象(没有附加参数) 
* $.each(Object, function(name, value) { 
* this; //this指向当前属性的值 
* name; //name表示Object当前属性的名称 
* value; //value表示Object当前属性的值 
* }); 
* 
* 4、遍历数组(没有附加参数) 
* $.each(Array, function(i, value) { 
* this; //this指向当前元素 
* i; //i表示Array当前下标 
* value; //value表示Array当前元素 
* }); 
* ---------------------------------------------------------- 
* 
*/ 
//jQuery.each(), $.each() 
//@param {Object}|{Array} object 需要遍历处理的对象或数组 
//@param {Function} callback 遍历处理回调函数 
//@param {Array} args callback回调函数的附加参数 
each: function(object, callback, args){ 
//当需要遍历的是一个对象时,name变量用于记录对象的属性名 
var name, 
//当需要遍历的是一个数组时,i变量用于记录循环的数组下标 
i = 0, 
//遍历数组长度,当需要遍历的对象是一个数组时存储数组长度 
//如果需要遍历的是一个对象,则length === undefined 
length = object.length, 
//检查第1个参数object是否是一个对象 
//根据object.length排除数组类型,根据isFunction排除函数类型(因为函数也是对象) 
isObj = length === undefined || jQuery.isFunction(object); 
//回调函数具有附加参数时,执行第一个分支 
//if(!!args) { 
if (args) { 
//需要遍历的是一个对象 
if (isObj) { 
//遍历对象属性,name是对象的属性名,再函数顶部已声明 
//许多人不太习惯for(var name in object)方式,如果不进行声明,则name就会被定义为全局变量 
for (name in object) { 
//调用callback回调函数,且回调函数的作用域表示为当前属性的值 
//如:callback() { this; //函数中的this指向当前属性值 
//将each的第3个参数args作为回调函数的附加参数 
if (callback.apply(object[name], args) === false) { 
//如果在callback回调函数中使用return false;则不执行下一次循环 
break; 
} 
} 
} 
//需要遍历的是一个数组 
else { 
//循环长度,循环变量i在函数顶部已定义 
//循环变量的自增在循环内部执行 
for (; i < length;) { 
//调用callback函数,与上面注释的callback调用一致 
//此处callback函数中的this指向当前数组元素 
if (callback.apply(object[i++], args) === false) { 
break; 
} 
} 
} 
} 
//回调函数没有附加参数时,执行第二个分支 
else { 
//需要遍历的是一个对象 
if (isObj) { 
//循环对象的属性名,name在函数顶部已定义 
for (name in object) { 
//调用callback回调函数 
//在不带参数的对象遍历中,作用域表示为当前属性的值 
//且回调函数包含两个参数,第一个数当前属性名,第二个是当前属性值 
//我觉得这句代码修改一下会更好用:if(callback.call(object, name, object[name]) === false) { 
if (callback.call(object[name], name, object[name]) === false) { 
//如果在callback回调函数中使用return false;则不执行下一次循环 
break; 
} 
} 
} 
//需要遍历的是一个数组 
else { 
//这里的for写法有点BT,解释为: 
//var value = object[0]; 
//for(; i < length;) { 
// if(false === callback.call(value, i, value)) { 
// break; 
// } 
// value = object[++i]; 
//} 
//同样,我觉得这里的代码稍加修改会更好用: 
//for (; i < length && false !== callback.call(object, i, object[i++]);) { 
//} 
for (var value = object[0]; i < length && callback.call(value, i, value) !== false; value = object[++i]) { 
} 
} 
} 
//这里返回遍历的对象或数组,但object没有被更改,因此一般不给$.each()赋值 
//但是如果按照我在注释中所修改的写法来使用,且在callback回调函数中对this(即对object的引用)进行了修改 
//则这里返回的object是被修改后的对象或数组 
return object; 
}
Javascript 相关文章推荐
javascript 数组排序函数
Aug 20 Javascript
Mootools 1.2教程 同时进行多个形变动画
Sep 15 Javascript
Jquey拖拽控件Draggable使用方法(asp.net环境)
Sep 28 Javascript
javascript获得网页窗口实际大小的示例代码
Sep 21 Javascript
自己实现ajax封装示例分享
Apr 01 Javascript
jQuery学习笔记之总体架构
Jun 03 Javascript
jquery显示隐藏input对象
Jul 21 Javascript
js实现模拟银行卡账号输入显示效果
Nov 18 Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
Dec 23 Javascript
javascript实现图片左右滚动效果【可自动滚动,有左右按钮】
Sep 19 Javascript
VueJS 取得 URL 参数值的方法
Jul 19 Javascript
一看就会的vuex实现登录验证(附案例)
Jan 09 Javascript
jQuery中的each()详细介绍(推荐)
May 25 #Javascript
jQuery中each()、find()和filter()等节点操作方法详解(推荐)
May 25 #Javascript
jquery easyui datagrid实现增加,修改,删除方法总结
May 25 #Javascript
15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】
May 25 #Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
May 25 #Javascript
js的form表单提交url传参数(包含+等特殊字符)的两种解决方法
May 25 #Javascript
jQuery获取复选框被选中数量及判断选择值的方法详解
May 25 #Javascript
You might like
php日历制作代码分享
2014/01/20 PHP
windows下配置php5.5开发环境及开发扩展
2014/12/25 PHP
7个Javascript地图脚本整理
2009/10/20 Javascript
JS(JQuery)操作Array的相关方法介绍
2014/02/11 Javascript
JS实现超简洁网页title标题跑动闪烁提示效果代码
2015/10/23 Javascript
Json解析的方法小结
2016/06/22 Javascript
jQuery简单实现列表隐藏和显示效果示例
2016/09/12 Javascript
vue 项目地址去掉 #的方法
2018/10/20 Javascript
使用JQuery自动完成插件Auto Complete详解
2019/06/18 jQuery
[01:09:16]DOTA2-DPC中国联赛 正赛 SAG vs Dynasty BO3 第一场 1月25日
2021/03/11 DOTA
使用python检测手机QQ在线状态的脚本代码
2013/02/10 Python
go和python变量赋值遇到的一个问题
2017/08/31 Python
基于数据归一化以及Python实现方式
2018/07/11 Python
python_opencv用线段画封闭矩形的实例
2018/12/05 Python
Django之模板层的实现代码
2019/09/09 Python
Python3之外部文件调用Django程序操作model等文件实现方式
2020/04/07 Python
Python自动化操作实现图例绘制
2020/07/09 Python
CSS3制作彩色进度条样式的代码示例分享
2016/06/23 HTML / CSS
HTML5中如何显示视频呢 HTML5视频播放demo
2013/06/08 HTML / CSS
美国知名的百货清仓店:Neiman Marcus Last Call
2016/08/03 全球购物
Marmot土拨鼠官网:美国专业户外运动品牌
2018/01/11 全球购物
澳大利亚鞋仓库:Shoe Warehouse
2019/07/25 全球购物
为什么使用接口?
2014/08/13 面试题
医学生实习自我鉴定
2013/09/27 职场文书
英语专业毕业生自荐信
2013/10/28 职场文书
会计自荐书
2013/12/02 职场文书
电厂职工自我鉴定
2014/02/20 职场文书
国贸专业自荐信范文
2014/03/02 职场文书
体育专业大学生职业生涯规划范文:打造自己的运动帝国
2014/09/12 职场文书
2014副局长群众路线对照检查材料思想汇报
2014/09/22 职场文书
法人单位授权委托书范文
2014/10/06 职场文书
2015年春节标语口号
2014/12/09 职场文书
食品卫生管理制度
2015/08/06 职场文书
2016个人廉洁自律承诺书
2016/03/25 职场文书
SQL SERVER中常用日期函数的具体使用
2021/04/08 SQL Server
SpringCloud Alibaba项目实战之nacos-server服务搭建过程
2021/06/21 Java/Android