💨

【JavaScript】配列から特定条件を満たす最初の要素のインデックスを返す

2024/03/31に公開

findIndexメゾットについて

findIndexメソッドは、配列内の要素が指定したテスト関数を満たす最初のインデックスを返します。見つからない場合は-1を返します。

findIndexのサンプルコード

findIndexを使用して、ステータスが1のデータのインデックスを見つける方法は以下の通りです。

処理の流れ(知りたい方はクリックしてください)

①データの準備: オブジェクトの配列dataを用意します。各オブジェクトにはid、status、checkのプロパティが含まれています。
②findIndexの使用: findIndexメソッドを使用して、配列data内のオブジェクトを順番にチェックします。テスト関数data => data.status === 1を各要素に適用し、その結果を評価します。
③条件のチェック: テスト関数は、オブジェクトのstatusプロパティが1であるかどうかをチェックします。
④最初のマッチの検出: 配列内でテスト関数が最初に真となる(つまり、statusが1である)要素のインデックスを見つけます。
⑤結果の出力: 最初に条件を満たす要素のインデックスをコンソールに出力します。この例では、最初の要素(インデックス0)が条件にマッチするため、0が出力されます。
⑥マッチしない場合: 配列内のどの要素もテスト関数を満たさない場合、findIndexは-1を返します。

const data = [
  { id: 1, status: 1, check: false },
  { id: 2, status: 1, check: true },
  { id: 3, status: 2, check: false },
  { id: 4, status: 1, check: true },
];

const index = data.findIndex(data => data.status === 1);
console.log(index); // 0, 最初に条件を満たす要素のインデックス

実践的な応用例

ユーザー入力によるアイテム検索

ユーザーの入力(例:名前)を基にリストから対応するアイテムのインデックスをfindIndexで検索し、リアルタイム検索やオートコンプリートに活用します。

const users = [
  { id: 1, name: 'John', status: 1 },
  { id: 2, name: 'Jane', status: 2 },
  { id: 3, name: 'Doe', status: 1 },
];
const userInput = 'John';
const index = users.findIndex(user => user.name === userInput);
console.log(index !== -1 ? `ユーザーは${index}番目` : 'ユーザーが見つかりません');
// "ユーザーは0番目" を出力

条件を満たすアイテムへのアクション実行

特定の条件(例:ステータスが'pending')を満たすアイテムをfindIndexで見つけ、それに対してアクション(更新や削除など)を行います。ToDoリストのタスク管理に適しています。

const tasks = [
  { id: 1, name: 'タスク1', status: 'complete' },
  { id: 2, name: 'タスク2', status: 'pending' },
  { id: 3, name: 'タスク3', status: 'in progress' },
];

const statusToFind = 'pending';
const index = tasks.findIndex(task => task.status === statusToFind);
if (index !== -1) {
  tasks[index].status = 'complete';
  console.log(`タスク${index}を完了に更新`);
  // "タスク1を完了に更新" を出力
} else {
  console.log('対象タスクが見つかりません');
}

まとめ

似たようなメゾットや処理

Discussion