Czy są to iterables HTMLCollection i NodeList?

Question

W ES6 obiekt for... of jest obiektem, który ma klucz Symbol.iterator.

Tablice są iterables, podobnie jak zestawy i mapy. Pytanie brzmi: czy iterables są HTMLCollection i NodeList? Czy oni powinni być?

Dokumentacja MDN wydaje się sugerować, że NodeList jest iterable.

for...of pętle będzie pętla na liście węzłów obiektów poprawnie w przeglądarkach obsługujących for...of (jak Firefox 13 i później)

To wydaje się potwierdzać zachowanie Firefoksa.

Przetestowałem poniższy kod zarówno w przeglądarce Chrome, jak i Firefox. Zaskoczyło mnie, że Firefox wydaje się, że są to iterables, ale Chrome nie. Ponadto Firefox uważa, że ​​iteratory zwrócone przez HTMLCollection i NodeList są jednym i tym samym.

var col = document.getElementsByClassName('test'); // Should get HTMLCollection of 2 elems 
 
var nod = document.querySelectorAll('.test');  // Should get NodeList of 2 elems 
 
var arr = [].slice.call(col);      // Should get Array of 2 elems 
 

 
console.log(col[Symbol.iterator]); // Firefox: iterator function, Chrome: undefined 
 
console.log(nod[Symbol.iterator]); // Firefox: iterator function, Chrome: undefined 
 
console.log(arr[Symbol.iterator]); // Firefox & Chrome: iterator function 
 
console.log(col[Symbol.iterator] === nod[Symbol.iterator]); // Firefox: true 
 
console.log(col[Symbol.iterator] === arr[Symbol.iterator]); // Firefox: false

<div class="test">1</div> 
 
<div class="test">2</div>

One naprawdę dziwne, mylące rzeczą: bieganie fragment kodu daje inny wynik z kopiowanie i działa w rzeczywistym pliku/konsoli w Firefoksie (szczególnie ostatni porównanie). Powinno być docenione również wszelkie oświecenie w tym dziwnym zachowaniu.

Answer 1

Symbol.iterator wsparcie dla NodeList, HTMLCollection, DOMTokenList i DOMSettableTokenList był discussed i added do ostatniego roku WHATWG's DOM spec.

Answer 2

Niestety, jeszcze nie. Ale dopóki nie są, można łatwo PolyFill je tak:

HTMLCollection.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator]; 

Answer 3

Jak greiner wskazał, native Symbol.iterator wsparcie dla NodeList został dodany do WHATWG za DOM specyfikacji w 2014

niestety Chrome 51 jest Pierwsza wersja Chrome do obsługi, a jego wersja beta została wydana dopiero w momencie pisania tej odpowiedzi. Ponadto nie ma obsługi w żadnej wersji przeglądarki Internet Explorer lub Edge.

Aby dodać Symbol.iterator wsparcie dla NodeList we wszystkich przeglądarkach do kodu, wystarczy kliknąć na poniższy PolyFill:

NodeList.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];