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 相关文章推荐
[原创]后缀就扩展名为js的文件是什么文件
Dec 06 Javascript
ie浏览器使用js导出网页到excel并打印
Mar 11 Javascript
Bootstrap3制作图片轮播效果
May 12 Javascript
Bootstrap教程JS插件弹出框学习笔记分享
May 17 Javascript
js实现简单的网页换肤效果
Jan 18 Javascript
Angular 5.0 来了! 有这些大变化
Nov 15 Javascript
微信小程序模拟cookie的实现
Jun 20 Javascript
vue-cli 项目打包完成后运行文件路径报错问题
Jul 19 Javascript
详解mpvue开发微信小程序基础知识
Sep 23 Javascript
JavaScript碰撞检测原理及其实现代码
Mar 12 Javascript
如何在Express4.x中愉快地使用async的方法
Nov 18 Javascript
uniapp引入支付宝原生扫码插件步骤详解
Jul 23 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实现框架(一)
2006/10/09 PHP
综合图片计数器
2006/10/09 PHP
通过php快速统计某个数据库中每张表的数据量
2012/09/04 PHP
Smarty foreach控制循环次数的一些方法
2015/07/01 PHP
PHP实现文件上传和多文件上传
2015/12/24 PHP
PHP正则匹配到2个字符串之间的内容方法
2018/12/24 PHP
如何在PHP环境中使用ProtoBuf数据格式
2020/06/19 PHP
javascript web页面刷新的方法收集
2009/07/02 Javascript
JavaScript获取flash对象与网上的有所不同
2014/04/21 Javascript
jquery如何把数组变为字符串传到服务端并处理
2014/04/30 Javascript
JS区分浏览器页面是刷新还是关闭
2016/04/17 Javascript
JS实现环形进度条(从0到100%)效果
2016/07/05 Javascript
标准的js无缝滚动效果
2016/08/30 Javascript
浅谈jquery高级方法描述与应用
2016/10/04 Javascript
通过sails和阿里大于实现短信验证
2017/01/04 Javascript
微信小程序实现图片预加载组件
2017/01/18 Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
2017/02/27 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
2017/09/04 Javascript
详解NodeJs开发微信公众号
2018/05/25 NodeJs
vue elementui el-form rules动态验证的实例代码详解
2019/05/23 Javascript
[00:14]PWL:老朋友Mushi拍VLOG与中国玩家问好
2020/11/04 DOTA
Python多进程库multiprocessing中进程池Pool类的使用详解
2017/11/24 Python
matplotlib.pyplot画图 图片的二进制流的获取方法
2018/05/24 Python
如何在Django配置文件里配置session链接
2019/08/06 Python
python 多进程队列数据处理详解
2019/12/23 Python
Python random模块制作简易的四位数验证码
2020/02/01 Python
基于django micro搭建网站实现加水印功能
2020/05/22 Python
python 实现批量图片识别并翻译
2020/11/02 Python
GC是什么?为什么要有GC?
2013/12/08 面试题
人力资源管理专业应届生求职信
2013/09/28 职场文书
医学生实习自荐信
2013/10/01 职场文书
新教师工作感言
2014/02/16 职场文书
工作鉴定评语
2014/05/04 职场文书
县委常委班子对照检查材料思想汇报
2014/09/28 职场文书
有关花店创业的计划书模板
2019/08/27 职场文书
python 遍历磁盘目录的三种方法
2021/04/02 Python