JavaScriptのfindとfindIndexについて簡単なサンプルコードで解説
11 回閲覧されました
みなさんこんにちは、jonioです。
今回はJavaScriptのfindメソッドとfindIndexメソッドについて簡単なサンプルコードで解説します。
findIndexメソッドとは
配列の中から条件に合う要素の位置(index)を返すメソッドです。
条件に合う要素がなかった時は-1を返します。
サンプルコードで考えます。
サンプルコード
基本の形は下記です。
array.findIndex((要素) => 条件)下記のコードで考えます。
const numbers = [10, 20, 30, 40];
const index = numbers.findIndex(n => n === 30);
console.log(index);3行目の「numbers.findIndex(n => n === 30);」について要素が「n」で条件が「n === 30」です。
[10, 20, 30, 40]の30が該当しますがインデックス番号は2です。
だから4行目は2と出力します。
もし下記の記述になったら配列の要素で条件に該当する要素がないから-1を返します。
const numbers = [10, 20, 30, 40];
const index = numbers.findIndex(n => n === 50);
console.log(index);今の例は配列の要素が値ですがオブジェクトになっていても使うことができます。
下記のコードで考えます。
const rows = [
{ checked: false },
{ checked: true },
{ checked: false }
];
const index = rows.findIndex(r => r.checked);
console.log(index);6行目の条件に当てはまるのは3行目なので8行目は1と出力します。
findメソッドとは
配列の中から条件に合う最初の要素そのものを返すメソッドです。
条件に合う要素がなかったらundefinedを返します。
サンプルコードで考えます。
サンプルコード
本の形は下記です。
array.find((要素) => 条件)下記のコードで考えます。
const numbers = [10, 20, 30, 40];
const result = numbers.find(n => n === 30);
console.log(result);3行目の「numbers.findIndex(n => n === 30);」について要素が「n」で条件が「n === 30」です。
[10, 20, 30, 40]の30が該当します。
だから4行目は30と出力します。
もし下記の記述になったら配列の要素で条件に該当する要素がないからundefinedを返します。
const numbers = [10, 20, 30, 40];
const result = numbers.find(n => n === 50);
console.log(result);