【Javascript】条件に合う要素を抜き出す filter関数について解説

Javascriptで条件に合う要素を取り出して処理を行いたい場面によく出会います。

例えば、ある数値以上の要素を取り出したり、特定の文字が含まれている物だけを抽出したりするケースが多いです。

このようなことを可能にするのが『filter関数』です。
コードを紹介しながら解説していきます。

Contents

1 パターン①　配列から特定の文字を抜き出す
- 1.1 条件に合うものがなければ空の配列が返される
- 1.2 検索ワードにスペースがあると正しく抽出できない
2 パターン③　2つの配列から重複しているものを抽出

パターン①　配列から特定の文字を抜き出す

配列から指定した文字を抜き出すパターンを見ていきましょう。例えば名前が格納された配列から「Mike」という要素があるか確認したいとします。

peopleArray = ['John','Mike','Amanda','Nancy','Linda']

filter関数を使うと可能です。functionキーワードとアロー関数の2パターンでコードを書いてみましょう。

peopleArray = ['John','Mike','Amanda','Nancy','Linda']

//アロー関数を使った書き方
const pickName = peopleArray.filter(name => name == 'Mike')

//functionを使った書き方
const pickName = peopleArray.filter(function(name){
  return name == 'Mike'
})

console.log(pickName)
//結果
[ 'Mike' ]

filter関数を使うと、条件に合うものを抽出して『配列』として返してくれます。

条件に合うものがなければ空の配列が返される

また条件に合うものがなければ空の配列が返されます。

peopleArray = ['John','Mike','Amanda','Nancy','Linda']

const pickName = peopleArray.filter(name => name == 'Tom')

console.log(pickName)
//結果
[]

検索ワードにスペースがあると正しく抽出できない

filter関数で検索するワードに無駄なスペースがあると、別の要素と判断されて空の配列が返されます。例を見てみましょう。

peopleArray = ['John','Mike','Amanda','Nancy','Linda']

const pickName = peopleArray.filter(name => name == 'Mike ')

console.log(pickName)
//結果
[]

配列にMikeが存在するはずなのに、検索に引っかからないので注意です！

パターン③　2つの配列から重複しているものを抽出

2つの配列があり、お互いに共通している要素のみを取り出した配列が欲しい場合があります。これもfilter関数で解決します。

例えば下記のように男性と女性の名前を格納した配列が存在しているとします。

const menArray = ['田中','吉本','丸山','武田']
const womanArray = ['武田','畑中','山本','田中']

//期待する配列：田中と武田のみ抽出した配列
const duplicateArray = ['田中','武田']

まずは2つの配列を1つの配列にまとめるために、スプレッド構文を使います。

const mixArray = [...menArray,...womanArray]
console.log(mixArray)

//結果
[
　'田中', '吉本',
  '丸山', '武田',
  '武田', '畑中',
  '山本', '田中'
]

この作業により、mixArrayという配列が完成しました。次にfilter関数を使っていきます。

const duplicateArray = mixArray.filter(person =>
 menArray.includes(person) && womanArray.includes(person))

personはmixArrayの各要素で、任意の文字でOKです。
また下記コードで、menArrayとwomanArray両方に存在するものだけ抽出しています。

menArray.includes(person) && womanArray.includes(person))

ここまでのコードと実行結果を確認しましょう。

const menArray = ['田中','吉本','丸山','武田']
const womanArray = ['武田','畑中','山本','田中']
const mixArray = [...menArray,...womanArray]
console.log(mixArray)

//実行結果
[
  '田中', '吉本',
  '丸山', '武田',
  '武田', '畑中',
  '山本', '田中'
]

const duplicateArray = mixArray.filter(person =>
 menArray.includes(person) && womanArray.includes(person)) 

console.log(duplicateArray)

//実行結果
[ '田中', '武田', '武田', '田中' ]

実行結果の配列で「田中」と「武田」が重複してしまっています。
そのため『Set関数』を使い、重複を削除します。

「new Set()」でSetオブジェクトを作成することができます。

Setオブジェクトは中身が一意である（＝重複しない）ことが保証されるので、結果的に重複の削除が可能なのです。

console.log(new Set(duplicateArray))
//実行結果：配列ではない！！
Set { '田中', '武田' }

//Setを配列に変換するためスプレッド構文を使用
const fixDuplicateArray = [...new Set(duplicateArray)]
console.log(fixDuplicateArray)

//実行結果
[ '田中', '武田' ]

スプレッド構文を使わずに、「Array.from」を使ってSetを配列に変換することができます。

const fixDuplicateArray = Array.from(new Set(duplicateArray))
console.log(fixDuplicateArray)

//実行結果
[ '田中', '武田' ]

最後に全てのコードをまとめておきます。

const menArray = ['田中','吉本','丸山','武田']
const womanArray = ['武田','畑中','山本','田中']
const mixArray = [...menArray,...womanArray]

const duplicateArray = mixArray.filter(person =>
 menArray.includes(person) && womanArray.includes(person)) 

const fixDuplicateArray = Array.from(new Set(duplicateArray))
console.log(fixDuplicateArray)

//実行結果
[ '田中', '武田' ]