JavaScriptの配列で条件一致する要素だけ抽出する方法【filterメソッドを使おう】
JavaScriptの配列で条件一致する要素だけ抽出。
条件一致した要素で構成された配列を取得したい。
本記事ではこのような悩みを解決。
実装例を元に解説します。
本記事で扱う配列・filterメソッド
const arry = [
{
name: "佐藤",
age: 30
},
{
name: "鈴木",
age: 20,
},
{
name: "加藤",
age: 40
},
{
name: "高橋",
age: 50
}
]
本記事では例として上記連想配列を扱い、条件一致したものを抽出します。
条件一致にはfilterメソッドを使用します。
filterメソッドは配列から条件一致した要素を取り出し、新しい配列を作成してくれるメソッドです。
filterメソッドの使い方は以下の通りです。
const 変数 = 配列.filter(引数（配列要素が入る) => {条件処理})
次章より、filterメソッドを使った条件一致実装例を複数紹介します。
文字列が完全一致する要素を抽出
const filterArry = arry.filter(val => {
return val.name === '佐藤'
})
console.log(filterArry);
//コンソール
// (2) [{…}, {…}]
// 0: {name: '佐藤', age: 30}
// 1: {name: '佐藤', age: 10}
指定した文字列と完全一致する要素をfilterメソッドで抽出した例です。
比較演算子（===）を使い、nameプロパティの値が「佐藤」の配列要素を抽出。
コンソールに出力してます。・
文字列が部分一致する要素を抽出
const filterArry = arry.filter(val => {
return val.name.includes('藤');
})
console.log(filterArry);
//コンソール
// (3) [{…}, {…}, {…}]
// 0: {name: '佐藤', age: 30}
// 1: {name: '加藤', age: 40}
// 2: {name: '佐藤', age: 10}
指定した文字列と部分一致する要素をfilterメソッドで抽出した例です。
filterメソッド内でincludesメソッド使い、nameプロパティの値が文字列：「藤」と部分一致する要素を抽出。
コンソールに出力してます。
大小で一致する要素を抽出
const filterArry = arry.filter(val => {
return val.age >= 40
})
console.log(filterArry);
//コンソール
// (2) [{…}, {…}]
// 0: {name: '加藤', age: 40}
// 1: {name: '高橋', age: 50}
大小で一致する要素をfilterメソッドで抽出した例です。
比較演算子（<>）を使い、ageプロパティの値が40以上の配列要素を抽出。
コンソールに出力してます。
指定したindex以上の要素を抽出
const filterArry = arry.filter((val, index) => {
return index >= 3
})
console.log(filterArry);
//コンソール
// (2) [{…}, {…}]
// 0: {name: '高橋', age: 50}
// 1: {name: '佐藤', age: 10}
指定したindex（インデックス：配列番号）以上をfilterメソッドで抽出した例です。
filterメソッドの第二引数にはindexが割り振られます。
indexを元に比較演算子を使い、配列のindex：3以上の要素を抽出。
コンソールに出力してます。
まとめ
JavaScriptの配列で条件一致する要素だけ抽出する方法について、filterメソッドを用いた複数の条件一致例を紹介しました。
以上で解説を終わります。