[JavaScript]配列で特定の要素に合致したものだけを生成するfilter関数

2021-03-14

JavaScriptで配列の中の特定要素に合致した配列を生成する、filter関数について紹介。

ある条件に合うものだけを抽出する際に使用できます。

filter関数

例えば、配列に格納された人の情報で血液型がAB型の人だけを抽出したいとします。

こういった時にfilter関数を使えば簡単にできます。

persons = [
  {name : "Mike", bloodType : "A"},
  {name : "Bob", bloodType : "B"},
  {name : "Josh", bloodType : "AB"},
  {name : "Joe", bloodType : "AB"},
]
const filterResult = persons.filter(person => person.bloodType == "AB")
console.log(filterResult)

/* 出力結果 */
[{
  bloodType: "AB",
  name: "Josh"
}, {
  bloodType: "AB",
  name: "Joe"
}]

personの配列の中身は連想配列になっており、名前と血液型の情報を保有しています。

filter(person => )の箇所はpersonの部分に配列personsのオブジェクトが入ります。

複数条件で抽出する

では、複数条件で抽出した場合はどうすればいいのでしょうか。

例えば、A型かつ男性を抽出したい場合などです。

const persons = [
    {name: "Mike", type: "A", sex: "male"},
    {name: "Mary", type: "A", sex: "female"},
    {name: "Bob", type: "A", sex: "male"},
    {name: "Julia", type: "B", sex: "female"},
    {name: "Jane", type: "O", sex: "female"},
]
const typeAMale = persons.filter(person => person.type == "A" && person.sex == "male")
console.log(typeAMale)

/* 出力結果 */
[
{name: "Mike", type: "A", sex: "male"},
{name: "Bob", type: "A", sex: "male"}
]

filter関数の中に複数条件を記述できます。AかつBの場合は&&。 AまたはBの場合は||といった具合です。