Internet ExplorerでJavaScriptの配列indexOf()が動かないときの対処法

Internet Explorer（特にIE8以前のバージョン）では、JavaScriptの標準メソッドである Array.indexOf() が実装されていないため、そのまま実行するとエラーが発生します。この問題を解決するには、主に次の2つの方法があります。

方法1：jQuery.inArray() を使う

jQueryを利用しているプロジェクトであれば、Array.indexOf() の代わりに jQuery.inArray() を使うのが最も手軽です。配列の中に指定した値が存在すればそのインデックス番号を、存在しなければ -1 を返します。基本的な挙動は indexOf() と同じです。

jQuery.inArray( value, array [, fromIndex ] )

• value：検索したい値
• array：検索対象の配列
• fromIndex（省略可）：検索を開始するインデックス番号

方法2：Array.prototype.indexOf にポリフィルを追加する

既存のコードを書き換えたくない場合は、Array.prototype.indexOf が未定義の環境に向けて、同等の機能を後から追加する「ポリフィル（代替実装）」を用意する方法が有効です。古いIEにだけコードを適用したい場合は、条件付きコメントと組み合わせると便利です。

実装例

<!--[if lte IE 10]>
<script>
  if (!Array.prototype.indexOf) {
    Array.prototype.indexOf = function (searchElement, fromIndex) {
      if (this === null || this === undefined) {
        throw new TypeError('Array.prototype.indexOf called on null or undefined');
      }
      var len = this.length >>> 0;
      if (len === 0) return -1;

      var n = fromIndex | 0;
      if (n >= len) return -1;

      var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);
      while (k < len) {
        if (k in this && this[k] === searchElement) {
          return k;
        }
        k++;
      }
      return -1;
    };
  }
</script>
<![endif]-->

まず if (!Array.prototype.indexOf) によって、ブラウザが indexOf() をネイティブにサポートしているかを判定し、未対応の環境でのみ独自の実装を追加します。そのため、モダンブラウザの動作には一切影響を与えません。

注意点

• Array.indexOf() はIE9から標準サポートされているため、ポリフィルが本当に必要なのはIE8以前です。
• 条件付きコメントはIE9までで有効な仕組みであり、IE10以降では無視されます。そのため lte IE 10 と記述してもIE10本体には適用されません。IE10以降もまとめて対応したい場合は、条件付きコメントに頼らず、上記のポリフィルを全ブラウザ向けに読み込むのが確実です。
• IEはすでにサポートが終了しているため、可能であればモダンブラウザのみを対象とした設計への移行も検討しましょう。