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

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

はじめに

JavaScriptでは、オブジェクトのプロパティの値として別のオブジェクトを持たせることで、多次元（ネストされた）オブジェクトを作成できます。この構造を活用すると、氏名や学校情報、住所のように階層関係のあるデータを、直感的かつ整理された形で表現することが可能です。

サンプルコード

以下は、多次元JavaScriptオブジェクトを作成し、コンソールに表示するためのコード例です。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 18px;
        font-weight: 500;
        color: rebeccapurple;
}
</style>
</head>
<body>
<h1>Create a multidimensional JavaScript object</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to create and display a multidimensional object</h3>
<script>
    let resEle = document.querySelector(".result");
    let BtnEle = document.querySelector(".Btn");
    BtnEle.addEventListener("click", () => {
        let obj = {
            firstName: "Rohan",
            lastName: "Sharma",
            school: {
                name: "St Marks",
                address: {
                    city: "Dwarka",
                    state: "Delhi",
                },
            },
        };
        console.log(obj);
    });
</script>
</body>
</html>

出力結果

上記のコードを実行すると、画面には見出しと「CLICK HERE」ボタンが表示されます。

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

「CLICK HERE」ボタンをクリックした後、開発者ツールのコンソールで出力を確認すると、作成された多次元オブジェクトが階層構造のまま表示されます。

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

ポイント解説

  • プロパティの値としてオブジェクトリテラル { } を指定することで、任意の深さまでオブジェクトをネストできます。
  • この例では obj.school.name や obj.school.address.city のように、ドット記法を使ってネストされたプロパティにアクセスできます。
  • console.log(obj) を使えば、オブジェクト全体の構造をコンソール上で手軽に確認でき、デバッグにも役立ちます。
  1. JavaScriptでURLオブジェクトを作成する方法をわかりやすく解説

    JavaScriptでは、標準組み込みのURLコンストラクタを使うことで、URL文字列からURLオブジェクトを簡単に生成できます。URLオブジェクトを作成すると、プロトコル（protocol）やホスト名（host）、パス（pathname）など、URLを構成する各要素に個別にアクセスできるようになるため、URLの解析や操作がとても便利になります。 URLオブジェクトの作成例 以下は、JavaScriptでURLオブジェクトを作成し、ボタンをクリックするとその各プロパティを画面に表示するサンプルコードです。 <!DOCTYPE html> <html lang="

  2. 【JavaScript入門】Symbolを使ってオブジェクトごとに一意のIDを作成する方法

    はじめにJavaScriptでオブジェクトごとに一意のIDを作成したい場合、Symbol()を使うのが最も簡単かつ確実な方法です。Symbolは呼び出されるたびに必ず新しい一意の値を生成するため、たとえ同じ説明文字列を渡しても、二度と同じ値にはなりません。以下は、各オブジェクトに対して一意のIDを作成するサンプルコードです。実装例<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewp