javascript オブジェクトをインデックス番号を指定して取得する

作成日 2022.11.04
javascript
javascript

javascriptで、オブジェクトをインデックス番号を指定して取得するサンプルコードを記述してます。「Object.keys」と「Object.values」でkeyとvalueを配列化した後にインデックスを指定することで可能です。インデックス番号が存在しないと「undefined」が返ります。

1. 環境
2. インデックス番号を指定して取得
3. サンプルコード

環境

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

Javascript サンプル集はこちら

インデックス番号を指定して取得

オブジェクトをインデックス番号を指定して取得するには「Object.keys」と「Object.values」にインデックス番号を指定することで取得できます。

const obj = {one: 1, two: 2, three: 3};

const zeroKey = Object.keys(obj)[0];
console.log(zeroKey);
// one

const zeroValue = Object.values(obj)[0];
console.log(zeroValue);
// 1

console.log({[zeroKey]:zeroValue}); 
// {one: 1}

const oneKey = Object.keys(obj)[1];
console.log(oneKey);
// two

const oneValue = Object.values(obj)[1];
console.log(oneValue);
// 2

console.log({[oneKey]:oneValue}); 
// {two: 2}

存在しないインデックス番号を指定すると「undefined」が返ります。

const obj = {one: 1, two: 2, three: 3};

const k = Object.keys(obj)[3];
console.log(k);
// undefined

const v = Object.values(obj)[3];
console.log(v);
// undefined

console.log({[k]:v}); 
// {undefined: undefined}

サンプルコード

以下は、
「取得」ボタンをクリックすると、2番目にあるオブジェクトをインデックス番号で取得して表示する
サンプルコードとなります。

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

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

  </div>

  <script>

    let obj = { one: 1, two: 2, three: 3 };

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

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

    const hoge = () => {

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

      // JSON 文字列に変換して表示
      elm.textContent = JSON.stringify({[Object.keys(obj)[1]]:Object.values(obj)[1]});

    }

  </script>
</body>

</html>

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