2015-07-10 24 views
9

Bir nodeList aracılığıyla döngü için bir forEach kullanıyorum.Bir nodeLet ile js forEach kullanmaList

var array = document.querySelectorAll('items'); 

array.forEach(function (item) { 
    console.log(item); 
}); 

şöyle Benim kodudur Ve bu kod Sonra ben bu kodu değişti birkaç çevrimiçi blog makaleleri okuduktan sonra

Uncaught TypeError: array.forEach is not a function

gibi bir hata atar. Bir nodelist üzerinde forEach çağırmak mümkün değildir ve ne yaptığını Yukarıdaki ikinci kod parçası yapmak neden

[].forEach.call(array, (function (item) { 
    console.log(item); 
})); 

Birisi açıklayabilir misiniz.

+0

Kontrol dışarı [NodeList.js] (vardır değil https://github.com/eorroe/NodeList.js) –

+1

Bunu bir satır deneyin NodeList düzeltme eki http://stackoverflow.com/a/32644632/502860 – imos

cevap

8

Bu, JavaScript'te temel bir şeydir: bir nesneden bir işlev alabilir ve herhangi bir nesneye uygulayabilirsiniz. Yani:ile aradığınızda işlevini uygulayacağınız nesneye ayarlayın. Bu mümkündür, çünkü tüm özellik isimleri vb JavaScript isimleriyle (açıkça konuşan) tanımlanmıştır. daha sonra farklı NodeList.length sanki birşey rağmen işlev Array.forEach olabilir Array.length Yani özelliği length (ve forEach gerektirdiği başka şeyler) ortaya çıkarır şey uyguladı. senin durumunda olur Peki

şudur:

  • querySelectorAll() tip length özelliği göstermiyor olur ve numaralandırılabilirse NodeList, bir nesne döndürür (en çok [] operatör tarafından erişilebilir diyelim); NodeList, forEach işlevini göstermez (görebildiğiniz gibi).E burada: https://developer.mozilla.org/en-US/docs/Web/API/NodeList) - bu fonksiyon bir üzerine uygulanır [].forEach.call(array, …) ile Array.prototype.forEach
  • için bu bir kadar zeki değil kısayol - bu querySelectorAll()
  • [].forEach sonuçlarına doğrudan forEach aramak imkansız bu yüzden bir işlevi döndüren nesne array tarafından başvurulan, tip bir amacı NodeList (yani forEach fonksiyonu vücut this olarak array çağrılır, böylece forEach içinde this.length olduğunda budeğinmektedir array yılındaforEach çünkü Dizisi ve NodeList ortak özelliklerini kullanıyor, NodeList ve gerçek olmayan Dizisi) bu işleri
  • olmanın array rağmen; yani forEachDizisi sahip bazı mülk kullanmak istedi, eğer başarısız olur, ancak NodeList
4

NodeList nesnesi, Array object yönteminin forEach yöntemini içermez. Aşağıdaki kod:

[].forEach.call(array, (function (item) { 
    console.log(item); 
})); 

diziden forEach yöntemi kullanılarak ve bir NodeList geçmektedir.

sahip ve daha iyi arguabiliy Başka bir seçenek, bu gibi bir dizi halinde NodeList dönüştürmek için geçerli:

var myArrayOfNodes = [].slice.call(NodeList); 

Bu Dizi bir NodeList gelen düğümlerin bir dizi oluşturmak için slicemethod nesneleri kullanır. Daha sonra bir dizi gibi bir dizi kullanmak gibi daha iyi bir yaklaşım daha sonra dizi gibi bir nesne

-1

querySelectorAll öğesi bir Array değil array-like nesnesinde alır. Yani ikinci kod örneğinde olduğu gibi kullanmanız gerekir.

+0

Örümceğin yazım gücü –

+0

üzgünüm, ne demek istiyorsun? –

+0

https://en.wikipedia.org/wiki/Duck_typing – atmd