今日という日を生き抜いた備忘録第二回。
前回から引き続き、最近かじり始めたjavascriptの自分用メモを書かせてもらう。ちゃんとメモにしてまとめると、勉強になるし知識も定着して案外悪くないかも…という気がしてきている。
で。
今日の話題は、filterメソッドについて。
まだまだ素人の自分にとって、配列を操作する際はfor文のみで解決しがち…てか9割以上はそうしちゃってると思う。
しかし、ネット上に跋扈している猛者たちからすると、それは”オシャ”ではないらしい。蟻生君!?
まぁ、配列を操作するメソッドが、今回挙げたfilterや、map、forEach…と色々ある時点で（これらを使わないのはナンセンスなんだろうなぁ）とは察していたが。
記述方法を覚えるのが手間&なんやかんやfor文でごり押し解決できるので、「まぁその内使えるようになればいいだろ＾＾」…と、逃げていては一生使えるようにならなさそう。
というわけで、今日ここでその憂いを断つことにする。
まずは、filterという単語の意味を再確認してみる。
filter
ろ過器、フィルター（カメラや電子回路など様々な物に使用されている全フィルターを指す）、フィルターにかける、ろ過する、濾す、検索条件に追加する、フィルターを通る、ろ過される、知れ渡る…「濾す」？何て読むんだ？…と思ったら、”こす”らしい。
「お茶を濾す」とか聞いたことがあるような無いような。
早い話が、不純物を取り除くために、網や紙…それこそフィルターを通す、くぐらせる。そういう意味合いらしい。
漢字の話はこの辺にして、filterの意味に戻る。まぁなんというか…特に意外性は無い。前回のspliceに比べると、"そうだろうな"という感じが強い。
これはこれでありがたい。メソッドの名前を聞いただけで、大体の役割と機能が分かるのは初心者からすると覚えやすくてかなり助かる。
次に、書き方を確認してみる。
Array.filter(function(elm, i){
💩
return ○○
});
返り値は配列。
elmには、配列Arrayの要素を0番目から順番に一つずつ入れていき、iは0から反復処理する度に1増加していく数値が入る…ということらしい。
また、iについては必ず記載する必要があるというわけではないとのこと。…というか、filterを紹介しているサイトでは大体が引数を1つでしか使っていなかったので、あんまり使いどころは無いのかしら？いや、たまたまか。
で、💩のところに好きな処理を書く。そして、最後の「return ○○」の〇〇にて、true/falseのジャッジと新しい配列へのアクションを決定する。
その〇〇がtrueだった場合は、elmを新しい配列に格納する。逆にfalseだった場合は、何もせず次の処理へ進む。
Array内の要素を最後まで処理したら、その結果として出来上がった配列を返す。
…というのが、このメソッドのざっくりとした機能らしい。
試しに、下記のコードを実行してみる。
let L = [10, 12, 14, 16, 18, 20];
let filterL = L.filter(function(elm, i){
let j = elm / 2;
console.log(i);
return j % 2;
});
console.log(filterL, L);
早い話が、配列内の要素を2で割り、その結果が2で割り切れなかったら新しい配列に格納、そうじゃなかったらスルーする。そんな感じ。
で、結果は下記の通り。
0 1 2 3 4 5 ▶(3) [10, 14, 18] ▶(6) [10, 12, 14, 16, 18, 20]
わーお。ちょっと感動。
こういう、知らないメソッドを使った時みたいな"未知"に触れて、綺麗に結果が返ってきた時が楽しいのよね。プログラミングって。
まず、filterメソッドが反復する度に増加していくi（0～5）の数値が表示されている。
その次に、②で割った結果が2で割り切れなかった数字のみを格納した新しい配列が表示。
最後に、filterにかける前の元の配列が表示。
こうして見ると…
- filterメソッドで処理した元の配列に変化は一切無い。
- fliterメソッド内で値に何らかの変化を施しても、新しい配列に格納されるのはあくまで”元の配列にある要素そのまま”。
この辺がポイントなのだろうか？
メソッド内でどんな処理を施しても、新しい配列に格納されるのは元の値のみである。
だから、filterの意味通り様々な条件を指定し、要素を「濾す」ことができるんですね。
これは便利そう。てか、見た目がすごくスッキリしてて”オシャ”だわ。これからは、使えそうな場面では積極的に使っていこう。
