javascript 分割代入を使用してオブジェクトをkeyとvalueに分ける

作成日 2020.10.19
更新日 2022.06.15
javascript
javascript

javascriptで、分割代入を使用してオブジェクトをkeyとvalueに分けるサンプルコードを記述してます。

1. 環境
2. 分割代入の使用方法
3. サンプルコード

環境

OS windows10 pro 64bit
Apache 2.4.43
ブラウザ chrome 102.0.5005.115

Javascript サンプル集はこちら

分割代入の使用方法

分割代入を使用してオブジェクトをkeyとvalueに分けるには、以下のコードで可能です。

const name = {
  name1: 'akai',
  name2: 'aoi',
  name3: 'midori',
};

let {name1, name2, name3} = name;
 
console.log(name1, name2, name3);  // akai aoi midori

サンプルコード

以下は、
「変換」ボタンをクリックすると、用意したオブジェクトに分割代入を使用して各valueを表示する
サンプルコードとなります。

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

アロー関数の使い方

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

<head>
  <meta charset="utf-8">
  <title>mebeeサンプル</title>
  <!-- Font Awesome -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" />
  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
  <!-- MDB -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/4.1.0/mdb.min.css" rel="stylesheet" />
</head>

<body>
  <div class="container text-center w-25" style="margin-top:150px">

    <h2><span class="badge badge-success"></span></h2>
    <h2><span id="txt" class="badge badge-success">取得後</span></h2>

    <button id="btn" type="button" class="btn btn-raised btn-danger">
      取得
    </button>

  </div>

  <script>

    // オブジェクト
    const obj = {
      name1: 'akai',
      name2: 'aoi',
      name3: 'midori',
    };

    const hoge = () => {

      let text = [];

      let { name1, name2, name3 } = obj;

      document.getElementById('txt').innerHTML = name1 + " : " + name2 + " : " + name3;

    }

    window.onload = () => {

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

      // JSON 文字列に変換してオブジェクトを表示
      elm.textContent = JSON.stringify(obj);

      // クリックイベントを登録
      btn.onclick = () => {
        hoge();
      };

    }

  </script>

</body>

</html>

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