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

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

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

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

JS コード例

let 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メソッドは要素があるかどうかをtrueかfalseで返すシンプルなメソッドです。

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

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

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

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

JS コード例

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

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

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

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

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

JS コード例

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


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

let 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に該当する全ての要素の位置が入る仕組みです。

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

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