個人的に重要な四天王
forEach・map・filter・reduce の使い分け
| メソッド | 主な目的 | 戻り値 | 新しい配列を作る？ | break / continue | よく使う場面 |
|---|---|---|---|---|---|
| forEach | 副作用のある処理（出力、外部変数変更など） | undefined | ❌ | ❌ | ログ出力・DOM操作・集計など |
| map | 各要素を変換して新しい配列を作る | 新しい配列 | ⭕️ | ❌ | 単価計算、データ整形 |
| filter | 条件に合う要素だけを抽出 | 新しい配列 | ⭕️ | ❌ | データの絞り込み |
| reduce | 配列を1つの値に集約 | 単一の値（配列やオブジェクトでも可） | ❌（ただし集約結果が配列の場合は作れる） | ❌ | 合計・平均・オブジェクト化など |
実例
main.js
const arr = [1, 2, 3, 4, 5];
// forEach → 副作用
arr.forEach(v => console.log(v)); // 1,2,3,4,5
// map → 新しい配列を作る
const doubled = arr.map(v => v * 2); // [2, 4, 6, 8, 10]
// filter → 条件で絞り込み
const evens = arr.filter(v => v % 2 === 0); // [2, 4]
// reduce → 集計
const sum = arr.reduce((acc, v) => acc + v, 0); // 15
その他のJavaScript配列メソッドまとめ
1. 反復系（ループ処理系）
| メソッド | 用途 |
|---|---|
| forEach | 各要素に対して処理を実行（副作用向き） |
| map | 各要素を変換して新しい配列を作成 |
| filter | 条件に合う要素だけ抽出 |
| reduce / reduceRight | 配列を1つの値に集約 |
| some | 条件を満たす要素が1つでもあるか |
| every | 全ての要素が条件を満たすか |
| find | 条件に一致する最初の要素を返す |
| findIndex | 条件に一致する最初の要素のインデックスを返す |
| flat / flatMap | 配列をフラット化、または変換しつつフラット化 |
2. 追加・削除系（破壊的メソッド）
| メソッド | 用途 |
|---|---|
| push | 末尾に要素を追加 |
| pop | 末尾から要素を削除 |
| shift | 先頭の要素を削除 |
| unshift | 先頭に要素を追加 |
| splice | 任意の位置で要素を追加/削除 |
| reverse | 配列の順序を反転 |
| sort | 配列を並べ替え |
3. 非破壊的コピー・結合系
| メソッド | 用途 |
|---|---|
| slice | 部分配列を取得 |
| concat | 配列同士を結合 |
| join | 要素を文字列として結合 |
| toSorted | 元を変えずにソート（ES2023） |
| toReversed | 元を変えずに反転（ES2023） |
4. 検索系
| メソッド | 用途 |
|---|---|
| includes | 要素が含まれているか確認 |
| indexOf | 要素の位置を検索 |
| lastIndexOf | 後ろから検索 |
まとめ
- 個人的に重要だと思うのは forEach・map・filter・reduce
- 条件検索（find）、真偽判定（some・every）、結合やソートもよく使う
- ループ処理だけなら、この4つ＋some・every・find あたり