each介紹
jQuery 的 each 方法，作為一個通用遍歷方法，可用於遍歷對象和數組。
語法為：
jQuery.each(object, [callback])
回調函數擁有兩個參數：第一個為對象的成員或數組的索引，第二個為對應變量或內容。
// 遍歷數組 $.each( [0,1,2], function(i, n){ console.log( "Item #" + i + ": " + n ); }); // Item #0: 0 // Item #1: 1 // Item #2: 2
// 遍歷對象 $.each({ name: "John", lang: "JS" }, function(i, n) { console.log("Name: " + i + ", Value: " + n); }); // Name: name, Value: John // Name: lang, Value: JS
退出循環
盡管 ES5 提供了 forEach 方法，但是 forEach 沒有辦法中止或者跳出 forEach 循環，除了拋出一個異常。但是對於 jQuery 的 each 函數，如果需要退出 each 循環可使回調函數返回 false，其它返回值將被忽略。
$.each( [0, 1, 2, 3, 4, 5], function(i, n){ if (i > 2) return false; console.log( "Item #" + i + ": " + n ); }); // Item #0: 0 // Item #1: 1 // Item #2: 2
第一版
那么我們該怎么實現這樣一個 each 方法呢？
首先，我們肯定要根據參數的類型進行判斷，如果是數組，就調用 for 循環，如果是對象，就使用 for in 循環，有一個例外是類數組對象，對於類數組對象，我們依然可以使用 for 循環。
更多關於類數組對象的知識，我們可以查看《JavaScript專題之類數組對象與arguments》
那么又該如何判斷類數組對象和數組呢？實際上，我們在《JavaScript專題之類型判斷(下)》就講過jQuery 數組和類數組對象判斷函數 isArrayLike 的實現。
所以，我們可以輕松寫出第一版：
// 第一版 function each(obj, callback) { var length, i = 0; if ( isArrayLike(obj) ) { length = obj.length; for ( ; i < length; i++ ) { callback(i, obj[i]) } } else { for ( i in obj ) { callback(i, obj[i]) } } return obj; }
中止循環
現在已經可以遍歷對象和數組了，但是依然有一個效果沒有實現，就是中止循環，按照 jQuery each 的實現，當回調函數返回 false 的時候，我們就中止循環。這個實現起來也很簡單：
我們只用把：
callback(i, obj[i])
替換成：
if (callback(i, obj[i]) === false) { break; }
輕松實現中止循環的功能。
this
我們在實際的開發中，我們有時會在 callback 函數中用到 this，先舉個不怎么恰當的例子：
// 我們給每個人添加一個 age 屬性，age 的值為 18 + index var person = [ {name: 'kevin'}, {name: 'daisy'} ] $.each(person, function(index, item){ this.age = 18 + index; }) console.log(person)
這個時候，我們就希望 this 能指向當前遍歷的元素，然后給每個元素添加 age 屬性。
指定 this，我們可以使用 call 或者 apply，其實也很簡單：
我們把：
if (callback(i, obj[i]) === false) { break; }
替換成：
if (callback.call(obj[i], i, obj[i]) === false) { break; }
關於 this，我們再舉個常用的例子：
$.each($("p"), function(){ $(this).hover(function(){ ... }); })
雖然我們經常會這樣寫：
$("p").each(function(){ $(this).hover(function(){ ... }); })
但是因為 $("p").each() 方法是定義在 jQuery 函數的 prototype 對象上面的，而 $.each()方法是定義 jQuery 函數上面的，調用的時候不從復雜的 jQuery 對象上調用，速度快得多。所以我們推薦使用第一種寫法。
回到第一種寫法上，就是因為將 this 指向了當前 DOM 元素，我們才能使用 $(this)將當前 DOM 元素包裝成 jQuery 對象，優雅的使用 hover 方法。
所以最終的 each 源碼為：
function each(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; }
性能比較
我們在性能上比較下 for 循環和 each 函數：
var arr = Array.from({length: 1000000}, (v, i) => i); console.time('for') var i = 0; for (; i < arr.length; i++) { i += arr[i]; } console.timeEnd('for') console.time('each') var j = 0; $.each(arr, function(index, item){ j += item; }) console.timeEnd('each')
這里顯示一次運算的結果：
從上圖可以看出，for 循環的性能是明顯好於 each 函數的，each 函數本質上也是用的 for 循環，到底是慢在了哪里呢？
我們再看一個例子：
function each(obj, callback) { var i = 0; var length = obj.length for (; i < length; i++) { value = callback(i, obj[i]); } } function eachWithCall(obj, callback) { var i = 0; var length = obj.length for (; i < length; i++) { value = callback.call(obj[i], i, obj[i]); } } var arr = Array.from({length: 1000000}, (v, i) => i); console.time('each') var i = 0; each(arr, function(index, item){ i += item; }) console.timeEnd('each') console.time('eachWithCall') var j = 0; eachWithCall(arr, function(index, item){ j += item; }) console.timeEnd('eachWithCall')
這里顯示一次運算的結果：
each 函數和 eachWithCall 函數唯一的區別就是 eachWithCall 調用了 call，從結果我們可以推測出，call 會導致性能損失，但也正是 call 的存在，我們才能將 this 指向循環中當前的元素