技術・開発

【JavaScript】IE8以前で配列のindexOfが使えないエラーの対策と代替コード（ポリフィル）

2012年12月4日

JavaScriptで配列内から特定の文字列や値を検索する際、Array.prototype.indexOf を使うと非常に簡単で便利ですよね。

しかし、この便利な indexOf メソッド、実はIE8以前の古いInternet Explorerではサポートされていません。

私自身、IE9を使って動作確認をしていたため全く気付かなかったのですが、Windows XPユーザーの方から「JavaScriptエラーが出るよ！」と報告を受けて調べてみたところ、この仕様が発覚しました。

今回は、IE8以前でも indexOf を使えるようにするための対策（ポリフィル）を備忘録として残しておきます。

対策：IE8以前向けに indexOf を自作して定義する

対策は非常にシンプルです。
JavaScriptファイルの先頭など、indexOf が呼ばれるよりも前の位置に以下の関数を定義しておくだけでOKです。

if (!Array.prototype.indexOf) {
  Array.prototype.indexOf = function(target, index) {
    // 検索開始位置（index）が数値でない場合は0とする
    if (isNaN(index)) {
      index = 0;
    }
    // 配列の要素をループして検索
    for (var i = index; i < this.length; i++) {
      if (this[i] === target) {
        return i; // 見つかったらそのインデックスを返す
      }
    }
    return -1; // 見つからなかったら-1を返す
  };
}

コードの解説

  1. if (!Array.prototype.indexOf) まず、ブラウザが indexOf をサポートしているかどうかを判定します（IE9以上やChrome、Firefoxなどでは既に存在するため、この中の処理はスキップされます）。
  2. 未サポートの場合のみ、Array.prototype に自作の indexOf 関数を追加します。

この代替コード（ポリフィル）を入れておくことで、古いIEでもエラーを吐かずに indexOf で検索ができるようになります。 さらに、第2引数に数値を指定することで「配列の〇番目から検索を開始する」という使い方もできるため、配列内の同じ文言のカウントを取るような処理も問題なく動きます。

IE9からの標準機能とはいえ、XPユーザー（IE8環境）が完全にいなくなるまでは、まだまだこの対策コードが手放せそうにありませんね……。

-技術・開発
-, , , , ,