JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

【JavaScript】配列内のネストされたオブジェクトの値を合計する方法

この記事では、JavaScriptを使って、配列内にネストされた（入れ子構造の）オブジェクトの値を合計する方法を解説します。サンプルコードでは、JSONデータの複数階層に格納された数値（costNum）を順番に取り出し、その合計をブラウザ上に表示します。

コード例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 18px;
        font-weight: 500;
        color: rebeccapurple;
    }
</style>
</head>
<body>
<h1>配列内のネストされたオブジェクト値の合計</h1>
<div class="result"></div>
<button class="Btn">ここをクリック</button>
<h3>
上のボタンをクリックすると、JSON配列内のネストされたオブジェクトの値が合計されます
</h3>
<script>
    let json = {
        storeData: [
        {
            items: [
            {
                itemID: 12,
                cost: {
                    costNum: 100,
                },
            },
            {
                itemID: 22,
                cost: {
                    costNum: 250,
                },
            },
            {
                itemID: 19,
                cost: {
                    costNum: 350,
                },
            },
            ],
        },
    ],
    };
    let resEle = document.querySelector(".result");
    document.querySelector(".Btn").addEventListener("click", () => {
        let sum = 0;
        json.storeData.map((ele) => ({
            itemPrice: ele.items.forEach((item) => {
                sum += item.cost.costNum;
            }),
        }));
        resEle.innerHTML += "costNum の合計 = " + sum + "<br>";
        });
</script>
</body>
</html>

コードのポイント

  • json.storeData.map()：最上位の storeData 配列の各要素（店舗オブジェクト）に対して処理を実行します。
  • ele.items.forEach()：各店舗が保持する items 配列の要素を1件ずつ取り出し、item.cost.costNum の値を合計用の変数 sum に加算していきます。
  • resEle.innerHTML +=：計算した合計値を、class 属性が result の要素に追記して画面に表示します。

reduce() を使ったより簡潔な書き方

実際の開発現場では、配列の合計値を求める際に reduce() メソッドを使うのが一般的です。flatMap() で全アイテムを1つの配列にまとめてから reduce() で加算すると、以下のように簡潔に記述できます。

const total = json.storeData
  .flatMap((store) => store.items)
  .reduce((sum, item) => sum + item.cost.costNum, 0);

実行結果

上記のコードを実行すると、以下のような画面が表示されます。

【JavaScript】配列内のネストされたオブジェクトの値を合計する方法

「ここをクリック」ボタンを押すと、ネストされたオブジェクト内の costNum の合計が表示されます。

【JavaScript】配列内のネストされたオブジェクトの値を合計する方法

  1. JavaScriptのObject.freeze()でネストされたオブジェクトは不変にできる？その限界とdeepFreezeによる解決策

    Object.freeze()メソッドを使うと、オブジェクトを不変（イミュータブル）にすることができます。しかし、ネストされた（入れ子の）オブジェクトが含まれている場合は注意が必要です。Object.freeze()がイミュータブル性を保証できるのは、あくまで最も外側の親オブジェクトだけであり、内部の子（ネストされた）オブジェクトには一切アクセスしないため、入れ子のプロパティの変更までは防げません。例1：ネストがない場合、freezeは正常に機能する以下の例にはネストされたオブジェクトが存在しません。Object.freeze()メソッドはオブジェクト全体を凍結（フリーズ）するため、凍結後にも

  2. JavaScriptのArray.values()メソッドとは？使い方とサンプルコードを徹底解説

    JavaScriptのArray.values()メソッドとは？ JavaScriptのArray.values()メソッドは、対象の配列に含まれるすべての値を格納したイテレーターオブジェクトを返します。ES2015（ES6）以降で利用可能なこのメソッドは、for...ofループやスプレッド構文（[...arr]）と組み合わせることで、配列の各要素を効率的に取り出せます。 なお、keys()やentries()がインデックス情報も一緒に返すのに対し、values()は純粋に「値」だけを順番に提供する点が大きな特徴です。 基本構文 arr.values() 引数は不要で、戻り値として新しいArr