プログラミングでは配列操作という難しいワードがよく使われる。
配列ってなに？
難しそう、データ操作？？と疑問を抱く声も少なくない。
今回は学習にこの配列操作有名なjavascriptのmapとfilterの事を挙げて解説していますので学習の参考に是非どうぞ！
1 配列とは何かを確認
配列は 複数の値をまとめて扱うための箱。
例
const scores = [50, 70, 90];
ここからが今日の本題。
2 map 形を変える
map は
配列の中身を 一つずつ変換して 新しい配列を作る。
元の配列は変わらない。
例
const numbers = [1, 2, 3];
const doubled = numbers.map(num => {
return num * 2;
});
// 結果 [2, 4, 6]
ポイント
入力の数と 出力の数は必ず同じ。
Web制作でよくある例
商品データを 表示用の文字列に変換する。
const items = [
{ name: "りんご", price: 100 },
{ name: "みかん", price: 80 }
];
const texts = items.map(item => {
return item.name + " は " + item.price + " 円です";
});
3 filter 必要なものだけ残す
filter は
条件に合うものだけを取り出す。
例
const numbers = [1, 2, 3, 4];
const even = numbers.filter(num => {
return num % 2 === 0;
});
// 結果 [2, 4]
ポイント
数は減ることがある。
Web制作でよくある例
公開中の商品だけを表示する。
const items = [
{ name: "A", isPublic: true },
{ name: "B", isPublic: false }
];
const visibleItems = items.filter(item => {
return item.isPublic;
});
4 map と filter の違い
map
全員を別の姿にする
filter
条件に合う人だけ残す
このイメージで覚えると迷わない。
5 実務でよく使う組み合わせ 10分
filter してから map するのが超定番。
例
const items = [
{ name: "A", price: 100, isPublic: true },
{ name: "B", price: 200, isPublic: false }
];
const result = items
.filter(item => item.isPublic)
.map(item => {
return item.name + " " + item.price + " 円";
});
6 今日のミニ課題
次を自分で書いてみる。
データ
const users = [
{ name: "田中", age: 45 },
{ name: "佐藤", age: 32 },
{ name: "鈴木", age: 50 }
];
課題
40歳以上の人だけを取り出し
名前だけの配列を作る。
まとめ
filter と map は要は
filter は 残すか捨てるかを決めるもの
map は 中身を別の形に変えるもの
さらに噛み砕くと
filter
条件に合うものだけを選別する
人数が変わることがある
形は変わらない
map
全員を必ず処理する
人数は変わらない
形や中身が変わる
