javascript オブジェクトの最初の値を取得する

作成日 2022.11.18
javascript
javascript

javascriptで、オブジェクトの最初の値を取得するサンプルコードを記述してます。「Object.values」で値を配列化して「shift」で最初の値を取得します。keyと値(value)を配列で取得する場合は「Object.entries」を使用します。

1. 環境
2. オブジェクトの最初の値を取得
3. サンプルコード

環境

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

Javascript サンプル集はこちら

オブジェクトの最初の値を取得

オブジェクトの最初の値を取得するには「keys」でキーを「value」で値を取得して「shift」を使用します。

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

const key = Object.keys(obj).shift();
console.log(key); 
// one

const value = Object.values(obj).shift();
console.log(value); 
// 1

let lastObj = {};

lastObj[key] = value;

console.log(lastObj); 
// {one: 1}

console.log({[key]:value}); 
// {one: 1}

console.log(obj);
// {one: 1, two: 2, three: 3}

「Object.entries」を使用すると配列で取得することができます。

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

const arr = Object.entries(obj).shift();
console.log(arr); 
// ['one', 1]

console.log(obj);
// {one: 1, two: 2, three: 3}

サンプルコード

以下は、
「取得」ボタンをクリックすると、用意したオブジェクトから最初の値を取得して表示する
サンプルコードとなります。

※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>
    <h2><span class="badge badge-success">最初のオブジェクト</span></h2>

    <button type="button" onclick="hoge()" class="btn btn-raised btn-success">
      取得
    </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).shift()]:Object.values(obj).shift()});

    }

  </script>
</body>

</html>

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