JavaScript の配列の「合計・平均・最大」を、初心者向けにやさしく解説
はじめてのコードって、ちょっと緊張しますよね。ここでは「配列の数字をまとめる」基本ワザを、例題と一緒に一歩ずつ身につけます。考え方がわかると、似た問題も怖くなくなります。
配列ってなに?
- イメージ: 箱に数字や文字を順番に入れたもの。
- 例:
let scores = [48, 75, 92]; // 3つの点数が入った配列
JavaScript- 取り出し方:
console.log(scores[0]); // 48(0番目)
console.log(scores.length); // 3(要素数)
JavaScript配列の合計を出すやり方(3通り)
1) まずは素直なやり方(for ループ)
let numbers = [48, 75, 92, 61];
let total = 0;
for (let i = 0; i < numbers.length; i++) {
total = total + numbers[i];
}
console.log(total); // 276
JavaScript- ポイント: ひとつずつ足していく。わかりやすくて失敗しにくい。
2) 読みやすいループ(for…of)
let numbers = [48, 75, 92, 61];
let total = 0;
for (const n of numbers) {
total += n;
}
console.log(total); // 276
JavaScript- ポイント: 要素を1つずつ取り出す書き方。「順番に見る」感じが伝わる。
3) かっこいい時短ワザ(reduce)
let numbers = [48, 75, 92, 61];
let total = numbers.reduce((sum, n) => sum + n, 0);
console.log(total); // 276
JavaScript- 言い換え: 「今までの合計(sum)に、今の数字(n)を足す」を、最初は 0 から始める。
reduce を「目で追って」理解する
let numbers = [10, 20, 30];
let total = numbers.reduce((sum, n) => sum + n, 0);
JavaScript- 1回目: sum=0, n=10 → 0+10=10
- 2回目: sum=10, n=20 → 10+20=30
- 3回目: sum=30, n=30 → 30+30=60
- 結果: total=60
- 大事な初期値: 最後の
, 0は「合計のスタートが 0」という意味。これがないと、思わぬ動きになることがあります。
よくある実務パターン
合計のあとに平均
let numbers = [48, 75, 92, 61];
let total = numbers.reduce((sum, n) => sum + n, 0);
let average = total / numbers.length;
console.log(average); // 69
JavaScript- ポイント: 平均は「合計 ÷ 個数」。個数は
length。
最大値・最小値
let numbers = [48, 75, 92, 61];
let max = numbers.reduce((m, n) => (n > m ? n : m), -Infinity);
let min = numbers.reduce((m, n) => (n < m ? n : m), Infinity);
console.log(max); // 92
console.log(min); // 48
JavaScript- ポイント: 初期値に「ありえない端っこ(-Infinity/Infinity)」を入れると安全。
オブジェクト配列の合計(点数の合計)
let users = [
{ name: 'Yamada', score: 75 },
{ name: 'Suzuki', score: 91 },
{ name: 'Kudou', score: 80 }
];
let total = users.reduce((sum, user) => sum + user.score, 0);
console.log(total); // 246
JavaScript- ポイント: オブジェクトから欲しい値(
user.score)を取り出して足す。
つまづきやすいポイント
- 初期値を忘れると危険:
reduce((sum, n) => sum + n)と初期値を省略すると、最初の要素が勝手に初期値になります。数値ならまだしも、空配列やオブジェクトだと意図しない結果になりやすい。基本は「必ず初期値を書く」。 - 空配列への対処:
合計なら初期値を 0 にしておけば、空でも 0 が返って安心。 - 計算対象が数値か確認:
文字列が混ざると足し算が「連結」になってしまうことがある。入力チェックやNumber()で数値化してから計算すると安全。
例題で練習しよう
例題 1: 合計と平均
- 問題:
[12, 34, 56, 78]の合計と平均を出して。 - 解答:
let arr = [12, 34, 56, 78];
let total = arr.reduce((sum, n) => sum + n, 0);
let avg = total / arr.length;
console.log(total, avg); // 180 45
JavaScript例題 2: 予算の合計
- 問題:
[{item:'A', price:1200}, {item:'B', price:3400}, {item:'C', price:800}]の合計金額。 - 解答:
let cart = [
{ item: 'A', price: 1200 },
{ item: 'B', price: 3400 },
{ item: 'C', price: 800 }
];
let total = cart.reduce((sum, it) => sum + it.price, 0);
console.log(total); // 5400
JavaScript例題 3: 最大値と最小値
- 問題:
[7, 2, 9, 4, 6]の最大と最小。 - 解答:
let nums = [7, 2, 9, 4, 6];
let max = nums.reduce((m, n) => (n > m ? n : m), -Infinity);
let min = nums.reduce((m, n) => (n < m ? n : m), Infinity);
console.log(max, min); // 9 2
JavaScriptまとめ
- 配列の合計は reduce が便利: 初期値は必ず書く(合計なら 0)。
- 平均は合計 ÷ 個数:
lengthを使う。 - 最大・最小も reduce でいける: 初期値に
±Infinity。 - オブジェクト配列もOK: 欲しいプロパティを足す。
