javascriptの配列である条件を満たした値を保持しているか調べたい。
forで繰り返してチェックしてもいいけど、もっと簡単な方法はないのだろうか。
上記のお悩みを解決します。
■本記事の内容
本記事で以下の内容をお伝えします。
・javascriptのfindの書き方
・javascriptのfindの注意点
■本記事の信頼性
この記事を書いている私は、プログラミングを仕事として始めて10年以上ほど経ちます。今も現役のシステムエンジニアです。
javascriptのfindについて説明していきます。
findは配列のメソッドの1つで、配列内の要素をそのfindの名前の通り探してくれるものです。
findなどのメソッドを使用しない場合、上記を行おうとするとfor文で配列の要素分を繰り返し、ひとつずつ内容を確認していく方法になります。
繰り返し文を使用するより、findなどの配列のメソッドを知っておくと1行で簡単に書くことができ、コードの可読性も上がっていきます。
ですので、完璧に暗記する必要はありませんが、なんか配列の要素を取得できるようなメソッドがあったなあぐらい覚えておくといいでしょう。
そもそも配列って何？と思われた方は以下の記事でまとめていますので参考にどうぞ。
javascriptのfindとは
冒頭でもお話しましたが、javascriptのfindを使用することにより配列の要素内にある条件を満たす要素を取得することができます。
ただ、取得できるのは1つだけです。
仮に条件を満たす要素が複数存在する場合は、はじめに取得できたものを値として返す仕様になります。
例えばイメージとしては以下のような形です。
| りんご | みかん | いちご | りんご |
上記のように各々の箱に果物が入ってた場合に、例えばこの箱の中からりんごがあれば欲しいとなったときにfindを使用することで簡単に取得することができます。
ただ、りんごが2個取得できるわけではなく、りんごが1個でも取れた時点で終わりといった感じですね。
通常の配列だけでなく、オブジェクト配列でもfindを使用することができます。
javascriptのfindの書き方
では、javascriptでのfindの書き方を説明します。
以下のような書き方をします。
const fruits = ['りんご', 'みかん', 'いちご', 'りんご'];
const apple = fruits.find(fruit => fruit === 'りんご');
console.log(apple);先ほどの例に合わせてみました。
fruitsが調べたい配列の変数名です。その配列に対してfindを書いてカッコ内に条件を記載するといったイメージです。
fruit => fruit === 'りんご' が条件の部分になります。fruit は配列要素の値が入る変数名になります。
任意で分かりやすい好きな名前を使用すればよいものです。
オブジェクト配列の場合だと以下のような書き方で可能です。
const recodes = [
{ id: '001', name: 'りんご' },
{ id: '002', name: 'みかん' },
{ id: '003', name: 'いちご' },
];
const data = recodes.find(recode => recode.id === '001');
console.log(data);オブジェクト情報が配列で持っている場合でも基本的に書き方は同じです。
上記を実行すると以下の結果が返ります。
> Object { id: "001", name: "りんご" }仮に条件に一致するものが存在せず、取得できるデータがなかった場合は「undefined」が返却されます。
javascriptのfindを使用するケース
最後にjavascriptのfindを使用するケースについて書いていきます。
仕様としては見つけた最初の要素のみを返却するので、オブジェクト配列などでユニークなIDを保持している情報に対して取得するときによく使用します。
よくあるケースとしてはデータベースのデータが入ったオブジェクトなどですね。
仮に、ある条件で複数存在する場合はfindとは別にfilterが存在するのでそちらを使用するほうがよいです。
後は、ある条件のものが配列要素の内に存在するかしなかのチェックしたい場合、findでも可能ですが、別にsomeという関数が用意されていてそちらを使用するほうがよいです。
最後に
javascriptのfindついて説明しました。
find以外にもjavascriptの配列には様々なメソッドが用意されています。
これらを知っておくことで、無駄にループ処理を書かなくて済み、コードもすっきりして読みやすくなります。
今、完璧に書き方をマスターしなくてもよいですが、簡単にあるメソッドを使用すれば実現できるということだけ覚えておくと良いかと思います。
コメント