JavaScriptの基本文法
今回は、配列におけるmap関数、filter関数の使い方について学んだことをまとめる。
map関数
map関数は、配列の各要素に対して、順番に何らかの処理を施して、新しい配列を作成することができる関数。
配列の要素に対して、1つずつ処理をしようと思うと、for文やwhile文でループさせる書き方を思いつくが、map関数を使うと、勝手に添え字の0から順に配列の要素にアクセスしてくれる。
map関数の中に、処理させたい内容を記述した関数を書く。
- 第1引数：配列の要素
- 第2引数：配列の添え字
なんで、第1引数が添え字じゃないんだろう？と思ったが、引数は省略できるから、実際に処理させたい配列の要素が第1引数になっているんだろう。
配列の要素の値を10倍して新しい配列を作成すると、こんな感じになる。
引数を1つにした場合。
こういうところでアロー関数の威力が発揮されるのだと感じる。
元の文字列をすべて大文字にした配列を作りたい場合は、こうなる。
今度は、3つの配列をがっちゃんこしてみる。(配列の中身自体は変更しない)
ネコの名前と色と年齢をそれぞれ持った3つの配列を、necoNameをmapのトリガーとして、配列の要素がオブジェクトのプロパティとなるようにする。
あれ？失敗したｗｗ
map関数は、指定した配列の要素を1つずつ展開してくれるから、necoName[index]と指定すると、一つ目の要素 necoName[0]の ”Shima” の ”S” が取れちゃうのか。
上を解決しようと思うと、こういう書き方になるのかな。
filter関数
filter関数は、配列の各要素に対して、条件と一致するものをフィルタリングして抽出し、新しい配列を作ることができる関数。
使い方は、map関数とほぼ同様。
ネコ年齢リストからシニアネコ(10歳以上)の年齢だけをフィルタした、新しいシニアネコ年齢リストを作成。
アロー関数を使うとこうなる。(シンプル！)
でも、アロー関数の矢印(=>)と、大なり(>=)が紛らわしいな！ｗｗ
フィルタする条件は、複数条件もいける。
ネコ年齢リストから、成ネコ年齢リスト(5歳～10歳)を作る。
map関数やfilter関数のやっていることは、for文やwhile文でもできるが、コードの可読性が落ちたり、バグの温床になる可能性もあるため、forやwhileはあまり使われないらしい。
配列から、nullとundefined以外の要素をフィルタする処理を作ってみる。
3番目と5番目の以外の要素を取り出すことができた。
?? は、Null合体演算子で、演算子の左側がnullish(nullかundefined)なら、演算子の右側が評価されるというもの。
本来、変数にnullとかundefinedとか入っていてほしくない時のエラーメッセージを表示させたい時なんかに使うのかな。
とりあえず、出勤時間になったので、今日はここまで。
