【JavaScript】find()で配列や連想配列から条件を満たす要素を取得する!

エンジニアに特化した転職エージェント!

・IT/Web系エンジニアの経験者の方
・どこの転職エージェントを利用しようか迷っている方

それなら、キッカケエージェントにご相談!

キッカケエージェントでは、少数精鋭のエージェントが、エンジニアの経験やスキル、志向性などをカウンセリングし、的確なアドバイスを提供します!

また、徹底した企業へのヒアリングにより、最適なマッチングを実現し、今では内定率が一般的なエージェントの2倍以上となっています!

転職エージェントに迷っている方、まずは無料でキャリア相談から!




(この記事は2022年11月03日に投稿されました。)

JavaScriptで配列や連想配列から条件を満たす要素を取り出す方法としてfind()があります。

find()とは、指定した配列から条件を満たす要素を取得するメソッドになります。

要素を取得することから、「条件に合う配列の要素」を返り値として返すようになります。

また、条件は直接指定することもできますが、他のオブジェクトのデータを条件の材料として利用することができます。

そして、パラメータである関数の引数を変更することができるので、利便性が高くなります。

また、多次元配列やオブジェクトにも使用することができるので、条件に合う要素を取得したい場合はfind()を使用しましょう。

今回はJavaScriptのfind()で配列や連想配列から条件を満たす要素を取得する方法について紹介していきます。

この記事はこんな方におすすめ
・配列の中から条件に合う要素のみを取得したい場合
・オブジェクトの中から特定のデータ情報を取得したい場合

find()とは

find()とは、配列の中から条件に合う要素を取り出すメソッドになります。

取り出すことができる要素数は1つとなります。

find()の処理イメージ

find()の書き方

find()の書き方は下記のようになります。

対象の配列の後ろにfind()を追記し、()の中にパラメータを指定します。

find()のパラメータ

find()のパラメータは下記のようになります。

  1. コールバック関数(必須):
    条件に合う要素を取り出す処理を関数で指定する
  2. オブジェクト(任意):
    別のオブジェクトを指定する

find()は必須パラメータとして、コールバック関数を指定します。

また、任意パラメータとして、オブジェクトを指定することができます。

find()の返り値

find()の返り値は「条件に合う配列の要素」となります。

find()で配列から条件を満たす要素を取得するサンプルコード

find()で配列から条件を満たす要素を取得するサンプルコードをご紹介します。

ここでは、下記の3つのパターンでfind()を使用します。

  1. 配列に条件を満たす要素が存在する場合
  2. 配列に条件を満たす要素が存在しない場合
  3. 配列に条件を満たす要素が重複して存在する場合

配列に条件を満たす要素が存在する場合

配列に条件を満たす要素が存在する場合にfind()を使用します。

⚫︎ Main.js

実行結果

配列に条件を満たす要素が存在する場合にfind()を使用した結果

find()によって条件に合う要素を取得しています。

そのため配列の中にある「Python」が表示されています。

配列に条件を満たす要素が存在しない場合

配列に条件を満たす要素が存在しない場合にfind()を使用します。

⚫︎ Main.js

実行結果

配列に条件を満たす要素が存在しない場合にfind()を使用した結果

条件に合う要素が存在しない場合は何も取得することができません。

そのため「undefined」が表示されています。

配列に条件を満たす要素が重複して存在する場合

配列に条件を満たす要素が重複して存在する場合にfind()を使用します。

⚫︎ Main.js

実行結果

配列に条件を満たす要素が重複して存在する場合にfind()を使用した結果

条件に合う要素が重複して存在する場合は条件に合う最初の要素を取得します。

今回は、3番目と5番目に「Python」が格納されていますが、3番目の要素が表示されています。

find()で連想配列から条件を満たす要素を取得するサンプルコード

find()で連想配列から条件を満たす要素を取得するサンプルコードをご紹介します。

find()は、連想配列に直接使用することができません。

そのため、キーと値を配列に分けてそれぞれを要素として使用する必要があります。

連想配列から条件を満たすキーを取得する場合

連想配列から条件を満たすキーを取得する場合にfind()を使用します。

⚫︎ Main.js

実行結果

find()で連想配列から条件を満たすキーを取得した結果

find()によって連想配列から条件を満たすキーを要素として取得しています。

そのため、連想配列のキーである「Swift」が表示されています。

連想配列から条件を満たす値を取得する場合

連想配列から条件を満たす値を取得する場合にfind()を使用します。

⚫︎ Main.js

実行結果

find()で連想配列から条件を満たす値を取得した結果

find()によって連想配列から条件を満たす値を要素として取得しています。

そのため、連想配列の値である「ルビィ」が表示されています。

find()で他の要素と比較して条件を満たす値を取得する場合

find()で他の要素と比較して条件を満たす値を取得する場合は、find()のパラメータである「オブジェクト」を指定します。

オブジェクトを指定することで、他の値や配列などを条件の材料として使用することができます。

⚫︎ Main.js

実行結果

find()で他の要素と比較して条件を満たす値を取得した結果

find()によって指定した配列と他の配列を比較して、同じ番号に同じ要素が入っている要素を取得しています。

そのため、4番目の配列が同じ要素であることから「C#」が表示されています。

find()のコールバック関数の引数を変更する場合

find()のコールバック関数は引数を変更することができます。

先程までは、引数を1つだけ指定してしましたが、最大で3つまで指定することができます。

引数が2つの場合

コールバック関数に引数を2つ指定してfind()を使用すると、対象の配列のインデックスを指定することができます。

⚫︎ Main.js

実行結果

find()のコールバック関数の引数を2つ指定して使用した結果

find()のコールバック関数の引数を2つ指定することで、インデックスを指定しながら、条件に合う要素を取得することができます。

そのため、同じ番号に同じ要素が入っている「GAS」が表示されています。

引数が3つの場合

コールバック関数に引数を3つ指定してfind()を使用すると、対象の配列を指定することができます。

⚫︎ Main.js

実行結果

find()のコールバック関数の引数を3つ指定して使用した結果

find()のコールバック関数の引数を3つ指定することで、条件に合う要素を取得しながら元の配列を操作することができます。

そのため、配列の中にある「VBA」が取り出され、指定した配列の「VBA」が「Ruby」に変わって表示されています。

find()で多次元配列から条件を満たす要素を取得する場合

find()で多次元配列から条件を満たす要素を取得します。

2次元配列の場合

2次元配列の場合にfind()を使用します。

⚫︎ Main.js

実行結果

find()で2次元配列から条件を満たす要素を取得した結果

find()によって2次元配列から条件を満たす要素を取得しています。

そのため、配列の後ろにインデックスを1つ指定して、2次元配列内にある1次元配列から条件を満たす要素を取得しています。

しかし、map()を使用すると2次元配列全体を範囲として条件を満たす要素を取得することができます。

3次元配列の場合

3次元配列の場合にfind()を使用します。

⚫︎ Main.js

実行結果

find()で3次元配列から条件を満たす要素を取得した結果

find()によって3次元配列から条件を満たす要素を取得しています。

そのため、配列の後ろにインデックスを2つ指定して、3次元配列内にある1次元配列から条件を満たす要素を取得しています。

しかし、map()を使用すると3次元配列全体や2次元配列を範囲として条件を満たす要素を取得することができます。

find()でオブジェクトから条件を満たす要素を取得する場合

オブジェクトから条件を満たす要素を取得する場合にfind()を使用します。

⚫︎ Main.js

実行結果

find()でオブジェクトから条件を満たす要素を取得した結果

find()によってオブジェクトから条件を満たす要素を取得しています。

そのため、「Swift」のデータである「name: ‘Swift’, fw: ‘perfect’」が表示されています。

もし、オブジェクトについて詳しく知りたい場合は下記の記事をご参考ください。

find()を実際に使用したケース

find()を実際に使用したケースについてご紹介します。

例えば、電話番号を入力し、検索ボタンを押すと入力した電話番号と紐付く「名前」と「ID」を画面に表示してみます。

⚫︎ index.html

⚫︎ main.js

実行結果

find()を使用して電話番号検索の画面を作成した結果

find()によって、電話番号に紐づく名前とIDを検索することができます。

そのため、電話番号を入力して検索を押すと、画面に「名前」と「ID」が表示されています。

また、今回はcreateElement()を使用してliタグの要素を作成しています。

もし、createElement()について詳しく知りたい場合は下記の記事をご参考ください。

配列や連想配列から条件を満たす要素のインデックスを取得する場合

配列や連想配列から条件を満たす要素のインデックスを取得する場合は、findIndex()を使用します。

findIndex()とは、配列の中から条件に合う要素のインデックスを取り出すメソッドとなります。

⚫︎ Main.js

実行結果

findIndex()で配列や連想配列から条件を満たす要素のインデックスを取得した結果

findIndex()によって、配列の中から条件に合う要素のインデックスを取得しています。

そのため、「C++」は5番目であることから「4」が表示され、「PHP」は1番目であることから「0」が表示されています。

コールバック関数を使用したメソッドの一覧

find()の他にも、コールバック関数を使用したメソッドが複数存在します。

そのため、ここではコールバック関数を使用したメソッドの一覧についてご紹介します。

map()

map()とは、配列から新しい配列を作成するメソッドになります。

⚫︎ Main.js

実行結果

map()で配列から新しい配列を作成し結果

map()によって配列から新たな配列が作成されています。

そのため、配列の値にそれぞれ「SwiftのFW:」を結合した値が配列に格納して表示されています。

もし、map()について詳しく知りたい場合は下記の記事をご参考ください。

filter()

filter()とは、配列から条件を満たす値のみを抽出し、新しい配列を作成するメソッドになります。

⚫︎ Main.js

実行結果

filter()で配列から条件を満たす値のみを抽出し、新しい配列を作成した結果

filter()によって配列から条件を満たす値のみを抽出して新しい配列を作成しています。

条件は「パラメータで指定した配列の値を含むかどうか」のため、新しい配列には「Laravel」と「CakePHP」と「Symfony」が格納されています。

もし、filter()について詳しく知りたい場合は下記の記事をご参考ください。

reduce()

reduce()とは、配列の中身を単一の値にするメソッドになります。

例えば、「配列に格納されている値を1つずつ足していき、合計値を求める」ということができます。

⚫︎ Main.js

実行結果

reduce()で配列の中身を単一の値にした結果

reduce()によって、指定した配列の値を単一の値にしています。

そのため、「配列内のすべての要素」が1つの値として表示されています。

もし、reduce()について詳しく知りたい場合は下記の記事をご参考ください。

sort()

sort()とは、配列の値を並び替えるメソッドになります。

⚫︎ Main.js

実行結果

sort()で配列の値を並び替えた結果

sort()メソッドによって、配列の値を並び替えています。

今回は、文字数順に設定しているため、文字数が少ない順に並び替わっています。

もし、sort()について詳しく知りたい場合は下記の記事をご参考下さい。

まとめ

● find()とは配列の中から条件に合う要素を取り出すメソッドである

● find()は下記のパラメータを指定して使用する
・コールバック関数(必須)
・オブジェクト(任意)

⚫︎ 配列に条件を満たす要素が存在する場合にfind()を使用すると、「条件に合う配列の値」を返す

⚫︎ 配列に条件を満たす要素が存在しない場合にfind()を使用すると「undefined」を返す

⚫︎ 配列に条件を満たす要素が重複して存在する場合にfind()を使用すると「条件に合う配列の最初の値」を返す

⚫︎ find()は指定した連想配列から条件に合う要素のみを取り出すことができる
(キーと値のどちらでも可能)

⚫︎ find()で他の値と比較して条件を満たす値を取得する場合は、find()に「オブジェクト」を指定する

⚫︎ find()のコールバック関数の引数を2つ指定すると、条件に合う要素を取り出しながら配列のインデックスを指定できる

⚫︎ find()のコールバック関数の引数を3つ指定すると、条件に合う要素を取り出しながら指定した配列の値を操作できる

⚫︎ find()は指定した多次元配列から条件に合う値のみを取り出すことができる

⚫︎ 配列や連想配列から条件を満たす要素のインデックスを取得する場合は、findIndex()を使用する

⚫︎ 指定した配列から新しい配列を作成するにはmap()を使用する

⚫︎ 指定した配列から条件を満たす値のみを抽出し、新しい配列を作成するにはfilter()を使用する

⚫︎ 指定した配列の中身を単一の値にするにはreduce()を使用する

⚫︎ 指定した配列の値を並び替えるにはsort()を使用する

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA