forEachをIE11で使う方法

6752 ワード
es2015 es6 JavaScript JavaScript テキストリンク

ES2015

JavascriptのES2015(ES6)からは配列を便利に扱えるメソッドが増えましたが、
IE11ではサポートされていないものが多々あります。

詳しい対応状況はこちらが分かりやすいですね↓
http://kangax.github.io/compat-table/es6/

forEachもその一つで、Can I useを確認してみても、

サポートされていない事が分かります。
ですが、実際はひと工夫することでIE11でも使えます。

forEachのIE11対応


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>forEachのIE対応実験</title>
</head>
<body>
  <ul id="box">
    <li>りんご</li>
    <li>みかん</li>
    <li>バナナ</li>
  </ul>
</body>
</html>


//Chromeなどのモダンブラウザではこれで動く
const fruits = document.querySelectorAll('#box li'); //Nodelist;
fruits.forEach(fruit => {
 console.log(fruit.innerText); // りんご, みかん, バナナ
});

//IEだとエラーで動かない
オブジェクトは 'forEach' プロパティまたはメソッドをサポートしていません。

原因は...

IE11はquerySelectorAll等が作るNodelistのforEachに対応していないそうです。
対策としては、このNodelistを配列に変換します。
ですので、元から配列として定義されているオブジェクトに対しては、IE11でもforEachが使えます。


//IEでも動いた！
const fruits = document.querySelectorAll('#box li'); //Nodelist
const fruitsArr = Array.prototype.slice.call(fruits); //Array
fruitsArr.forEach(function(fruit) { //アロー関数はIEでは使えません
  console.log(fruit.innerText); // りんご, みかん, バナナ
});


//こう書いてもOK
const fruits = document.querySelectorAll('#box li'); //Nodelist
Array.prototype.forEach.call(fruits, function(fruit) {
  console.log(fruit.innerText); // りんご, みかん, バナナ
});

参考文献

https://lealog.hateblo.jp/entry/2014/02/07/012014
Array.prototype - JavaScript | MDN
Array.prototype.slice() - JavaScript | MDN

まとめ

他にも通常のfor文にお置き換えるという対応方法もありますが、
今回の対策の方が記述が少なくて済むので、今後も積極的に使っていきたいと思います。