0%

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

Posted:2019.10.12

javascriptで配列を扱う時によく使うメソッド#3【配列に値が含まれるか・値のインデックスを検索する】

ここ最近ブログ記事のテーマにしているjavascriptでの配列操作ですが、第3回目の今回もフロントエンド開発でよく使うメソッドについてまとめていきたいと思います。前回は「javascriptで配列を扱う時によく使うメソッド#2【配列の値に対して繰り返し処理を行う】」ということで、配列の値をHTML上に展開していくのを例にしていました。今回は配列データに値が含まれるかどうか?そして、何番目に値が入っているのかを見ていくメソッドになります。

 

Array.includes()

配列データに特定の値が一致したものが含まれているかどうかを調べるときに使えるのが「Array.includes()」です。対象となる配列に対して実行し、検索したい値を引数に入れると、その値が配列に含まれている場合はtrueを、含まれていない場合はfalseを返します。条件分岐などで処理の結果を見せることができます。

【javascript】

const arrayData = [ '田中', '中村', '村山', '山川', '川本' ];
const search = '中村';
if (arrayData.includes(search)) {
 console.log(`${search}さんはメンバーに含まれています`);
} else {
 console.log(`${search}さんはメンバーではありません`);
}

 

【console】

"中村さんはメンバーに含まれています"

 

Array.includes()では、オブジェクト型の配列の場合には正しい結果を得ることができず、値型の配列しか使うことができませんので注意が必要です。

 

Array.some()

先ほどの、Array.includes()と同じく、配列データに対して、特定の値が一致したものが含まれているかどうかを調べることができますが、オブジェクト型の配列にも使えるのが「Array.some()」です。対象となる配列に対して実行しますが、引数にはコールバック関数を指定できるので、そこで検索の条件などを指定できます。

【javascript】

const arrayObject = [
 { id: 1, name: '田中' },
 { id: 2, name: '中村' },
 { id: 3, name: '村山' },
 { id: 4, name: '山川' },
 { id: 5, name: '川本' } 
];
const search = '中村'
const result = arrayObject.some((object) => {
 return object.name === search;
});
if(result) {
 console.log(`${search}さんはメンバーに含まれています`);
} else {
 console.log(`${search}さんはメンバーではありません`);
}

 

【console】

"中村さんはメンバーに含まれています"

 

コールバック関数を使うことで、オブジェクト内のプロパティも参照できるようになります。APIなどでバックエンドから取得した複雑なデータの処理にも対応できます。

 

Array.indexOf()

配列データに特定の値が一致したものが含まれている場合に、その値のインデックス番号を取得できます。つまり対象の値が何番目にあるのかを調べることができるのが「Array.indexOf()」です。対象となる配列に対して実行し、先ほどと同じく検索したい値を引数に指定すると、値が含まれている場合には、0から始まるその値のインデックス番号が返ってきます。

【javascript】

const arrayData = [ '田中', '中村', '村山', '山川', '川本' ];
const search = '村山';
const index = arrayData.indexOf(search);
if (index >= 0) {
 console.log(`${search}さんは${index + 1}番目のメンバーです`);
} else {
 console.log(`${search}さんはメンバーではありません`);
}

 

【console】

"村山さんは3番目のメンバーです"

 

インデックス番号は0から始まりますので、何番目かという使い方をする場合には1を足しておくことに注意します。ちなみに、値が含まれていない場合には-1が返ってくるので、それを利用することで、Array.includes()と同じ結果を得ることができます。

const arrayData = [ '田中', '中村', '村山', '山川', '川本' ];
const search = '中村';
if (arrayData.indexOf(search) !== -1) {
 console.log(`${search}さんはメンバーに含まれています`);
} else {
 console.log(`${search}さんはメンバーではありません`);
}

 

この方法は、Array.includes()が登場する前にはよく使われていましたが、トランスパイルなどのツールが揃っている今ではあえて使う理由はあまりないかもしれませんね。この、Array.indexOf()では対象のなる配列は値型のものになります。オブジェクト型の配列の場合には正しい結果が返ってこないので注意が必要です。

 

Array.findIndex()

Array.indexOf()と同じく、配列の中に含まれている値のインデックス番号を返すのですが、「Array.findIndex()」だとオブジェクト型の配列にも使うことができます。引数にはコールバック関数が入るので、その中でオブジェクト内のプロパティを参照することができます。

【javascript】

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

 

【console】

"村山さんは3番目のメンバーです"

 

Array.indexOf()同様にインデックス番号を取得することができます。オブジェクトを扱うという点では、Array.some()と使い方も似ていますね。

 

まとめ

【値型の配列で値が一致したものが含まれているかを調べる】

Array.includes( value );

 

【オブジェクト型の配列で値が一致したものが含まれているかを調べる】

Array.some( ( object ) => { callback });

 

【値型の配列に含まれている一致した値のインデックス番号を取得する】

Array.indexOf( value );

 

【オブジェクト型の配列に含まれている一致した値のインデックス番号を取得する】

Array.findIndex( ( object ) => { callback });

 


 

主に今回のメソッドは、取得したデータに対して検索をかけるときや、配列を加工する際の条件判定などに使えるかと思います。単体ではあまり使われないかもしれませんが、今後別記事でまとめていく予定の配列操作のメソッドと組み合わせることで、より幅広い処理ができるようになるのではないでしょうか。

 

(こちらの記事もどうぞ)
javascriptで配列を扱う時によく使うメソッド#1【配列の作成・値や総数の取得・空判定など】
javascriptで配列を扱う時によく使うメソッド#2【配列の値に対して繰り返し処理を行う】

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

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

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

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

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

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

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

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

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

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

CAPTCHA


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