ここ最近ブログ記事のテーマにしている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【配列の値に対して繰り返し処理を行う】