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 相关文章推荐
JQuery 风格的HTML文本转义
Jul 01 Javascript
解决jquery的.animate()函数在IE6下的问题
Dec 03 Javascript
基于jQuery的试卷自动排版系统实现代码
Jan 06 Javascript
jquery下为Event handler传递动态参数的代码
Jan 06 Javascript
IE6/7/8中Option元素未设value时Select将获取空字符串
Apr 07 Javascript
setinterval()与clearInterval()JS函数的调用方法
Jan 21 Javascript
JavaScript控制两个列表框listbox左右交换数据的方法
Mar 18 Javascript
jQuery使用Layer弹出层插件闪退问题
Dec 22 Javascript
Angular CLI 安装和使用教程
Sep 13 Javascript
vue jsx 使用指南及vue.js 使用jsx语法的方法
Nov 11 Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
Nov 26 Javascript
JS typeof fn === 'function' &amp;&amp; fn()详解
Aug 22 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中创建和调用webservice接口示例
2014/07/25 PHP
php在线解压ZIP文件的方法
2014/12/30 PHP
php使用substr()和strpos()联合查找字符串中某一特定字符的方法
2015/05/12 PHP
php使用pear_smtp发送邮件
2016/04/15 PHP
PHP常用算法和数据结构示例(必看篇)
2017/03/15 PHP
tp5框架使用cookie加密算法实现登录功能示例
2020/02/10 PHP
基于jquery的一行代码轻松实现拖动效果
2010/12/28 Javascript
javascript对数组的常用操作代码 数组方法总汇
2011/01/27 Javascript
javascript的原生方法获取数组中的最大(最小)值
2012/12/19 Javascript
只需一行代码,轻松实现一个在线编辑器
2013/11/12 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
2014/03/14 Javascript
Jquery 点击按钮自动高亮实现原理及代码
2014/04/25 Javascript
js的for in循环和java里foreach循环的区别分析
2015/01/28 Javascript
浏览器中url存储的JavaScript实现
2015/07/07 Javascript
解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法
2015/12/03 Javascript
JavaScript进阶练习及简单实例分析
2016/06/03 Javascript
easyui tree带checkbox实现单选的简单实例
2016/11/07 Javascript
Js自动截取字符串长度,添加省略号(……)的实现方法
2017/03/06 Javascript
第一个Vue插件从封装到发布
2017/11/22 Javascript
JS排序算法之希尔排序与快速排序实现方法
2017/12/12 Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
2018/03/06 Javascript
JavaScript中concat复制数组方法浅析
2019/01/20 Javascript
JS实现返回上一页并刷新页面的方法分析
2019/07/16 Javascript
python实现对excel进行数据剔除操作实例
2017/12/07 Python
Python Pandas 如何shuffle(打乱)数据
2019/07/30 Python
使用Pyhton集合set()实现成果查漏的例子
2019/11/24 Python
tensorflow 环境变量设置方式
2020/02/06 Python
python如何从键盘获取输入实例
2020/06/18 Python
Python建造者模式案例运行原理解析
2020/06/29 Python
css3实现垂直下拉动画菜单示例
2014/04/22 HTML / CSS
全球采购的街头服饰和帽子:Urban Excess
2020/10/28 全球购物
护理专业推荐信
2013/11/07 职场文书
小学运动会开幕词
2015/01/28 职场文书
毕业纪念册寄语大全
2015/02/26 职场文书
运动会通讯稿100字
2015/07/20 职场文书
正确使用MySQL update语句
2021/05/26 MySQL