forEach()相容所有瀏覽器

ES5新增forEach方法，具體參閱JavaScript Array forEach()一章節。

但內建方法具有一定的瀏覽器相容性，下面就介紹一下如何實現相容性。

程式碼例項如下:

[JavaScript] 純文字檢視 複製程式碼執行程式碼
if (typeof Array.prototype.forEach != "function") {
  Array.prototype.forEach = function (fn, context) {
    for (var k = 0, length = this.length; k < length; k++) {
      if (typeof fn === "function" && Object.prototype.hasOwnProperty.call(this, k)) {
        fn.call(context, this[k], k, this);
      }
    }
  };
}
var func = function (value, index) {
  console.log(index + ":" + value);
}
var arr = ["螞蟻部落", "softwhy.com", "antzone", "青島市南區"];
arr.forEach(func);

上面的程式碼實現相容所有主流瀏覽器的功能，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.if (typeof Array.prototype.forEach != "function") {},判斷當前瀏覽器是否支援forEach()方法。

（2）.Array.prototype.forEach = function (fn, context) {}，如果不支援，那麼就通過原型，為陣列新增一個forEach方法，第一個引數函式，第二個是fn函式的執行上下文物件。

（3）.for (var k = 0, length = this.length; k < length; k++) {},遍歷陣列中的每一個元素。

（4）.if (typeof fn === "function" && Object.prototype.hasOwnProperty.call(this, k)) ，判斷fn是否是一個函式，並且k是否是陣列的索引。下面再做進一步的說明:之所以使用Object.prototype.hasOwnProperty而不是Array.prototype.hasOwnProperty是因為後者被重寫的概率要遠高於前者，如果重寫了前者，那感覺此人腦子是鏽透了。之所以判斷k是否是陣列的索引是因為有些特殊情況，看如下程式碼例項:

[JavaScript] 純文字檢視 複製程式碼執行程式碼
var arr = [1,,,,,,,2];
console.log(arr.length);

控制檯截圖如下:

儘管length值是8，但是其間的3-7的索引並沒有。

（5）.fn.call(context, this[k], k, this)，呼叫相應的函式並傳參。

二.相關閱讀:

（1）.prototype參閱JavaScript prototype原型一章節。

（2）.hasOwnProperty()參閱JavaScript hasOwnProperty()一章節。

（3）.call()參閱JavaScript call()一章節。