Reduceメソッド

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

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

リデューサーの構文は以下のとおりです：

array.reduce(function(accumulator, currentValue, currentIndex, array) {
    // 更新されたアキュムレータの値を返す
}, initialValue);

構成要素：

accumulator: コールバックの返り値を蓄積します（累積合計のようなものと考えてください）

currentValue: array 内で処理されている現在の要素

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);

// 出力:
// アキュムレータ: 0, 現在の値: 1
// アキュムレータ: 1, 現在の値: 2
// アキュムレータ: 3, 現在の値: 3
// アキュムレータ: 6, 現在の値: 4
// 最終結果: 10

チャレンジ

簡単

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

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

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

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

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

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

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

自分で試してみよう

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


    return {
        originalTotal: Math.round(originalTotal * 100) / 100,  // 小数点以下2桁に丸める
        discount: Math.round(discount * 100) / 100,
        finalTotal: Math.round(finalTotal * 100) / 100
    };
}

腕試し

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

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

自分で練習してみよう: JavaScriptオンラインコンパイラ