こんにちは、フロントエンドエンジニアのザワです。
私たちは完璧な愛を創る代わりに、
完璧な恋人を探そうとして
時を無駄にしている。
トム・ロビンズ
トム先生、恋が見つからないのはフィルタリングのせいでしょうか？
さて、前回から勝手に始めた連載企画、Arrayを知る。
JavaScriptのArrayを知る。大きな目標への小さな一歩 〜Array.from編〜
Shinya Okazawa
本日はArray.prototype.filter()メソッドについて見ていきます。名前からも想像はつきやすいかと思います。要は「フィルタリングするんでしょ？」ってことですよね。本当にそうなのか、その目で確かめてください。
※ここからの説明は個人的に調べて解釈したざっくりとした説明になります。詳しく知りたい方はこちらへどうぞ
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
Array.prototype.filter()メソッドとは
フィルタリングして新しい配列を作成するメソッドです。
引数にはコールバック関数を渡します。
コールバック関数は配列の各要素に対して実行され、trueを返した要素のみが新しい配列に残る、ということになります。コールバック関数の第１引数には対象要素、第２引数には対象要素のインデックス、第３引数にはテストする配列が渡されます。
実装例①
さっそく例文いっちゃいましょう。
訛りの中で一番好きな関西弁のみを抜き出して新しい配列を生成します。
See the Pen Array.protoptype.filter() sample 1 by Zawa (@sowork) on CodePen.
はい、コンソールログで確認すると、新しい配列には関西弁のみが格納されてます。
元の配列の内容には変化がないこともわかりました。
実装例②
もう一例、今度はJSONでフィルタリングしてみましょう。
マッチングアプリ風JSONです。東京住みの年齢が25歳より上、35歳より下という条件でフィルタリングします。
See the Pen Array.protoptype.filter() sample 2 by Zawa (@sowork) on CodePen.
一人とマッチしましたね。めでたしめでたし。
終わりに
今日も武器が一つ増えました。前回は短剣を、今回は長剣をゲットした気持ちです。filterメソッドを知らないままの私なら、for文一択でしたが、filterメソッドの場合、メソッド名を見るだけで役割がわかりやすいので可読性もよくなります。知らないでいることと、知っていてあえてやらないことは、かっこよさに違いが出ます。余裕があります。大人の男って感じです。
これからも小さな一歩を繰り返して、武器をたくさん身につけていきましょう。それでは良い制作ライフを！
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
