jQuery 学习笔记之$.each()
2016-10-24 21:55
260 查看
jQuery 学习笔记之$.each()
本文目标
1、$.each()的使用场景
2、实现
continue、
break的效果
学习资料
官方描述文档: http://api.jquery.com/jQuery.each/中文描述文档: http://www.css88.com/jqapi-1.9/jQuery.each/
建议: 如果时间充裕还是看官方文档
官方描述
A generic iterator function, which can be used to seamlessly iterate over both objects and arrays. Arrays and array-like objects with a length property (such as a function’s arguments object) are iterated by numeric index, from 0 to length-1. Other objects are iterated via their named properties.一个被用于遍历对象(objects)和数组(arrays)的迭代函数。数组和有长度属性的类数组(例如一个函数的参赛对象)根据数字索引进行遍历,索引值的范围为0~length-1,其它对象是根据他们的属性名称进行遍历。
调用方式
$.each(param1,param2)
参数说明:
param1: 待遍历的数组(array)或对象(object)
param2: 回调函数,每一个迭代元素都将用于该回调函数。如果param1是数组(或类数组),则回调函数的形式为
Function( Integer indexInArray, Object value ),如果param1是对象,则回调函数的形式为
Function( String propertyName, Object valueOfProperty )
The .each()functionisnotthesameas(selector).each(), which is used to iterate, exclusively, over a jQuery object. The $.each() function can be used to iterate over any collection, whether it is an object or an array. In the case of an array, the callback is passed an array index and a corresponding array value each time. (The value can also be accessed through the this keyword, but Javascript will always wrap the this value as an Object even if it is a simple string or number value.) The method returns its first argument, the object that was iterated.
$.each()与
$(selector).each()不一样,
$(selector).each()仅被用于遍历
jQuery对象。
$.each()用于迭代任何一个集合,这个集合可以是一个对象也可以是一个数组。就数组而言,回调函数每次被执行时传递一个数字下标和下标对应的值。下标对应的值可以利用this`关键字代替,无论这个值是一个简单的字符串还是数字,JavaScript总是将这个值封装成一个对象。这个方法返回它的第一个参数做为返回值。
源码
each: function( obj, callback ) { var length, i = 0; if ( isArrayLike( obj ) ) { length = obj.length; for ( ; i < length; i++ ) { if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) { break; } } } else { for ( i in obj ) { if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) { break; } } } return obj; }
function isArrayLike( obj ) { // Support: iOS 8.2 (not reproducible in simulator) // `in` check used to prevent JIT error (gh-2145) // hasOwn isn't used here due to false negatives // regarding Nodelist length in IE var length = !!obj && "length" in obj && obj.length, type = jQuery.type( obj ); if ( type === "function" || jQuery.isWindow( obj ) ) { return false; } return type === "array" || length === 0 || typeof length === "number" && length > 0 && ( length - 1 ) in obj; }
实现break
、continue
效果
$.each()用于迭代集合中的每一个元素,其效果等同于
for()循环。既然如此,那如何实现
break、
continue的效果呢?
We can break the $.each() loop at a particular iteration by making the callback function return false. Returning non-false is the same as a continue statement in a for loop; it will skip immediately to the next iteration.
for ( ; i < length; i++ ) { if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) { break; } } for ( i in obj ) { if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) { break; } }
由上面的源代码可知,当回调函数中返回
false时,退出循环;当回调函数返回
非false时,本次循环结束,继续下一次循环
意外结果
each()内部根据
isArrayLike()的返回值决定集合的遍历方式,而
isArrayLike()的返回值又受到
length属性的影响。故当集合中含有
length属性时,回调函数可能无法达到预期效果。
return type === "array" || length === 0 || typeof length === "number" && length > 0 && ( length - 1 ) in obj;
example
测试以下四种情况,看看结果与你预期的效果是否一样。function testEach(){ var tObj = {bar: 'foo', length: 10, 9:'a'};//or length: 0 //var tObj = [ "one", "two", "three", "four", "five" ]; //var tObj = { one: 1, two: 2, three: 3, four: 4, five: 5 }; //debugger; $.each(tObj,function(index,value){ alert(this+' '+value); }); }
类数组
上文中有提到类数组,那什么是类数组呢?
对于一个普通的对象来说,如果它的所有property名均为正整数,同时也有相应的length属性,那么虽然该对象并不是由Array构造函数所创建的,它依然呈现出数组的行为,在这种情况下,这些对象被称为“类数组对象”。
资料来源:http://www.jb51.net/article/59169.htm
相关文章推荐
- “jquery中each方法和选择器”的学习笔记
- JQuery中使用.each()遍历元素学习笔记
- jQuery学习笔记-- 元素的each ,对元素集进行迭代
- “jquery于each方法和选择”学习笔记
- JQuery中使用.each()遍历元素学习笔记
- jquery学习笔记-jquery实现无刷新联动
- jquery学习笔记(二)
- jQuery学习笔记:A=A居然有用
- JQuery学习笔记:this表示什么?
- JQuery in Action学习笔记一
- jQuery学习笔记 08
- jQuery-hover(over,out)用法 学习笔记八
- JQuery学习笔记:typeof的使用
- jQuery-DOM对象和jQuery对象及转换 学习笔记二
- jQuery-$选择器 学习笔记三
- jQuery-show()与html()及hide()用法 学习笔记四
- jquery学习笔记-jquery结合showModalDialog实现子页面局部刷新父页面
- JQuery学习笔记(四)
- jQuery 学习笔记(七)
- jQuery学习笔记 03