全く使ったことがなかったfilter()について調べてみました。
filter()とは
filter()をはArray(配列)に使われるメソッドです。filter()を実行すると配列の要素に対して文字数が3文字以下など条件でフィルターをかけることができます。
構文 Syntax
// 構文
result = array.filter( 処理);
処理の書く際にはアロー関数を使用するのを多く見かけます。
const arr = [33, 21, 18, 29, 42, 30];
const result = arr.filter( age => age >= 30 );
console.log(result); // [33, 42, 30]
functionの引数について
処理の引数は以下のようになります。
// 構文
array.filter(function(currentValue, index, arr), thisValue)
少し複雑に感じますが、わかれば簡単に使いこなせそうです。
- currentValue : arrayの中の各要素です。必須
- index : 要素のindexです。オプション
- arr : arrayのarrayオブジェクトです。オプション
- thisValue : thisとして値を渡せます。空の場合、「undefined」がthisの値として渡されます。
currentValue, index, arr の中身を確認するサンプルコード
const numbers = [10, 11, 12];
numbers.filter(myFunction);
function myFunction(item, index, arr) {
console.log(“item = ” + item );
console.log(“index = ” + index );
console.log(“arr = ” + arr );
}
結果
item = 10
index = 0
arr = 10,11,12
item = 11
index = 1
arr = 10,11,12
item = 12
index = 2
arr = 10,11,12
thisValueの中身を確認するサンプルコード
const numbers = [10, 11, 12];
numbers.filter(function(currentValue, index, arr) {
console.log(this); // 123
}, 123);
thisの値が123となります。
forEach()との違い
上記の引数や動きなどforEach()メソッドと類似しています。
一番の違いはfilter()の場合配列の中身をフィルターによって減らすことができる点と、また元となる配列ではなく新しい配列が作られる点でしょうか。
引数が同じであるため、forEach()で行うような処理も実装することも可能です。可能ですが、名前によってどんな処理か予測することが可能なため、forEachでは繰り返し処理、filterでは条件による絞り込みでメソッドの使い分けが必要です。
おまけ filter()サンプルコード
その他のサンプルコードです。
文字数が6文字以上の配列の要素をfilter()で抜き出す
const names = [‘Nakamoto’, ‘Sasaki’, ‘Suzuki’, ‘Kato’];
const result = names.filter(name => name.length > 6);
console.log(result); // [“Nakamoto”]
配列の中のオブジェクトのプロパティをfilter()して抜き出す
levelが30以上のオブジェクトで絞り込みます。
const arr = [];
arr[0] = {name:”Nakamoto”, item:”Sugar”, level:23};
arr[1] = {name:”Kato”, item:”Knife”, level:45};
arr[2] = {name:”Sasaki”, item:”PC”, level:32};
const result = arr.filter(myMethod);
function myMethod(item){
return item.level >= 30;
}
console.log(result);
結果
[{name: “Kato”, item: “Knife”, level: 45} , {name: “Sasaki”, item: “PC”, level: 32}]
おわり
今まで頑張ってfor文で作っていた文も実は簡単に作れるのではないかという気分になってきました。
無知は損ですね。
参考サイト
https://www.w3schools.com/jsref/jsref_filter.asp
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
