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文にお置き換えるという対応方法もありますが、
今回の対策の方が記述が少なくて済むので、今後も積極的に使っていきたいと思います。