Reduceメソッド

CoddyのJavaScriptジャーニー「論理とフロー」セクションの一部 — レッスン 54/65。

reduce() メソッドを使用すると、配列の各要素に対して提供された関数を実行することで、配列を単一の値に「まとめる（reduce）」ことができます。この単一の値は、数値、文字列、オブジェクト、あるいは別の配列にすることさえ可能です。

reducerの構文は次の通りです：

array.reduce(function(accumulator, currentValue, currentIndex, array) {
    // 更新されたaccumulatorの値を返す
}, initialValue);

主要なコンポーネント:

accumulator: コールバックの戻り値を累積します（累計と考えてください）

currentValue: 配列内で現在処理されている要素

currentIndex: （オプション）現在の要素のインデックス

array: (オプション) reduce() が呼び出された配列

initialValue: （オプション）コールバック関数の最初の呼び出し時に、第1引数として使用される値

例えば、数値の合計は以下のようになります：

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 15

ステップバイステップの仕組み：

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, curr) => {
    console.log(`Accumulator: ${acc}, Current Value: ${curr}`);
    return acc + curr;
}, 0);

// Output:
// Accumulator: 0, Current Value: 1
// Accumulator: 1, Current Value: 2
// Accumulator: 3, Current Value: 3
// Accumulator: 6, Current Value: 4
// Final result: 10

チャレンジ

簡単

食料品を表すオブジェクトの配列を受け取る、calculateGroceryTotal という名前の関数を作成してください。

各オブジェクトは2つのプロパティを持ちます：

name: 文字列（アイテムの名前）
price: 数値（アイテムの価格）

この関数は以下の処理を行う必要があります：

すべてのアイテムの合計金額を計算する
割引を適用する： - 合計が 100 を超える場合は、10% の割引を適用する
合計が 50 を超え 100 以下の場合は、5% の割引を適用する
合計が 50 以下の場合は割引なし。

以下の内容を含むオブジェクトを返してください：

originalTotal: 割引前の合計金額
discount: 割引された金額
finalTotal: 割引後の最終金額

チートシート

reduce() メソッドは、各要素に対して関数を実行することで、配列を単一の値にまとめます。

array.reduce(function(accumulator, currentValue, currentIndex, array) {
    // 更新された accumulator の値を返す
}, initialValue);

主要なコンポーネント:

accumulator: コールバックの戻り値を蓄積します（累計）
currentValue: 現在処理されている要素
currentIndex: (オプション) 現在の要素のインデックス
array: (オプション) reduce() が呼び出された配列
initialValue: (オプション) accumulator の初期値

例 - 数値の合計:

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 15

ステップバイステップの実行:

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, curr) => {
    console.log(`Accumulator: ${acc}, Current Value: ${curr}`);
    return acc + curr;
}, 0);

// 出力:
// Accumulator: 0, Current Value: 1
// Accumulator: 1, Current Value: 2
// Accumulator: 3, Current Value: 3
// Accumulator: 6, Current Value: 4
// 最終結果: 10

自分で試してみよう

function calculateGroceryTotal(items) {
    // ここにコードを記述してください
    


    return {
        originalTotal: Math.round(originalTotal * 100) / 100,  // 小数点第2位で四捨五入
        discount: Math.round(discount * 100) / 100,
        finalTotal: Math.round(finalTotal * 100) / 100
    };
}

腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。

Reduceメソッド

主要なコンポーネント:

チートシート

主要なコンポーネント:

論理とフローのすべてのレッスン