[JavaScript]no-Limit-構文エラー

1923 ワード


JavascriptメソッドgetElementsByClassNameを使用して、同じクラスを持つ複数の要素のリストを巡回します.そして、コードの赤い線が引き出されるにつれて、クロム画面には以下のように説明されています.

getElement sの名前から分かるように、このメソッドは、HTML Collectionというリストを返します.HTML Collectionは配列と類似しており、.lengthに類似した属性もありますが、配列ではありません.
ここでHTML Collectionに対してfor...in文を使用すると、オブジェクトのすべてのiterableプロパティに対して繰り返し操作が実行されます.しかし、HTML Collectionでは、私が望んでいるものではありませんが、iterableプロパティがいくつか存在するため、「重すぎる」というエラーメッセージが表示されます.

コンソールウィンドウでHTML Collectionを撮影すると、こんなに多くのプロパティが表示されますが、1つの画面がすべてキャプチャされていないだけで、HTML Collectionの各要素には2倍以上のプロパティがあります...!重すぎると言えます.
したがって,以下のようにコードを修正するのが最もよい.
const selectedItems = document.getElementsByClassName('selected');
Array.from(selectedItems).forEach(selectedItem => {
  ...
});
ここで、Array.from()メソッドは、HTML collectionなどの類似配列オブジェクトまたはiterableオブジェクトを浅いコピーして、新しい配列オブジェクトを作成する役割を果たす.その後、forEach()メソッドを使用してアレイ内の各要素を巡回し、必要なコードを記述することができる.
参考になる文章
  • no-制限-構文エラー
    https://stackoverflow.com/questions/22754315/for-loop-for-htmlcollection-elements
  • getElementsByClassName
    https://developer.mozilla.org/ko/docs/Web/API/Element/getElementsByClassName
  • HTMLCollection
    https://developer.mozilla.org/ko/docs/Web/API/HTMLCollection