jQuery 源碼分析(四) each函數 $.each和$.fn.each方法詳解

時間 2020-05-29

標籤 jquery 源碼分析函數 fn.each 方法詳解欄目 JQuery 简体版

原文原文鏈接

$.each通常用來遍歷一個數組或對象，$.fn.each()就是指jQuery實例能夠執行的操做(由於$.fn是jQuery對象的原型)html

$.each用來遍歷一個數組或對象，並依次執行回掉函數，最後返回傳遞的數組或對象，以支持鏈式操做，能夠傳遞三個參數，以下:jquery

　　object　　　待遍歷的對象或數組數組

　　callback　　要執行的函數，該函數能夠帶兩個參數,分別表示該元素的索引(若是遍歷對象則爲鍵名)和值app

writer by:大沙漠 QQ:22969969函數

　　args　　　一個數組，若是設置了該值，則參數2對應的函數裏的參數就是該值，通常能夠忽略源碼分析

$.fn.each就是調用調用$.each來實現的，它傳入的參數1就是當前對象thisthis

例如:spa

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
    <p>1</p>
    <p>2</p>
    <script>
        var A = [11,12,13,14,15] $.each(A,function(index,elem){console.log(index,elem);}) //輸出五行信息，分別爲:0 十一、1 十二、2 1三、3 1四、4 15
 $.each(A,function(){console.log(arguments)},[1,2]) //輸出五行一樣的信息，是一個數組，都是[1,2]
 $('p').each(function(i,elem){ console.log(elem.innerHTML); //輸出一、2
 }) </script>
</body>
</html>

輸出以下:code

源碼分析htm

$.each是經過$.extend()加載進來的，它的實現以下:

// args is for internal usage only
  each: function( object, callback, args ) {        //通用的遍歷迭代方法，用於無縫地遍歷對象和數組。object是待遍歷的對象或數組 args是傳給回調函數callback的參數數組
    var name, i = 0, length = object.length, isObj = length === undefined || jQuery.isFunction( object ); if ( args ) {                                         //若是傳入了參數數組，調用函數的apply方法執行該函數
      if ( isObj ) { for ( name in object ) {                              //對於對象，經過for-in循環遍歷屬性
          if ( callback.apply( object[ name ], args ) === false ) {         //從這裏看出當each()函數傳入了參數3時，參數3會傳遞給參數2所表示的函數
            break; } } } else { for ( ; i < length; ) {                               //對於數組或類數組對象，則經過for 循環遍歷下標
          if ( callback.apply( object[ i++ ], args ) === false ) { break; } } } // A special, fast, case for the most common use of each
    } else {                                              //若是未傳入參數args，則調用函數的call方法執行該方法
      if ( isObj ) { for ( name in object ) {                                //對於對象，經過for-in循環遍歷屬性名
          if ( callback.call( object[ name ], name, object[ name ] ) === false ) {    //從這裏看出當each()函數忽略了參數3時，參數2所表示的函數的兩個參數分別是index位置和當前處理的元素。
            break; } } } else { for ( ; i < length; ) {                                 //對於數組或類數組對象，則經過for 循環遍歷下標
          if ( callback.call( object[ i ], i, object[ i++ ] ) === false ) { break; } } } } return object; },

就是經過for遍歷，依次執行每一個函數，比較簡單的

對於$.fn.each()來講，它的實現代碼以下:

each: function( callback, args ) { return jQuery.each( this, callback, args ); },

參數1傳遞的this，也就是當前jQuery對象，jQuery對象是個類數組，所以會遍歷執行在入口模塊裏保存的全部Dom引用，並依次執行函數

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

jQuery 源碼分析(四) each函數 $.each和$.fn.each方法 詳解

jQuery 源碼分析(四) each函數 $.each和$.fn.each方法詳解