配列メソッド ― map / filter / find

導入

配列には、要素を変換・絞り込み・検索する便利なメソッドがあります。モダンな JavaScript では for ループの代わりにこれらを使うことがよくあります。

説明

map は各要素を変換した新しい配列を作り、filter は条件に合うものだけ残し、find は最初に条件を満たす1件を返します。

const nums = [1, 2, 3, 4, 5];

const doubled = nums.map((n) => n * 2);
console.log(doubled);  // [2, 4, 6, 8, 10]

const evens = nums.filter((n) => n % 2 === 0);
console.log(evens);    // [2, 4]

const found = nums.find((n) => n > 3);
console.log(found);    // 4

=> はアロー関数（短い関数の書き方）です。詳しくは第5章で扱います。いまは「(引数) => 式 で、各要素に対する処理を渡している」と理解すれば十分です。

合計を求めるには reduce を使います。

const prices = [100, 200, 50];
const sum = prices.reduce((acc, n) => acc + n, 0);
console.log(sum);  // 350

やってみよう

map で各要素を3倍にしたり、filter で 10 以上だけ残したりしてみましょう。

演習

const nums = [3, 8, 12, 5]; から、filter で 5 より大きい数だけ残した配列を表示してください。