javascript オブジェクトを反転させる

作成日 2022.11.14
javascript
javascript

javascriptで、オブジェクトを反転させるサンプルコードを記述してます。「Object.keys」を使用してkeyを配列化して反転した後に、反転したkeyから値を指定してオブジェクトを生成します。

1. 環境
2. オブジェクトを反転
3. サンプルコード

環境

OS windows11 pro 64bit
ブラウザ chrome 107.0.5304.107

Javascript サンプル集はこちら

オブジェクトを反転

オブジェクトを反転させるには、
1.　「Object.keys」でkeyのみを配列化
2.　「reverse」で反転
3.　「key」を元に「value」も反転
で可能です。

const obj = {
  a: 1,
  b: 2,
  c: 3,
};

const reversedKeys = Object.keys(obj).reverse();

// 反転後のオブジェクト
let reversedobj = {};

// 反転したオブジェクトを生成
reversedKeys.forEach(function(key){
  reversedobj[key] = obj[key];
});

console.log( reversedobj ); // {c: 3, b: 2, a: 1}

サンプルコード

以下は、
「実行」ボタンをクリックすると、用意したオブジェクトを反転させて表示するサンプルコードとなります。

※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-primary"></span></h2>
    <h2><span class="badge badge-primary">結果</span></h2>

    <button type="button" onclick="reversed()" class="btn btn-raised btn-primary">
      実行
    </button>

  </div>

  <script>

    const obj = {name: 'mebee', age: 25, address: 'tokyo'};

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

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

    const reversed = () => {

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

      // keyを反転
      const reversedKeys = Object.keys(obj).reverse();

      // 反転後のオブジェクト
      let reversedobj = {};

      // 反転したオブジェクトを生成
      reversedKeys.forEach(key => {
        reversedobj[key] = obj[key];
      });

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

    }

  </script>
</body>

</html>

反転された結果が表示されていることが確認できます。