JavaScript 配列検索

1. 配列の検索メソッド (Array Search Methods)

JavaScriptには、配列内を検索するための多様なメソッド（Methods）が用意されています。用途に応じて最適なものを選択することが重要です。

• indexOf()
• lastIndexOf()
• includes()
• find()
• findIndex()
• findLast()
• findLastIndex()

2. JavaScript Array indexOf()

indexOf() メソッドは、配列内の特定の要素を検索し、そのポジション（Position / インデックス）を返します。

注意： 最初のエレメント（Element）のポジションは 0、2番目は 1、というようにカウントされます。

2.1 コード例

配列から "リンゴ" というアイテムを検索します：

const fruits = ["リンゴ", "オレンジ", "リンゴ", "マンゴー"];
// 1を足すことで、人間にとって分かりやすい順序（1番目、2番目...）に変換しています
let position = fruits.indexOf("リンゴ") + 1;

2.2 シンタックス (Syntax)

array.indexOf(item, start)

• アイテムが見つからない場合、indexOf() は -1 を返します。
• 同じアイテムが複数存在する場合、最初に見つかったポジションを返します。

3. JavaScript Array lastIndexOf()

Array.lastIndexOf() は indexOf() とほぼ同じですが、指定したエレメントが最後に出現したポジションを返します。

3.1 コード例

配列から "リンゴ" というアイテムを後方から検索します：

const fruits = ["リンゴ", "オレンジ", "リンゴ", "マンゴー"];
let position = fruits.lastIndexOf("リンゴ") + 1;

3.2 シンタックス (Syntax)

array.lastIndexOf(item, start)

4. JavaScript Array includes()

ECMAScript 2016 (ES2016) で導入された Array.includes() は、配列に特定のエレメントが含まれているかどうかをチェックし、真偽値（Boolean）を返します。

4.1 コード例

const fruits = ["バナナ", "オレンジ", "リンゴ", "マンゴー"];

fruits.includes("マンゴー"); // true を返す

4.2 特徴とシンタックス

array.includes(search-item)

indexOf() との違いとして、includes() は NaN 値のチェックも正しく行うことができます。

4.3 ブラウザサポート

includes() は ES2016 の機能であり、2017年3月以降、すべてのモダンブラウザ（Browsers）でフルサポートされています。

5. JavaScript Array find()

find() メソッドは、テスト用ファンクション（Function / コールバック関数）の条件を満たした最初の配列エレメントの「値」を返します。

以下の例では、18より大きい最初の値を検索して返します：

5.1 コード例

const numbers = [4, 9, 16, 25, 29];
let first = numbers.find(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

このテスト用ファンクションは3つの引数（Arguments）を受け取ります：

1. アイテムのバリュー（Value）
2. アイテムのインデックス（Index）
3. 配列そのもの

5.2 ブラウザサポート

find() は ES6 の機能であり、2017年6月以降、すべてのモダンブラウザでフルサポートされています。

6. JavaScript Array findIndex()

findIndex() メソッドは、テスト用ファンクションの条件を満たした最初の配列エレメントの「インデックス」を返します。

6.1 コード例

以下の例では、18より大きい最初の値のインデックスを取得します：

const numbers = [4, 9, 16, 25, 29];
let firstIndex = numbers.findIndex(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

同様に3つの引数（値、インデックス、配列）を受け取ります。

7. JavaScript Array findLast() メソッド

ES2023 で追加された findLast() メソッドは、配列の末尾から逆順に検索を開始し、条件を満たした最初の（末尾から見て最初の）エレメントの値を返します。

7.1 コード例

const temp = [27, 28, 30, 40, 42, 35, 30];
// 40より大きい値を末尾から検索（この場合、35の前の42が該当）
let high = temp.findLast(x => x > 40);

7.2 ブラウザサポート

findLast() は ECMAScript 2023 の機能です。2023年7月以降、すべてのモダンブラウザでサポートされています。

8. JavaScript Array findLastIndex() メソッド

findLastIndex() メソッドは、配列の末尾から検索を開始し、条件を満たした最初のエレメントの「インデックス」を返します。

8.1 コード例

const temp = [27, 28, 30, 40, 42, 35, 30];
// 40より大きい最後の要素のインデックスを取得
let pos = temp.findLastIndex(x => x > 40);

8.2 ブラウザサポート

findLastIndex() も ES2023 の機能であり、2023年7月よりモダンブラウザで利用可能です。