jQuery.each function

jQuery.each();

http://api.jquery.com/jQuery.each/

Code

// args is for internal usage only
	each: function( obj, callback, args ) {
		var value,
			i = 0,
			length = obj.length,
			isArray = isArraylike( obj );

		if ( args ) {
			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;
					}
				}
			}

		// A special, fast, case for the most common use of each
		} else {
			if ( isArray ) {
				for ( ; i < length; i++ ) {
					value = callback.call( obj[ i ], i, obj[ i ] );

					if ( value === false ) {
						break;
					}
				}
			} else {
				for ( i in obj ) {
					value = callback.call( obj[ i ], i, obj[ i ] );

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

		return obj;
	},

each的主要目的在于可以遍历Array或者Object,或者说统一遍历Array与Object的方法。

其中关键在于isArraylike函数

另外对于forin函数需要注意的就是forin遍历Object时只会遍历出enumerable属性,而对于non-enumerable属性是无法遍历的,同时也可以遍历出从prototype链上继承的属性。

            function Foo(){}

            Foo.prototype = {
                name: 'Will',
                age: '20'
            }

            var a = new Foo();

            a.localtion = 'Guangzhou';

            $.each(a, function(n, v){
                console.log(n, v);
            });

            //localtion Guangzhou
            //name Will
            //age 20

还有一点Object内的属性是无序的。不可以使用forin来遍历数组,因为数组是有序的Object,所以只会遍历出序号,没有任何意义。

https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Statements/for…in

同时里面还有一个不同就在于call与apply的应用,在通常情况下call的性能要高于apply,由其是当有参数的情况下,call的性能要明显优于apply。

isArraylike函数

            function isArraylike( obj ) {
                var length = obj.length,
                    type = jQuery.type( obj );

                if ( jQuery.isWindow( obj ) ) {
                    return false;
                }

                if ( obj.nodeType === 1 && length ) {
                    return true;
                }

                return type === "array" || type !== "function" &&
                    ( length === 0 ||
                    typeof length === "number" && length > 0 && ( length - 1 ) in obj );
            }

这个函数的重点在于最后一句return,return的前半段比较好理解,后半段主要是针对带有参数的函数arguments属性来做判断。因为typeof arguments是Object但是,他的确是Arraylike!

此条目发表在 javascript 分类目录,贴了 标签。将固定链接加入收藏夹。