javascript 二次元配列からオブジェクトを生成する

作成日 2022.11.30
javascript
javascript

javascriptで、二次元配列からオブジェクトを生成するサンプルコードを記述してます。「forEach」などを使用して配列の要素を取得してオブジェクトを生成します。また、オブジェクトの「key」は重複できないので、同じキーがあった場合は後の値が優先されます。

1. 環境
2. 二次元配列からオブジェクトを生成
3. reduce
4. サンプルコード

環境

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

Javascript サンプル集はこちら

二次元配列からオブジェクトを生成

二次元配列からオブジェクトを生成するには
1.　「forEach」で各二次元配列の要素をkeyとvalueで取得
2.　用意した空のオブジェクトに挿入
で可能です。

const arr = [[1, "aaa"],[2, "bbb"],[3, "ccc"]];
let obj = {};

arr.forEach(
    function(v) {
      
      // keyとvalueを用意
      let key = v[0];
      let value = v[1];

      // オブジェクト生成
      obj[key] = value;
    }
  );
  
console.log(
  obj // {1: 'aaa', 2: 'bbb', 3: 'ccc'}
);

配列の個数が少ない場合は「undefined」となり、多い場合は、使用されません。

const arr = [[1],[2, "bbb", 222],[3, "ccc"]];
let obj = {};

arr.forEach(
    function(v) {
      
      // keyとvalueを用意
      let key = v[0];
      let value = v[1];

      // オブジェクト生成
      obj[key] = value;
    }
  );
  
console.log(
  obj // {1: undefined, 2: 'bbb', 3: 'ccc'}
);

またオブジェクトの「key」は同じキーは持てないので、重複すると後に取得した値が挿入されます。

const arr = [[1, "aaa"],[1, "bbb"],[3, "ccc"]];
let obj = {};

arr.forEach(
    function(v) {
      
      // keyとvalueを用意
      let key = v[0];
      let value = v[1];

      // オブジェクト生成
      obj[key] = value;
    }
  );
  
console.log(
  obj // {1: 'bbb', 3: 'ccc'}
);

reduce

「reduce」を使用する方法もあります。

const arr = [[1, "aaa"],[2, "bbb"],[3, "ccc"]];

const obj = arr.reduce(
    function(acc, curr) {
      
      // keyとvalueを用意
      let key = curr[0];
      let value = curr[1];

      // オブジェクト生成
      acc[key] = value;

      return acc;
    },{}
  );
  
console.log(
  obj // {1: 'aaa', 2: 'bbb', 3: 'ccc'}
);

サンプルコード

以下は、
「実行」ボタンをクリックすると、用意したランダムな二次元配列をオブジェクトに変換して表示する
サンプルコードとなります。

※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-25" style="margin-top:150px">

    <h2><span class="badge badge-success">実行結果</span></h2>
    <ul id="txt" class="list-group"></ul>

    <button id="btn" type="button" class="btn btn-raised btn-success">
      実行
    </button>

  </div>

  <script>

    const toObj = () => {

      // ランダムな2個の整数1桁の配列を生成
      const arr1 = Array(2).fill().map(x => ~~(Math.random() * 10));
      const arr2 = Array(2).fill().map(x => ~~(Math.random() * 10));

      // 二次元配列を生成
      const arr = [arr1, arr2]

      // 表示
      disp(arr, "txt");

      // 結果を表示
      document.getElementsByClassName('badge')[0].textContent = JSON.stringify(
        arr.reduce(
          (acc, curr) => {
            // keyとvalueを用意
            let key = curr[0];
            let value = curr[1];

            // オブジェクト生成
            acc[key] = value;

            return acc;
          }, {}
        )
      )
    }

    //フロントに表示する関数
    const disp = (arr, id) => {

      let text = [];

      // for ofを使用
      for (let item of arr) {
        text.push('<li class="list-group-item">' + JSON.stringify(item) + '</li>');
      }

      //innerHTMLを使用して表示    
      document.getElementById(id).innerHTML = text.join('');

    }

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

  </script>
</body>

</html>

生成されていることが確認できます。