JavaScript

レシピ

配列

配列から特定の値を持つ要素を検索する

配列から特定の値を持つ要素を検索して、該当する要素の位置を取得する方法について解説します。

この記事のポイント

  • 配列の要素を検索するメソッドは5つ
  • 全件検索するときは第2パラメータで検索の開始位置を指定する

目次

配列の要素を連結して1つの文字列を作る

JavaScriptでは、配列から指定したワードを値として持つ要素を探すためのメソッドは次の5つ用意されています。

メソッド名内容
includesメソッド配列に指定した値を持つ要素を持つか調べる。
戻り値は要素が見つかったらtrue、見つからなければfalseになる。
indexOfメソッド配列に指定した値を持つ要素を持つか調べる。
戻り値は要素が見つかった最初の位置(インデックス)を数値で返し、見つからなければ-1になる。
indexOfメソッド配列に指定した値を持つ要素を持つか調べる。
戻り値は要素が見つかった最後の位置(インデックス)を数値で返し、見つからなければ-1になる。
findメソッド配列に要素を探す処理を指定して値を検索する。
戻り値は要素が見つかったら、検索した値のワードを返し、見つからない場合はundefinedになる。
findIndexメソッド配列に要素を探す処理を指定して値を検索する。
戻り値は要素が見つかったら、検索した値のワードを返し、見つからない場合は-1になる。

以降は変数animalsの配列に対して、それぞれのメソッドによる検索を実行し、戻り値を出力します。

コード例

var animals = [ 'cat', 'dog', 'mouse', 'dog', 'fox'];

// includesメソッド
console.log( animals.includes("dog")); // true
console.log( animals.includes("rhinos")); // false
console.log( animals.includes("dog", 3)); // true
console.log( animals.includes("dog", -1)); // false


// indexOfメソッド
console.log( animals.indexOf("dog")); // 1
console.log( animals.indexOf("rhinos")); // -1
console.log( animals.indexOf("dog", 2)); // 3


// lastIndexOfメソッド
console.log( animals.lastIndexOf("dog")); // 3
console.log( animals.lastIndexOf("dog", 2)); // 3


// findメソッド
console.log( animals.find(function(value){
  return value === "fox";
})); // fox

console.log( animals.find(function(value){
  return value === "lion";
})); // undefined


// findIndexメソッド
console.log( animals.findIndex(function(value,key){
  return value === "fox";
})); // 4

console.log( animals.findIndex(function(value,key){
  return value === "lion";
})); // -1

includesメソッドindexOfメソッドlastIndexOfメソッドは第1パラメータに検索するワードを指定し、第2パラメータにはオプションとして検索を開始する位置を指定することができます。

includesメソッドは要素があるかどうかをtruefalseで返すシンプルなメソッドです。

indexOfメソッドlastIndexOfメソッドは要素の位置(インデックス)を数値として取得することができます。
indexOfメソッドは最初に見つかった要素の位置を取得し、lastIndexOfメソッドは反対に最後に見つかった要素の位置を取得します。

findメソッドfindIndexメソッドは検索する処理を指定することができるメソッドです。
findメソッドはマッチした値をそのまま返し、findIndexメソッドは見つかった位置を数値で返します。

配列の末尾から数えて検索開始位置を指定する

3つのメソッドは第2パラメータに検索開始位置を指定できますが、負の値を渡すと末尾からの位置を指定することができます。
以下の例では、indexOfメソッドを末尾から2つ目の要素を検索開始位置にして実行します。

コード例

var animals = [ 'cat', 'dog', 'mouse', 'dog', 'fox'];

console.log( animals.indexOf("dog", -2)); // 3

配列から該当する要素を全て検索する

検索メソッドは見つかった要素の位置(インデックス)や値を1つだけ取得しますが、第2パラメータの検索開始位置を指定することで全件検索を実装することができます。

以下の例では変数animalsの配列から、検索ワードにマッチする全ての値の位置を変数index_arrayに取得します。

コード例

// 配列から特定の値を持つ要素を検索する
var animals = [ 'cat', 'dog', 'mouse', 'dog', 'fox'];


var index_array = new Array();
var index = 0;

var index = animals.indexOf("dog");

while(index !== -1) {
  index_array.push(index);
  index = animals.indexOf("dog", index+1);
}

console.log(index_array);
// (2) [1, 3]

indexOfメソッドを2箇所に書いていますが、1つ目はwhile文の外で呼び出します。
この時点で該当する要素が見つからなかった場合はwhile文の中も処理せずに終了です。

もし該当する要素が見つかった場合、要素の位置をpushメソッドで変数index_arrayに追加します。
続いてすぐに、先ほど追加した位置以降(index+1)より再度indexOfメソッドによる検索を実行し、要素が見つかると次のループ処理に入ります。
この処理を要素が見つからなくなる(-1になる)まで実行していき、while文を抜けた後は変数index_arrayに該当する全ての要素の位置が入る仕組みです。

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。