Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
jQuery逆引きリファレンス

jQuery逆引きリファレンス

配列の内容を検索するには?($.inArray)

2015年3月12日

$.inArrayメソッドを使って、配列から特定の要素を検索する方法を解説。Internet Explorer 8以前の環境ではJavaScriptのindexOfメソッドをこれで代替しよう。

  • このエントリーをはてなブックマークに追加

 配列から特定の要素を検索するには、$.inArrayメソッドを利用します。標準のJavaScriptにも同等のメソッドとしてindexOfがありますが、Internet Explorerではバージョン9以降での動作が前提です。Internet Explorer 8以前の環境を想定しなければならない状況がまだまだあることを考えると、現時点では、$.inArrayメソッドを利用するのが無難でしょう*1

  • *1 標準のJavaScriptには、配列を逆順に検索するlastIndexOfメソッドもありますが、jQueryではこれに直接対応するメソッドはありません。

$.inArrayメソッドの基本

 まずは、基本的な例を見ていきます。以下は、配列numbersから数値15を検索する例です。

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function() {
  // 検索対象の配列
  var numbers = [ 1, 15, 30, 45, 60, 75 ];

  console.log($.inArray(15, numbers));  // 結果:1

});
</script>
</body>
</html>
配列numbersから数値15を検索する例(inArray.html)

 $.inArrayメソッドの構文は、以下の通りです。

[構文]$.inArrayメソッド

$.inArray(検索値, 配列)

 戻り値は、配列の先頭要素を0として、初めて見つかった位置を返します(複数の要素が合致する場合にも、最初の1つの位置だけを返します)。

 要素が見つからなかった場合には、$.inArrayメソッドは-1を返します。つまり、配列に特定の要素が存在するかどうかを判定するならば、$.inArrayメソッドの戻り値が-1でないかどうかを確認すればよいわけです。

$.inArrayメソッドの注意点

 ごくシンプルなメソッドですが、注意すべき点もあります。というのも、$.inArrayメソッドによる比較は厳密な===演算子による比較であるという点です。例えば、先ほどのコードの太字部分を以下のように書き換えてみましょう。

JavaScript
console.log($.inArray('15', numbers));
データ型が一致しない例

 結果は-1(=該当する要素はない)となります。配列numbersは数値配列ですが、その検索値はクォート(')でくくられた結果、文字列型と見なされます。結果、同じ15でも型が異なるため、$.inArrayメソッドは「該当する要素はない」と見なすわけです。

検索開始位置を指定する

 $.inArrayメソッドの第3引数には検索開始位置を指定することもできます。先頭要素を0として指定します。

 例えば以下は検索開始位置を2としていますので、検索結果も5に変化し、後方の15に合致していることが確認できます。

JavaScript
console.log($.inArray(15, numbers, 2));
検索開始位置を指定した例

 これを利用して、配列から条件値に合致する全ての要素位置を検出することもできます。

JavaScript
var numbers = [ 1, 15, 30, 45, 60, 15 ];
// 1検索開始位置
var current = -1;

do {
  // 2現在位置の次の要素から値を検索
  current = $.inArray(15, numbers, current + 1);
  // 3結果が-1でない場合にだけ出力
  if (current !== -1) { console.log(current); }

} while (current !== -1);  // 結果:1、5
配列から条件値に合致する全ての要素位置を検出する例

 変数currentは、「現在の検索開始位置」を意味します。デフォルトは先頭の直前としておきます(1)。あとは、この「開始位置 + 1」から検索を開始するようにし、目的の要素が見つかったら、その位置で変数currentを上書きします(2)。

 これによって、次のループは今回見つかった位置の次から検索を開始します。これを$.inArrayメソッドが-1を返すまで繰り返すことで、全ての要素を検索できます。

 なお、要素が見つからなかったことを意味する-1を表示しないよう、3で除外します(=-1でない結果だけを出力)。

処理対象:JavaScriptのindexOfメソッドの代替 カテゴリ:ユーティリティ
API:jQuery.inArray() カテゴリ:Utilities(ユーティリティ)

※以下では、本稿の前後を合わせて5回分(第12回~第16回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

jQuery逆引きリファレンス
12. 配列の内容を順番に加工するには?($.map)

$.mapメソッドを使って、配列やオブジェクトの内容を順に加工する方法を解説。Internet Explorer 8以前の環境ではJavaScriptのmapメソッドをこれで代替しよう。

jQuery逆引きリファレンス
13. 配列から特定の条件で要素を取り出すには?($.grep)

$.grepメソッドを使って、配列から条件に合致した要素だけを取り出す方法を解説。Internet Explorer 8以前の環境ではJavaScriptのfilterメソッドをこれで代替しよう。

jQuery逆引きリファレンス
14. 【現在、表示中】≫ 配列の内容を検索するには?($.inArray)

$.inArrayメソッドを使って、配列から特定の要素を検索する方法を解説。Internet Explorer 8以前の環境ではJavaScriptのindexOfメソッドをこれで代替しよう。

jQuery逆引きリファレンス
15. イベントに応じて処理を実行するには?(イベントメソッド)

イベントの発生に応じて呼び出されるイベントリスナーをjQueryで実装するための基本的な方法を解説する。

jQuery逆引きリファレンス
16. イベントメソッドで提供されないイベントを処理するには?(on)

onメソッドを利用して、jQueryが標準で対応していないJavaScriptイベントにアクセスする方法を説明する。

サイトからのお知らせ

Twitterでつぶやこう!