javascript オブジェクトのkeyに変数を使用する

作成日 2022.10.15
javascript
javascript

javascriptで、オブジェクトのkeyに変数を使用するサンプルコードを記述してます。

1. 環境
2. オブジェクトのkeyに変数を使用
3. サンプルコード

環境

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

Javascript サンプル集はこちら

オブジェクトのkeyに変数を使用

オブジェクトのkeyに変数を使用するには「ES2015(ES6)以降」の場合は、以下の構文で可能です。

{[変数]:変数}

実際に使用してみます。

const key = 'aaa';
const value = 111;

const obj = {[key]:value};

console.log(obj); 
// {aaa: 111}

「ES2015(ES6)」以前であれば、以下のように使用することが可能です。

const key = 'aaa';
const value = 111;

let obj = {};

obj[key] = value;

console.log(obj); 
// {aaa: 111}

サンプルコード

以下は、
「生成」ボタンをクリックすると、ランダムな「key」と「value」を生成して表示する
サンプルコードとなります。

※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>    

    <button type="button" onclick="hoge()" class="btn btn-raised btn-success">
      生成
    </button>

  </div>

  <script>

    const hoge = () => {

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

      // JSON 文字列に変換して表示
      elm.textContent = JSON.stringify({["abcde"[~~(Math.random() * "abcde".length)]]:Math.floor(Math.random() * 10)});

    }

  </script>
</body>

</html>

取得されていることが確認できます。