JavaScript(ES2015, ES6)でのループ処理の書き方 – for…of, forEachの使い分け

2020.02.26
スポンサーリンク

概要

JavaScript(ES2015, ES6)で配列やオブジェクト(連想配列)をループさせるとき、for…ofとforEachのどちらを使うべきかをまとめました。

ループ処理ごとの特徴など

  • for…ofはIE11非対応
  • for…ofはArrayやNodeListなどiterableなオブジェクトで使うことができる。ただし、{}で定義したオブジェクト(連想配列)では使うことができないない。
  • iterableではないオブジェクト（{}で定義したオブジェクトなど）の場合は、Object.keys(変数)でキー配列を取得しそれをfor…ofやforEachでループさせる
  • for…in はprototypeで拡張されたプロパティまで含まれてしまう
  • forEachは配列でしか使うことができない(ObjectにforEachメソッドはない)
  • NodeListは配列ではないのでforEachは使えない(for…ofは使える)。ただし、IE以外はNodeListにforEachが実装されているから使うことができる。

以上のことから、IE11を無視するかしないで実装方法は変わってくる。

結論

IE11を無視する場合

  • 配列やiterableなオブジェクトにはfor…ofを使う。ただし、配列のループでindexが必要な場合はforEachを使うべき。
  • ちなみに、AirbnbのESLintではfor…ofは禁止されている。
for (const value of array) {
  console.log(value);
}
array.forEach((value, index) => {
  console.log(`${index}:${value}`);
});

IE11を無視しない場合

array.forEach((value) => {
  console.log(value);
});

Object.keys(obj).forEach((key) => {
  console.log(obj[key]);
});

Array.from(document.querySelectorAll('.hoge'), (el) => {
  el.addEventListener('click', (event) => console.log(event));
});

Array.prototype.forEach.call(document.querySelectorAll('.hoge'), (el) => {
  el.addEventListener('click', (event) => console.log(event));
});
スポンサーリンク

コメント