22

ES6 では、イテラブルはを許可するオブジェクトでfor... ofあり、Symbol.iterator キーを持ちます。

配列はセットやマップと同様にイテラブルです。問題は、HTMLCollectionとNodeListはイテラブルなのかということです。彼らはそうあるべきですか？

MDN のドキュメントでは、aNodeListがイテラブルであることを示唆しているようです。

for...ofループは NodeList オブジェクトを正しくループしますfor...of(Firefox 13 以降など) 。

これは、Firefox の動作を裏付けているようです。

私は Chrome と Firefox の両方で次のコードをテストしましたが、Firefox はそれらがイテラブルであると認識しているように見えて驚きましたが、Chrome はそうではありません。さらに、Firefox は、HTMLCollectionとによって返されるイテレータNodeListが同一で​​あると考えます。

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>

本当に奇妙で紛らわしいことが 1 つあります。コード スニペットを実行すると、それをコピーして Firefox の実際のファイル/コンソールで実行した場合とは異なる結果が生成されます (特に最後の比較)。ここでのこの奇妙な動作に関する啓発も歓迎します。

4

4 に答える 4

5

残念ながら、まだです。しかし、そうなるまでは、次のように簡単にポリフィルできます。

HTMLCollection.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];
于 2015-08-13T21:57:15.517 に答える
2

Greinerが指摘したように、2014 年に WHATWG の DOM 仕様に のネイティブサポートが追加されましたSymbol.iterator。NodeList

残念ながら、Chrome 51 はそれをサポートする Chrome の最初のバージョンであり、この回答を書いている時点でベータ版がリリースされたばかりです。また、Internet Explorer または Edge のどのバージョンでもサポートされていません。

Symbol.iteratorすべてのブラウザーでのサポートをコードに追加するにNodeListは、次の polyfill を使用します。

NodeList.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];
于 2016-04-29T22:35:25.943 に答える