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

JavaScriptのオブジェクトとは？プロパティへのアクセス方法を実例付きで解説

JavaScriptにおいて、オブジェクトは最も重要な概念の一つです。ブーリアン値、数値、文字列、関数など、言語を構成するほぼすべてのものがオブジェクトとして扱われます。本記事では、オブジェクトのプロパティにアクセスする基本的な方法を、実際のコード例とともにわかりやすく解説します。

オブジェクトのプロパティへアクセスする

オブジェクトのプロパティには、主に「ドット記法（.）」を使ってアクセスします。また、配列の中にオブジェクトが入れ子になっている場合でも、「[インデックス]」を組み合わせることで、深い階層にある値も簡単に取り出せます。

例1：入れ子になった配列内のプロパティにアクセスする

次の例では、myObj オブジェクト内の family 配列（中身はオブジェクト）から、最初の要素の mother プロパティの値を取得しています。

<html>
<body>
<script>
    myObj = {"name":"Ramesh","age":30,"family":
            [{"mother":"Geetha","father":"Rao"}],"city":"Berlin"};
            var res = myObj.family[0].mother;
  document.write(res);
</script>
</body>
</html>

出力結果

Geetha

このように、myObj.family[0].mother と記述することで、オブジェクト → 配列 → オブジェクトという入れ子構造をたどり、目的の値「Geetha」を取得できています。

例2：直接のプロパティにアクセスする

オブジェクト直下のプロパティであれば、ドット記法だけでシンプルにアクセスできます。次の例では city プロパティの値を取得しています。

<html>
<body>
<script>
    myObj = {"name":"Ramesh","age":30,"family":
            [{"mother":"Geetha","father":"Rao"}],"city":"Berlin"};
    var res = myObj.city;
    document.write(res);
</script>
</body>
</html>

出力結果

Berlin

まとめ

JavaScriptのオブジェクトは、アプリケーション開発のあらゆる場面で登場する基本要素です。プロパティへのアクセスは「ドット記法」が基本であり、配列や入れ子構造の場合はインデックス指定を組み合わせることで、どの階層のデータでも自由に取り出すことができます。まずは上記のコード例を実際に動かしてみて、オブジェクト操作の感覚をつかんでみましょう。

  1. JavaScriptでオブジェクトを作成し、プロパティにアクセスする方法を徹底解説

    JavaScriptでは、オブジェクトリテラル（波括弧 {}）を使うことで、キーと値のペアを持つオブジェクトを簡単に作成できます。作成したオブジェクトのプロパティには、ドット記法（obj.propertyName）やブラケット記法（obj[propertyName]）でアクセスします。 以下は、JavaScriptでオブジェクトを作成し、そのプロパティやメソッドにアクセスする具体的なコード例です。 コード例 <!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <meta

  2. JavaScriptでidプロパティを使って複雑なネスト構造のオブジェクトを検索する方法

    はじめにJavaScriptでは、入れ子構造（ネスト）になったJSONオブジェクトの中から、特定の条件に一致するサブオブジェクトを取り出したい場面がよくあります。本記事では、「id」のキーと値のペアを指定して、階層構造全体から該当するオブジェクトを再帰的に検索する関数の実装方法を解説します。対象となるデータ構造例として、次のような複雑なJSONオブジェクトを考えてみましょう。const obj = { id: 0001, fieldName: sample1, fieldValue: 0001, subList: [ { id: 1001, fi