javascript オブジェクトの値の合計を求める

作成日 2022.11.14
javascript
javascript

javascriptで、オブジェクトの値の合計を求めるサンプルコードを記述してます。「for-in」などのループ処理を使用して各値を取得して合計値を求めます。

1. 環境
2. オブジェクトの値の合計を求める
3. サンプルコード

環境

OS windows11 pro 64bit
Apache 2.4.43
ブラウザ chrome 107.0.5304.107

Javascript サンプル集はこちら

オブジェクトの値の合計を求める

オブジェクトの値の合計を求めるには、「for-in」などで「key」から値を取得して合計値を計算します。

const obj = {
  one: 1,
  two: 2,
  three: 'a',
  four: 3,
};

let sum = 0;

for (const key in obj) {
  
  if(Number.isFinite(obj[key])) sum += obj[key];
  
}

console.log(sum); // 6

「Object.values」で値だけにして「for-of」で合計値を取得することも可能です。

const obj = {
  one: 1,
  two: 2,
  three: 'a',
  four: 3,
};

let sum = 0;

for (const item of Object.values(obj)) {
  
  if(Number.isFinite(item)) sum += item;

}

console.log(sum); // 6

サンプルコード

以下は、
「実行」ボタンをクリックすると、用意したオブジェクトの合計値を計算して結果を表示する
サンプルコードとなります。

※cssには「bootstrap material」を使用してます。関数はアロー関数で記述してます。

アロー関数の使い方

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>mebeeサンプル</title>
  <!-- MDB -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/4.2.0/mdb.min.css" rel="stylesheet" />
</head>

<body>

  <div class="container text-center w-75 mx-auto" style="margin-top:200px">

    <h2><span class="badge badge-success"></span></h2>
    <h2><span class="badge badge-success">結果</span></h2>

    <button type="button" onclick="sumObj()" class="btn btn-raised btn-success">
      取得
    </button>

  </div>

  <script>

    const obj = {
      one: 1,
      two: 2,
      three: 'a',
      four: 3,
    };

    // 表示用要素取得
    let elm = document.getElementsByClassName("badge")[0];

    // JSON 文字列に変換して表示
    elm.textContent = JSON.stringify(obj);

    const sumObj = () => {

      // 表示用要素取得
      let elm = document.getElementsByClassName("badge")[1];

      let sum = 0;

      for (const item of Object.values(obj)) {

        if (Number.isFinite(item)) sum += item;

      }

      // 結果を表示
      elm.textContent = sum;

    }

  </script>
</body>

</html>

計算されていることが確認できます。