javascript オブジェクトのvalueの最大値と最小値を取得する

作成日 2022.10.21
javascript
javascript

javascriptで、オブジェクトのvalueの最大値と最小値を取得を計算するサンプルコードを記述してます。基本的には、オブジェクトを一度、配列化した後に「Math.max」と「Math.min」で取得します。

1. 環境
2. valueの最大値と最小値を取得
3. 数値以外が含まれている場合
4. サンプルコード

環境

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

Javascript サンプル集はこちら

valueの最大値と最小値を取得

valueの最大値と最小値を取得するには、「Object.values」で配列化して後は「スプレッド構文」で分割したものを「Math.max」と「Math.min」に使用することで可能です。

スプレッド構文の使い方

const obj = {num1: 10, num2: 2, num3: 5};

const values = Object.values(obj);

console.log( ...values ); // 10 2 5

const max = Math.max( ...values );
console.log(max); // 10

const min = Math.min( ...values );
console.log(min); // 2

数値以外が含まれている場合

数値以外が含まれている場合は、結果が「NaN」となるためフラグをたてて計算しないようにするか、

const obj = {num1: 10, num2: 'a', num3: 5};

const values = Object.values(obj);

console.log( ...values ); // 10 2 5

let flg = true;

// 数値以外が含まれていれば計算しない
for (let key in obj) { if(!Number.isFinite(obj[key])) flg = false; }

if(flg){

  const max = Math.max( ...values );
  console.log(max); // 10

  const min = Math.min( ...values );
  console.log(min); // 2

}

数値のみを配列化して取得します。

const obj = {num1: 10, num2: 'a', num3: 5};

const values = Object.values(obj);

let numArr = [];

// 数値のみの新しい配列を作成
for (let key in obj) { if(Number.isFinite(obj[key])) numArr.push(obj[key]); }

// 配列の存在チェック（全て数値以外だった場合は未処理）
if( 0 < numArr.length ){

  const max = Math.max( ...numArr );
  console.log(max); // 10

  const min = Math.min( ...numArr );
  console.log(min); // 5

}

サンプルコード

以下は、
「取得」ボタンをクリックすると、オブジェクトの「value」に「0～9」までランダムな値を設定後に最大値と最小値を取得して表示する
サンプルコードとなります。

※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-info"></span></h2>
    <h2><span class="badge badge-info">最大値</span></h2>
    <h2><span class="badge badge-info">最小値</span></h2>

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

  </div>

  <script>

    const hoge = () => {

      let obj = { num1: Math.floor(Math.random() * 10), num2: Math.floor(Math.random() * 10), num3: Math.floor(Math.random() * 10) };

      // JSON 文字列に変換して表示
      document.getElementsByClassName("badge")[0].textContent = JSON.stringify(obj);

      const values = Object.values(obj);

      let numArr = [];

      // 数値のみの新しい配列を作成
      for (let key in obj) { if (Number.isFinite(obj[key])) numArr.push(obj[key]); }

      // 配列の存在チェック（全て数値以外だった場合は未処理）
      if (0 < numArr.length) {

        document.getElementsByClassName("badge")[1].textContent = Math.max(...numArr);

        document.getElementsByClassName("badge")[2].textContent = Math.min(...numArr);

      }

    }

  </script>
</body>

</html>

表示されていることが確認できます。