JavaScript forEach方法

最近看了一些html5和js方面的書，受益不淺，由於看的東西比較多，卻都沒有怎麼靜心來作整理，慢慢來吧，可能最近本身有點兒小緊張。今天跟你們分享下JavaScript的forEach方法（實際上是從《HTML5程序設計》這本書裏看到的一種方法）。

首先說下JavaScript的forEach的標準格式。

爲數組中的每一個元素執行指定操做。

array1.forEach(callbackfn[, thisArg])

參數

定義

array1

必需。 一個數組對象。

callbackfn

必需。 一個接受最多三個參數的函數。 對於數組中的每一個元素，forEach 都會調用callbackfn 函數一次。

thisArg

可選。 可在 callbackfn 函數中爲其引用 this 關鍵字的對象。 若是省略 thisArg，則undefined 將用做 this 值。

若是 callbackfn 參數不是函數對象，則將引起 TypeError 異常。

對於數組中的每一個元素，forEach 方法都會調用 callbackfn 函數一次（採用升序索引順序）。 不爲數組中缺乏的元素調用該回調函數。

除了數組對象以外，forEach 方法可由具備 length 屬性且具備已按數字編制索引的屬性名的任何對象使用。

回調函數語法

回調函數的語法以下所示：

function callbackfn(value, index, array1)

可以使用最多三個參數來聲明回調函數。

回調函數的參數以下所示。

回調參數

定義

value

數組元素的值。

index

數組元素的數字索引。

array1

包含該元素的數組對象。

修改數組對象

forEach 方法不直接修改原始數組，但回調函數可能會修改它。

好吧，上面是從微軟的http://technet.microsoft.com/zh-cn/ff679980%28v=vs.85%29頁面copy過來的，有興趣的直接去那裏看就行了。也就是說通常方法的格式是：

arrayx.forEach(function(value,index,arrayy){…})

但對於NodeList要用下面的寫法。

[].forEach.call(lists,function(valule.index.arrayy){…})

Why can’t I use forEach or map on a NodeList?

NodeList are used very much like arrays and it would be tempting to use Array.prototype methods on them. This is, however, impossible.

JavaScript has an inheritance mechanism based on prototypes. Array instances inherit array methods (such as forEach or map) because their prototype chain looks like the following:

myArray --> Array.prototype --> Object.prototype --> null (the prototype chain of an object can be obtained by calling several times Object.getPrototypeOf)

forEach, map and the likes are own properties of the Array.prototype object.

Unlike arrays, NodeList prototype chain looks like the following:

myNodeList --> NodeList.prototype --> Object.prototype --> null

NodeList.prototype contains the item method, but none of the Array.prototype methods, so they cannot be used on NodeLists.

實例

1. [].forEach.call(document.querySelectorAll('section[data-bucket]'), function(elem, i) {
2.   localStorage['bucket' + i] = elem.getAttribute('data-bucket');
3. });

轉載自奶牛博客