本文部分截取自且行且思

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; }

?

總結

以上是生活随笔為你收集整理的jQuery源码分析-each函数的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。