このシリーズについて
「JavaScript入門」第10回です。今回は、配列を便利に扱うメソッドを学びます。
配列メソッドとは
配列メソッドは、配列に対して用意されている操作です。繰り返し、変換、絞り込み、検索を短く書けます。
最初に覚える配列メソッドは、map、filter、find の3つです。
Step 1: forEachで順番に処理する
forEach は、各要素に対して処理を実行します。
const names = ["Taro", "Yuki", "Saki"];
names.forEach((name) => {
console.log(`${name}さん`);
});
戻り値を作る目的ではなく、表示やログ出力のような処理に向いています。
Step 2: mapで新しい配列を作る
map は、各要素を変換して新しい配列を作ります。
const prices = [100, 200, 300];
const pricesWithTax = prices.map((price) => {
return price * 1.1;
});
console.log(pricesWithTax);
元の prices は変更されません。
Step 3: filterで条件に合うものだけ残す
filter は、条件に合う要素だけを集めた新しい配列を作ります。
const scores = [45, 80, 62, 90];
const passedScores = scores.filter((score) => {
return score >= 60;
});
console.log(passedScores);
Step 4: findで1件だけ探す
find は、条件に合う最初の要素を返します。
const users = ["taro", "yuki", "saki"];
const foundUser = users.find((user) => {
return user === "yuki";
});
console.log(foundUser);
見つからない場合は undefined になります。
Step 5: someとeveryを使う
some は1つでも条件に合えば true、every はすべて条件に合えば true です。
const scores = [80, 90, 70];
console.log(scores.some((score) => score >= 90));
console.log(scores.every((score) => score >= 60));
使い分け表
| やりたいこと | 使うメソッド | 戻り値 |
|---|---|---|
| 全件に処理する | forEach | undefined |
| 変換した配列を作る | map | 新しい配列 |
| 条件で絞る | filter | 新しい配列 |
| 1件探す | find | 要素または undefined |
| 1件でもあるか | some | 真偽値 |
| 全件満たすか | every | 真偽値 |
練習
array-methods.js を作り、商品価格を税込にしてから高額商品だけを残します。
const prices = [800, 1200, 3000];
const result = prices
.map((price) => price * 1.1)
.filter((price) => price >= 1000);
console.log(result);
ポイント: 配列メソッドはつなげて書けます。ただし、長くなりすぎる場合は途中結果を変数に分けます。
よくあるエラー
| 困る状態 | よくある原因 | 確認する場所 |
|---|---|---|
undefined の配列になる | map の return 忘れ | コールバック関数 |
| 1件だけ欲しいのに配列になる | filter を使った | find を使う |
| 元配列が変わると思った | map/filter は新配列を返す | 戻り値を変数に入れる |
次のステップ
JavaScript入門 #11 - オブジェクトの基本 で、名前付きのデータをまとめる方法を学びます。
まとめ
配列メソッドを使うと、繰り返し処理を目的別に書けます。表示なら forEach、変換なら map、絞り込みなら filter、1件検索なら find をまず使い分けます。
参考リソース
← 一覧に戻るPR
PR