JavaScript スキルアップ

【JS】配列で条件に合う要素を取得するfindメソッド

こんにちは。
フリーランスでフロントエンドをしているYamatoです。この業界も6年目になります。

今回はJavaScript(以降JS)の配列を扱うときに使うfindメソッドについてサンプルのコード用いて使い方と注意点を解説します。

早速やけど、そもそもfindメソッドで何ができるん??

findメソッドを使うことである配列の中で条件を設定し、その条件にあった最初要素を一つ取得することができます。

findメソッドの基本的な使い方

[配列].find((○○) => 条件 )

で使われ、〇〇のところに配列データが一つづつ入り、条件に合うかどうかのチェックを行います。
詳しく見ていきましょう。

const scores = [10, 20, 40, 30, 60];

const findMethod = scores.find((cur) => cur >= 35)
console.log(findMethod) //👉 40


//上の内容を省略せずに書くとこうなります。
const findMethod = scores.find(function(cur){
 return cur >= 35;
});
console.log(findMethod) //👉 40

実行すると40が返ってきます。
curには配列内の数字が順番に入っていきます。そして今回の条件文は「cur >= 35」です。

今回のサンプルは、「配列の中を順番に確認し、35以上条件に合う最初の要素を取得する」という内容です。

わかりやすくするために流れを書きます。

前提:対象の配列は[10, 20, 40, 30, 60]で、条件は「35以上の数字」である

①最初に10が入るが、不採用🙅‍♂️(35以下の数字だから)

②次に20が入るが、不採用🙅‍♂️(35以下の数字だから)

③次に40が入り、35以上の数字であり条件を満たし、採用🙆‍♂️

④要素が見つかったので終了。
ということで40が返ってきます。

findメソッド使用時の注意点は条件に合う要素を全て取り出すのではなく、最初の一つだけの取得になります。

今回の例では60も条件を満たしますが、すでに条件を満たす数字「40」が見つかってしまったので60を確認する前に関数は終了します。

findメソッドはオブジェクトも取得可能

findメソッドは数字の取得だけではなく、配列に入っているオブジェクトの取得も可能です。
下の例を見てください。

const members = [
  { name: 'Natsumi', old: 21, gender: 'female', height: 158 },
  { name: 'Takashi', old: 18, gender: 'male', height: 180 },
  { name: 'Hitomi', old: 17, gender: 'female', height: 163 },
  { name: 'Jun', old: 32, gender: 'male', height: 165 },
];

const findMember = members.find((member) => member.old === 17)
console.log(findMember)

//上の内容を省略せずに書くとこうなります。
const findMember = members.find(function (member) {
  return member.old === 17;
});
console.log(findMember);

実施結果は、
{ name: 'Hitomi', old: 17, gender: 'female', height: 163 }
となります。

今回の例は「member.old === 17」の条件と一致しているデータを持ってきています。

このようにいろんな情報(オブジェクト)が入った配列データの中からある一つの情報を取得したい時に使うのが有効的です。
実際にJSONデータと組み合わせて使われることが多いです。

条件に合う要素がなければundefinedが返ってくる

条件に合う要素がない時は「undefined」が返ってきます。

const members = [
  { name: 'Natsumi', old: 21, gender: 'female', height: 158 },
  { name: 'Takashi', old: 18, gender: 'male', height: 180 },
  { name: 'Hitomi', old: 17, gender: 'female', height: 163 },
  { name: 'Jun', old: 32, gender: 'male', height: 165 },
];

const findMember = members.find((member) => member.height >= 185)
console.log(findMember)

この時の実行結果は、
undefinedとなります。

条件が「heightの値が185以上」ですが、今のmembersの配列内のオブジェクトで該当するデータがないからです。

findメソッドは第2、第3引数を持てる

結論だけお伝えすると、findメソッドで第2、第3引数を設定して使うことは滅多にないです。(個人的にも一度も使ったことはありません)

一応サラッとだけ書いておきます。

第1引数:配列の各要素 ← 今回のサンプルでだとcurやmember
第2引数:配列の要素番号
第3引数:チェックする配列そのもの

実際にサンプルコードでチェックしてみましょう。

const scores = [10, 20, 40];
const findMethod = scores.find((cur, index, array) =>
  console.log(cur, index, array)
);

結果はこのように返ってきます。

10, 0, [10, 20, 40]
20, 1, [10, 20, 40]
40, 2, [10, 20, 40]

今回の例では条件を設定していないため、配列の数だけ実行されます。つまり3回です。
各行の1番最初の数字は、配列の各要素です。配列の中身の順番通り10→20→40と出ていますね。

各行の2番目の数字は、配列の各要素の順番です。一行目は一番最初の配列要素である10を使っているから「0」。二行目は配列の二番目の要素である20を使っているから「1」。三行目は最後の配列要素の40を使っているから三番目の「2」が出力されます。

各行の最後は全て同じで[10,20,40]が出てきます。これは第3引数はチェックする配列を指すので、今回は[10,20,40]の配列を使っているので、毎回同じものが出力されると言うわけです。


今回は以上となります。
皆さんのJSの理解に繋がっていれば幸いです。
では!


オススメの記事

js-file
【JS】 DOMContentLoaded と load の違いを新人でもわかるように解説

続きを見る


-JavaScript, スキルアップ
-, , , ,