スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

HTMLCollectionをiterableにする

何の気なしにnpm updateしてbabel6(とcore-js)を更新したら
for(let anchor of element.getElementsByTagName('a'){...}


const [hoge, fuga] = element.getElementsByClassName('piyo');

としていた部分がイテラブルじゃねえよと言われてコケるようになった。
つまりはHTMLCollectionがイテラブルなオブジェクトではなくなってしまった。
Polyfillの仕様変更かあるいはバグか、どちらにせよ困った。

試しにbabel-polyfill(core-js)の適用されていない状態で試してみる。
// Chrome47
HTMLCollection.prototype[Symbol.iterator];
> undefined

// Firefox47
HTMLCollection.prototype[Symbol.iterator];
> function values()

なるほどわからん。
次にcore-jsのreadme.mdにあるDOMイテレーター部分を見てみる。

GitHub - zloirock/core-js: Standard Library
Iterable DOM collections

{
NodeList,
DOMTokenList,
MediaList,
StyleSheetList,
CSSRuleList
}
#values() -> iterator
#keys() -> iterator
#entries() -> iterator
#@@iterator() -> iterator (values)


リストからHTMLCollectionがハブられている……!
core-jsでHTMLCollectionがイテラブルにならないのは仕様だった。
でも更新する前はHTMLCollectionだって確かにイテラブルだったはず。
悪足掻きで変更点を探してみる。

leave iterators only on required DOM collections · zloirock/core-js@8c9295e · GitHub
ぐえー!
モジュールの更に依存モジュールの更新はサイレント過ぎて追いきれない。
重要な点はBabel側のChangelogにも載っけてくだち……。
とりあえず、このままだと困るからなんとか応急処置しなければならない。
if(!HTMLCollection.prototype[Symbol.iterator]){
HTMLCollection.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];
}

よしなんとかなった、まあ動けばいいだろ動けば。
これにて一件落着である。
おしまい。

だがちょっと待って欲しい。
そもそもfor...ofはiteratorに限らずArray-likeなオブジェクトなら回せたはず。
HTMLCollectionとは一体…うごご。
関連記事

コメントの投稿

非公開コメント

すポンサードリンク
最新記事
カテゴリ
DN (57)
CSS (2)
いろいろ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。