Written by Kasumi

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メソッドを用いた複数の条件一致例を紹介しました。

以上で解説を終わります。

目次

関連記事

JavaScript

JavaScriptでHTML要素(DOM)を動的に移動する方法

2022.10.13
980
JavaScript

JavaScriptで配列を複製。新しい配列を作成する方法【mapメソッドを使おう】

2023.01.09
249
JavaScript

JavaScriptでマウスが要素をhoverしたか判定する方法

2022.11.10
420
JavaScript

【JavaScript】受け取ったデータが文字列 or 数値どちらなのか判定する方法【typeof演算子を使おう】

2022.11.29
417