0%

Programmingプログラミングナレッジ

Posted:2019.11.12

javascriptで配列を扱う時によく使うメソッド#4【配列から条件に合う値を取得・フィルタリングする】

バックエンド側からデータを受け取り、フロントエンド側で扱うときには配列としてjavascriptで操作するケースが多いかと思います。javascriptには配列を操作するための様々なメソッドが用意されています。今回は配列から条件にあう値を取得するパターンについてまとめていきたいと思います。また、過去記事にはそれ以外にもいろんな配列を扱うメソッドについてまとめていますのでこちらもどうぞ。

 

(参考記事)
javascriptで配列を扱う時によく使うメソッド#1【配列の作成・値や総数の取得・空判定など】
javascriptで配列を扱う時によく使うメソッド#2【配列の値に対して繰り返し処理を行う】
javascriptで配列を扱う時によく使うメソッド#3【配列に値が含まれるか・値のインデックスを検索する】

 

Array.find()

配列データから、特定の条件にマッチする値で、ユニークなものを取得する場合には「Array.find()」を使います。引数にはコールバック関数をとり、そのコールバック関数内で条件を指定することで、条件にマッチした最初のインデックスの値を返してくれます。ですので、一意の値を取得する場合に使えます。

【javascript】

const arrayObject = [
 { id: 1, name: '田中' },
 { id: 2, name: '中村' },
 { id: 3, name: '村山' },
 { id: 4, name: '山川' },
 { id: 5, name: '川本' } 
];
const search = 2;
const result = arrayObject.find((object) => {
 return object.id === search;
});
if(result) {
 console.log(`IDが2のメンバーは${result.name}さんです`);
} else {
 console.log('該当するデータはありません');
}

 

【console】

"IDが2のメンバーは中村さんです"

 

メディアサイトなどで、投稿記事のIDからコンテンツの情報を取得する場合などに使えますね。上記はIDで取得するケースの例ですが、それ以外の値でも検索することができます。対象となる配列は値型でもオブジェクト型でも同じように使えます。

 

Array.filter()

同じく配列データから、特定の条件にマッチする値を取得するのですが、複数該当し条件に合う全ての値を取得する場合には「Array.filter()」を使います。こちらも引数にコールバック関数をとり、そのコールバック関数内で条件を指定すると、条件にマッチした全ての値が配列として返ってきます。また、条件にマッチしたものがない場合には空の配列が返ってきます。

【javascript】

const arrayObject = [
 { name: 'ジャガイモ', farm: '北海道' },
 { name: 'ニンジン', farm: '北海道' },
 { name: 'ダイコン', farm: '千葉県' },
 { name: 'タマネギ', farm: '北海道' },
 { name: 'キャベツ', farm: '長野県' },
];
const search = '北海道';
const result = arrayObject.filter((object) => {
 return object.farm === search;
});
console.log(result);

 

【console】

[
 { name: 'ジャガイモ', farm: '北海道' },
 { name: 'ニンジン', farm: '北海道' },
 { name: 'タマネギ', farm: '北海道' }
]

 

カテゴリやキーワード指定などの検索軸で使うことができます。配列データを条件ごとに切り分ける場合にも使えるのでとても便利なメソッドです。こちらも対象となる配列は値型でもオブジェクト型でも同じように使えます。オブジェクト型の配列では、さらにここからArray.forEach()などで個別の値を取得することができます。

 

まとめ

【配列から条件に合う一意の値を取得する】

Array.find(( value ) => { callback });

 

【配列から条件に合う複数の値を取得する】

Array.filter(( value ) => { callback });

 


 

今回のメソッドは、膨大なデータを条件別にフィルタリングする場合に使えます。バックエンドからAPI経由でデータを受け取り、フロントエンド側で処理する場合には必須のメソッドになるのではないでしょうか。とても便利なのでぜひ覚えておきたいですね。

 

(こちらの記事もどうぞ)
javascriptで配列を扱う時によく使うメソッド#1【配列の作成・値や総数の取得・空判定など】
javascriptで配列を扱う時によく使うメソッド#2【配列の値に対して繰り返し処理を行う】
javascriptで配列を扱う時によく使うメソッド#3【配列に値が含まれるか・値のインデックスを検索する】

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】