IT不死旗下博客隆重开通啦,欢迎各位小伙伴们来围观 。

jQuery中的each方法详解

jQuery Xueqi 689℃ 0评论

之前看视频的时候看到jQuery中的 $.each() 的时候,看的似懂非懂的,知道它怎么样用,但不知道为什么可以那样用。今天看了jQuery的源码,研究了一下这个方法。

jQuery中的each方法如下:

// args is for internal usage only
function each( obj, callback, args ) {
	var value,
	i = 0,
	length = obj.length,
	isArray = isArraylike( obj );//判断obj是否为数组
       if ( args ) { // 带args参数的是Jquery自己调用时使用的,我们不去理会它
	  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  
	//一个特殊,快速的最常使用的each
	} else {
	    if ( isArray ) { // 如果是数组,则遍历这个数组
		  for ( ; i < alength; i++ ) {
			// 函数的call调用
			value = callback.call( obj[ i ], i, obj[ i ] );  
                        if ( value === false ) { 
                           //当callback函数执行到提前终止迭代的条件时,终止循环
			   break;
			  }
		   }
		} else {
			for ( i in obj ) { // 迭代对象
			  value = callback.call( obj[ i ], i, obj[ i ] );
                          if ( value === false ) {
				break;
			    }
			}
		}
	}

	return obj;
};
//===============================华丽的分割线========================================
    /*
    描述:对一个类数组或是对象,对数组的每一项/对象的每个属性执行callback方法
         但不会对原数组或者原对象造成影响。该类似于jQuery中的map方法,
    该类似于jQuery中的map方法,对数组中的每一项进行执行回调函数,
    */
    // 小例子 :假设我们要对数组的前两项的值值加倍,这里,没有实际意义,主要看看用法
     
        var res=[];
    /*
        参数i为数组的索引,v为该索引对应的值 
        each方法是这样写的:callback.call( obj[ i ], i, obj[ i ] ); 
    */
    var a=each([1,2,3],function(i,v){
        res.push(v*2); //对值进行加倍操作
        if(i==1){ //如果索引为1,提前终止迭代
            return false; 
        }
    });
    console.log(a); //输出[2,4] 结果确实是加倍了,而且只有两项

//===============================华丽的分割线========================================
另外我们看到,each方法用到了isArrayLike方法,判断一个对象是否是类数组,可以看另一篇文章:
            jQuery中的isArrayLike和type方法

转载请注明:凌风阁 » jQuery中的each方法详解

喜欢 (8)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址