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

JavaScriptオブジェクトの内容を表示・出力する方法を解説

JavaScriptでオブジェクトの中身（プロパティと値）を確認したい場面は開発中によくあります。ここでは、for...inループを使ってオブジェクトのすべてのプロパティと値を取り出し、画面に表示する方法を紹介します。

for...inループでオブジェクトの内容を出力する

次のコードは、for...inループでオブジェクトの各プロパティを順に処理し、プロパティ名と値を文字列として組み立て、alert()で表示する例です。

<!DOCTYPE html>
<html>
  <body>
    <script>
      function display(obj) {
        var res = '';
        for (var a in obj) {
          res += a + ': ' + obj[a] + '\n';
        }
        alert(res);
      }

      var newObject = {'Amit': 70778, 'Sachin': 87547, 'Saurav': 57535};
      display(newObject);
    </script>
  </body>
</html>

コードのポイント

  • for...inループは、オブジェクトの列挙可能なプロパティ名を順番に取得します。
  • obj[a]のようにブラケット記法を使うことで、変数に格納されたプロパティ名から対応する値へアクセスできます。
  • 取得した「プロパティ名: 値」を改行文字\nで連結し、読みやすい形式にしています。

その他の便利な方法

console.log()を使う

デバッグ時には、ブラウザの開発者ツール（コンソール）に出力するのが最も手軽です。

var newObject = {'Amit': 70778, 'Sachin': 87547, 'Saurav': 57535};
console.log(newObject);

コンソールではオブジェクトがツリー形式で展開され、ネストした構造も視覚的に確認できます。

JSON.stringify()を使う

オブジェクトを整形して文字列として出力したい場合は、JSON.stringify()が便利です。第3引数にインデント幅を指定すると、見やすく整形されます。

var newObject = {'Amit': 70778, 'Sachin': 87547, 'Saurav': 57535};
console.log(JSON.stringify(newObject, null, 2));

まとめ

シンプルなオブジェクトならfor...inループでの自前実装でも十分ですが、日常的な開発ではconsole.log()やJSON.stringify()を使う方が簡潔で可読性も高くなります。用途に応じて使い分けるとよいでしょう。

  1. JavaScriptで多次元オブジェクトを作成する方法【サンプルコード付き】

    はじめに JavaScriptでは、オブジェクトのプロパティの値として別のオブジェクトを持たせることで、多次元（ネストされた）オブジェクトを作成できます。この構造を活用すると、氏名や学校情報、住所のように階層関係のあるデータを、直感的かつ整理された形で表現することが可能です。 サンプルコード 以下は、多次元JavaScriptオブジェクトを作成し、コンソールに表示するためのコード例です。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /

  2. JavaScriptオブジェクトの内容を文字列として表示する方法

    JavaScriptでオブジェクトの内容を文字列形式で画面に表示したい場合、document.getElementById()でHTML要素を取得し、innerHTMLを使って書き出すのが基本的な方法です。オブジェクトを文字列に変換するには、JSON.stringify()メソッドを活用します。 実装手順 まず、表示先となるHTML要素にIDを設定します。次に、JavaScript側でそのIDを指定して要素を取得し、変換した文字列をinnerHTMLに代入します。 コード例 <!DOCTYPE html> <html lang="ja"> <h