JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのObject.values()メソッド徹底解説：オブジェクトの値を配列として取得する方法

JavaScriptのObject.values()メソッドは、オブジェクト内の値の一覧を取得するためのメソッドです。戻り値の配列を反復処理することで、オブジェクトが持つ各値の内容を簡単に確認できます。

オブジェクトはキーと値のペアで構成されていますが、場合によっては値だけを取り出したいことがあります。例えば、リーダーボードに登録されている全員の名前を格納したオブジェクトがあるとしましょう。この場合、名前に関連付けられたキー(順位など)ではなく、名前だけを取得したいはずです。

そんなときに役立つのがObject.values()メソッドです。このメソッドを使えば、オブジェクト内のすべての値を一度に確認できます。本記事では、Object.values()メソッドの使い方を、具体的なコード例とともにわかりやすく解説します。

JavaScriptのObject.values()メソッドとは

Object.values()メソッドは、引数に渡されたオブジェクトの列挙可能なプロパティの値を配列として返します。配列内の値の順序は、for...inループなどでオブジェクトを手動で走査して配列に追加した場合と同じになります。

まずは基本的な構文を見てみましょう。

let players = {
  a: "lucy",
  b: "harry"
};

console.log(Object.values(players));

Object.values()メソッドは、値を取得したいオブジェクトの名前を1つの引数として受け取ります。上記のコードでは、メソッドの実行結果をコンソールに出力しています。

このコードを実行すると、オブジェクト内のプレイヤー名「lucy」と「harry」が配列として返され、コンソールに表示されます。

["lucy", "harry"]

注目すべきは、値が元のオブジェクト内と同じ順序で配列に格納されている点です。

Object.values()メソッドを使えば、オブジェクトから値を簡単に取得できます。これを使わない場合は、新しい配列を作成し、forループでオブジェクトを反復処理しながら各値を1つずつ配列に追加していく必要があります。しかし、この方法はコード量が増え、記述にも手間がかかります。

それでは、実際にこのメソッドを使った例を見ていきましょう。

Object.values()の実践的な使用例

次に、カリフォルニア州の都市サンノゼに関する情報を格納したオブジェクトを例に考えてみましょう。各データに関連付けられたラベル(キー)ではなく、都市に関する情報(値)だけをすべて取得したいとします。

オブジェクトには次のようなキーと値のペアが含まれています。

city: "San Jose",

この場合、ラベルの「city」ではなく、都市名の「San Jose」だけを取得したいわけです。

これを実現するプログラムの全体像は以下のとおりです。

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
   <title></title>
 </head>
 <body>
   <div id="root"></div>
  <script async defer>

   const cityData = {
     city: "San Jose",
     state: "California",
     area: 181.36,
     land: 178.24,
     water: 3.12,
     urban: 342.27,
     metro: 2694.61,
     elevation: 82,
     population: 1021795,
     timezone: "Los_Angeles/Pacific",
     website: "www.sanjoseca.gov"
   }
   let arr = Object.values(cityData);

   let root = document.getElementById('root');
   root.innerHTML = JSON.stringify(arr);

  </script>
 </body>
</html>

まず、<head>タグ、<body>タグ、および<head>タグ内に基本的なメタ情報を含む標準的なHTMLページを用意します。

JavaScriptのコードは<script>タグ内に記述します。このタグ内では、cityDataという名前のJavaScriptオブジェクトを宣言しています。

次に、Object.values()メソッドを使ってこのオブジェクトの値を取得します。その後、getElementByIdメソッドを使って、idが「root」の<div>要素を取得します。これが上記コードにおけるgetElementByIdメソッドの使用例です。

<div>要素を選択したら、その内容をObject.values()メソッドの実行結果で置き換えます。

このコードを実行すると、次の配列が出力されます。

["San Jose","California", 181.36, 178.24, 3.12, 342.27, 2694.61, 82, 1021795, "Los_Angeles/Pacific", "www.sanjoseca.gov"]

元のオブジェクト内のすべての値が、配列として正しく取得できていることがわかります。

まとめ

JavaScriptのObject.values()メソッドは、オブジェクト内の値を配列として返します。引数は1つだけで、値を取得したいオブジェクトの名前を指定します。オブジェクトからキーを除いた値だけを手軽に取り出したい場面で、ぜひ活用してみてください。

JavaScriptのオブジェクトについてさらに学びたい方は、以下の関連チュートリアルも参考にしてください。

  • JavaScript Object.keys()メソッドの使い方ガイド
  • JavaScriptオブジェクトの基礎ガイド
  • JavaScriptクラス入門ガイド
  1. JavaScriptのBlobオブジェクトとは？基本と使い方をわかりやすく解説

    Blobオブジェクトとは Blob（Binary Large Object）オブジェクトは、不変（イミュータブル）な生データを表現するためのオブジェクトです。Blobはファイルと同じように、データのサイズを表す size プロパティと、MIMEタイプを表す type プロパティを持っています。 File オブジェクトはBlobの派生オブジェクトであるため、Fileが利用できる場面であれば、Blobもそのまま使用することが可能です。 Blobの主な用途としては、テキストやバイナリデータの生成、URL.createObjectURL() を使った一時的なURLの作成、ファイルのダウンロード処理など

  2. 【JavaScript】配列内のネストされたオブジェクトの値を合計する方法

    この記事では、JavaScriptを使って、配列内にネストされた（入れ子構造の）オブジェクトの値を合計する方法を解説します。サンプルコードでは、JSONデータの複数階層に格納された数値（costNum）を順番に取り出し、その合計をブラウザ上に表示します。 コード例 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=d