実際の例を含む JavaScript `reduce()` メソッドの包括的なガイド

reduce() メソッドは JavaScript の強力な配列メソッドで、配列を反復処理して単一の値に減らすために使用されます。このメソッドは多用途であり、数値の合計、配列の平坦化、オブジェクトの作成などの操作を処理できます。

---

reduce() の構文

array.reduce(callback, initialValue);

• callback: 配列内の各要素に対して実行する関数。
  • アキュムレータ: 前回のコールバック実行からの累積結果。
  • currentValue: 現在処理されている要素。
  • currentIndex (オプション): 現在の要素のインデックス。
  • array (オプション): 配列reduceが呼び出されました。
• initialValue (オプション): コールバックの最初の呼び出しの最初の引数として使用する値。

---

reduce() の動作の段階的な仕組み

1. initialValue が指定されていない場合は、initialValue または配列の最初の要素から開始します。
2. アキュムレータと currentValue をコールバック関数に渡します。
3. コールバックから返された値でアキュムレータを更新します。
4. すべての要素が処理されるまで繰り返します。
5. 最終累積値を返します。

---

例 1: 配列の合計の計算 (現実: ショッピング カート)

ショッピング カートがあり、商品の合計価格を計算したいとします。

const cart = [
    { item: "Laptop", price: 1200 },
    { item: "Phone", price: 800 },
    { item: "Headphones", price: 150 }
];

const totalPrice = cart.reduce((acc, curr) => acc + curr.price, 0);

console.log(`Total Price: $${totalPrice}`); // Total Price: 50

---

例 2: カテゴリごとにアイテムをグループ化する (現実: 在庫の整理)

アイテムをカテゴリ別にグループ化したいと考えています。

const inventory = [
    { name: "Apple", category: "Fruits" },
    { name: "Carrot", category: "Vegetables" },
    { name: "Banana", category: "Fruits" },
    { name: "Spinach", category: "Vegetables" }
];

const groupedItems = inventory.reduce((acc, curr) => {
    if (!acc[curr.category]) {
        acc[curr.category] = [];
    }
    acc[curr.category].push(curr.name);
    return acc;
}, {});

console.log(groupedItems);
/*
{
    Fruits: ['Apple', 'Banana'],
    Vegetables: ['Carrot', 'Spinach']
}
*/

---

例 3: ネストされた配列のフラット化 (現実: 部門のデータの結合)

さまざまな部門からデータをネストされた配列として受信し、それらを 1 つに結合する必要があります。

const departmentData = [
    ["John", "Doe"],
    ["Jane", "Smith"],
    ["Emily", "Davis"]
];

const flattenedData = departmentData.reduce((acc, curr) => acc.concat(curr), []);

console.log(flattenedData); // ['John', 'Doe', 'Jane', 'Smith', 'Emily', 'Davis']

---

例 4: 発生回数のカウント (現実: 分析)

Web サイトのページビューの配列があり、各ページが何回アクセスされたかをカウントしたいと考えています。

const pageViews = ["home", "about", "home", "contact", "home", "about"];

const viewCounts = pageViews.reduce((acc, page) => {
    acc[page] = (acc[page] || 0) + 1;
    return acc;
}, {});

console.log(viewCounts);
/*
{
    home: 3,
    about: 2,
    contact: 1
}
*/

---

例 5:reduce() を使用したカスタム マップの実装

reduce() メソッドは、map() の機能を模倣できます。

const numbers = [1, 2, 3, 4];

const doubled = numbers.reduce((acc, curr) => {
    acc.push(curr * 2);
    return acc;
}, []);

console.log(doubled); // [2, 4, 6, 8]

---

例 6: 最大価値を見つける (現実: トップセールスを見つける)

データセットから最高の売上高を見つけたいと考えています。

const sales = [500, 1200, 300, 800];

const highestSale = sales.reduce((max, curr) => (curr > max ? curr : max), 0);

console.log(`Highest Sale: $${highestSale}`); // Highest Sale: 00

---

例 7: データの変換 (現実: API データ変換)

ユーザー データの配列を受信したので、それをユーザー ID をキーとするオブジェクトに変換する必要があります。

array.reduce(callback, initialValue);

---

ヒントとベストプラクティス

1. InitialValue を使用する: 空の配列を扱うときの予期しない動作を避けるために、常に初期値を指定します。
2. シンプルに保ちます: 簡潔で明確なリデューサー関数を作成します。
3. 不変の更新: オブジェクトまたは配列を操作するときは、リデューサー内でそれらを直接変更することは避けてください。

---

結論

reduce() メソッドは非常に汎用性が高く、値の合計からデータ構造の変換まで、さまざまなタスクに適応できます。このような実際の例を使って練習して理解を深め、JavaScript プロジェクトでのreduce() の可能性を最大限に引き出してください。

以上が実際の例を含む JavaScript `reduce()` メソッドの包括的なガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。