[Javascript] IteratorによるforEachは一部未サポート

背景

とある案件で一部ブラウザではサポートされていないメソッドを使用していたことによって、実装した機能のリリース後に未サポートのブラウザを使用している一部のユーザーでエラーが発生してしまうことがありました。

このような例は度々あることかと思いますが、今回はIteratorによるforEachを使用したことで発生した際の記事になります。

forEachの種類

まず前提として、forEachメソッドにはいくつか種類が存在します。
今回取り扱うのは使われることが多そうな「Array」「Map」「Iterator」に対して使用するforEachになります。
他にも種類はあるので、気になる方は以下のリファレンスから調べてみてください。

• Javascriptリファレンス
  ※以降の画像の参照元もこちらになります。

Array.prototype.forEach()

最もよく使われるであろう配列に対して使用するforEachメソッドで、
第一引数から配列の要素、第二引数からインデックスを取得できます。

const array = ["a", "b", "c"];
array.forEach((value, index) => {
    console.log(value);
    console.log(index);
});

// 出力結果
> "a"
> 0
> "b"
> 1
> "c"
> 2

こちらのメソッドはFull supportされています。

Map.prototype.forEach()

Mapに対して使用するforEachメソッドで、
第一引数からMapの要素、第二引数からキーを取得できます。

const map = new Map([
  ["key1", 1],
  ["key2", "string"],
  ["key3", {}],
]);
map.forEach((value, key) => {
    console.log(`key: ${key}, value: ${value}`);
});

// 出力結果
> "key: key1, value: 1"
> "key: key2, value: string"
> "key: key3, value: [object Object]"

こちらのメソッドはFull supportされています。

Iterator.prototype.forEach()

Iteratorに対して使用するforEachメソッドで、
第一引数からIteratorの要素、第二引数からインデックスを取得できます。

const iterator = new Set(["a", "b", "c"]).values();
iterator.forEach((value, index) => {
    console.log(value);
    console.log(index);
});

// 出力結果
> "a"
> 0
> "b"
> 1
> "c"
> 2

こちらのメソッドはSafariでは現在未サポートとなっているため、
主にiOS端末の場合に動作しないことがあります。

Iterator.prototype.forEach()の回避方法

未サポートによるエラーが発生した際の使用例としては、
以下のようなMap型のkeyを使用しようとした処理で実装されていました。

// Map.keys()とするとIteratorになるため、未サポートのforEachを使用する実装になっていた
Map.keys().forEach(key => {// 実行したい処理});

このような場合にIteratorでforEachを回避する方法の紹介です。
※他にも良い方法があればコメントで教えていただけると幸いです。

1. for文を使う

for (let key of Map.keys()) {
// 実行したい処理
};

2. Map.prototype.forEach()を使う

Map.forEach(((value,key) => {
// 実行したい処理
});