この記事では、filterメソッドを使ったデータ抽出について解説します。filterメソッドはJavaScriptのプログラムに頻繁に登場するメソッドなので特に理解しておいたほうがいいです。これが使えるようになると、プログラムの幅が大きく広がります。
JavaScriptのfilterメソッドとは
JavaScriptのfilterメソッドとは、配列オブジェクトに存在するメソッドの一種です。配列の各要素について、指定した条件に合致したものだけを抽出したり、省いたりできるメソッドです。
このメソッドを活用できるようになると、配列操作の幅が大きく広がります。この記事を読んでしっかり理解しましょう。
JavaScriptのfilterメソッドでで配列のデータを抽出する方法
valueを使って配列の値を受け取る
JavaScriptのfilterメソッドは基本的に配列.filter(callback)というように指定します。filterの引数のcallbackに、配列の各要素について調べる条件を記述していきます。callback関数の引数には、配列の要素を渡すための変数を指定します。
このメソッドの戻り値は、callback関数の戻り値がtrueになった要素だけを要素にした配列になります。なお、trueを返さなくても、trueと判定されるものが返されればOKです。false, null, undefined, 0などを返した場合は、その要素は戻り値の配列に含まれません。
例えば、数字要素の配列のうち偶数の要素のみ取得する場合は以下のような記述になります。
var sample = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var result = sample.filter((value) => {
if(value % 2 === 0) return true;
});
console.log(result); //[ 2, 4, 6, 8, 10 ]indexを使って配列のインデックス番号を受け取る
JavaScriptのfilterメソッドのcallback関数は、第二引数がとれます。この第二引数には、現在取得している要素のインデックス番号が渡されます。この第二引数を利用することで、「配列の○番目は必ずtrueにする」といったインデックス番号を使った評価が可能になります。
例えば、配列の0番目の要素だけ省く場合は以下のような記述になります。
var sample = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var result = sample.filter((value, index) => {
if(index !== 0) return true;
});
console.log(result); //[ 2, 3, 4, 5, 6, 7, 8, 9, 10 ]arrayを使って現在処理している配列を受け取る
JavaScriptのfilterメソッドのcallback関数は、第三引数も取ることができます。この第三引数には、現在処理している配列自体が渡されます。この第三引数を利用は、配列内の要素同士で比較を行いたい場合などに利用するとよいでしょう。
例えば、sampleの要素のうちsampleのインデックス番号に使われている番号だけを抽出したい場合は以下のような記述になります。
var sample = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var result = sample.filter((value, index, array) => {
if(array[value]) return true;
});
console.log(result); //[ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]filterメソッドは第2引数にオブジェクトを指定できる
JavaScriptのfilterメソッドは第二引数にオブジェクトを指定することができます。そして、callback関数内でthisを指定することで、この第二引数に指定したオブジェクトを取得することができます。
これを用いることで、オブジェクト内の一部のキーのデータを取得したい場合などに便利な使い方ができます。
例えば、ある配列の要素がキーとなったオブジェクトが存在した場合、そのオブジェクトに存在するキーのみを取得した配列を得るには以下のようにします。
var sample = ['english', 'japanese', 'math', 'social science', 'science'];
var score = {
'english': 80,
'japanese': 56,
'society': 67,
'music': 40,
'art': 61
};
var result = sample.filter(function(value) {
return this[value];
}, score);
console.log(result); //[ 'english', 'japanese', 'social science' ]ちなみにfilter関数の第二引数を指定する場合、callback関数はfunctionで記述する必要があります。アロー表記（これまでの例で記述した書き方）の場合は、thisでオブジェクトの取得ができないので注意して下さい。
for-in文を使ってプロパティ名を取得する
次に、filterメソッドの第二引数で指定したオブジェクトの各プロパティ名を取得する方法を紹介します。オブジェクトのプロパティ名を取得するにはJavaScriptのfor-in文を利用します。
for-in文はfor( var 変数 in オブジェクト)と指定することで、変数にオブジェクトの各プロパティ名を代入してループをしてくれます。これを用いることで、オブジェクトのキーで比較をしたり、そのキーから値を取得して比較することが可能となります。
上記の例と同じ動作をfor-in文を用いて記述すると以下のようになります。
var sample = ['english', 'japanese', 'math', 'social science', 'science'];
var score = {
'english': 80,
'japanese': 56,
'society': 67,
'music': 40,
'art': 61
};
var result = sample.filter(function(value) {
for(var item in this){
if(item === value) return true;
}
}, score);
console.log(result); //[ 'english', 'japanese', 'social science' ]また、オブジェクトの値で比較することも可能です。例えば、上記の例で取得する教科のうち、70点以上のもののみを戻り値の対象とする場合は以下のような記述になります。
var sample = ['english', 'japanese', 'math', 'social science', 'science'];
var score = {
'english': 80,
'japanese': 56,
'society': 67,
'music': 40,
'art': 61
};
var result = sample.filter(function(value) {
for(var item in this){
if(item === value) return this[item] > 70;
}
}, score);
console.log(result); //[ 'english' ]english, japanese, social scienceのうち70点以上の教科はenglishだけなので、それだけが取得されました。
まとめ
今回は、JavaScriptのfilterメソッドについて解説しました。各要素について比較し、その結果を反映させた配列を新しく作成できるメソッドなので、JavaScriptのプログラムにおいては頻繁に使用することになります。使い方をしっかり抑えて、目的にあった使い方ができるようになりましょう。
また、オブジェクトをループさせてプロパティを取得し使用する方法についても解説したので、こちらも押さえておきましょう。filterメソッド以外の場面でもJavaScriptプログラムにおいて利用する機会は多いはずです。
