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

JavaScriptのドット記法（ドット表記）でオブジェクトのプロパティにアクセスする方法

JavaScriptでは、ドット記法（ドット表記）を使うことで、オブジェクトのプロパティに簡単にアクセスできます。オブジェクト名の後に「.」（ドット）を付け、続けてプロパティ名を記述するだけで、その値を取得したり設定したりできます。

この記事では、ドット記法の基本的な使い方を、実際に動作するサンプルコードと実行結果とともにわかりやすく解説します。

ドット記法の基本構文

ドット記法は、次の形式で記述します。

オブジェクト名.プロパティ名

たとえば student.name と書けば、student オブジェクトの name プロパティの値を取得できます。

サンプルコード

次の例では、コンストラクタ関数で生成した学生オブジェクトのプロパティに対して、ボタンをクリックしたタイミングでドット記法を使ってアクセスし、その結果を画面に表示します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScriptのドット記法</title>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   .result {
      font-size: 20px;
      font-weight: 500;
      color: blueviolet;
   }
</style>
</head>
<body>
<h1>JavaScriptのドット記法</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>上のボタンをクリックすると、ドット記法でstudent1オブジェクトのプロパティにアクセスします</h3>
<script>
   let resEle = document.querySelector(".result");
   let BtnEle = document.querySelector(".Btn");
   function Student(name, age, standard) {
      this.name = name;
      this.age = age;
      this.standard = standard;
   }
   let student1 = new Student("Rohan", 18, 12);
   BtnEle.addEventListener("click", () => {
      resEle.innerHTML = "student1.name = " + student1.name + "<br>";
      resEle.innerHTML += "student1.age = " + student1.age + "<br>";
      resEle.innerHTML += "student1.standard = " + student1.standard + "<br>";
   });
</script>
</body>
</html>

実行結果

上記のコードをブラウザで開くと、次のような画面が表示されます。

JavaScriptのドット記法（ドット表記）でオブジェクトのプロパティにアクセスする方法

「CLICK HERE」ボタンをクリックすると、ドット記法で取得した各プロパティの値が次のように表示されます。

JavaScriptのドット記法（ドット表記）でオブジェクトのプロパティにアクセスする方法

ドット記法を使う際のポイント

  • ドット記法は「オブジェクト名.プロパティ名」の形式でプロパティにアクセスします。
  • ドット記法で指定できるプロパティ名は、変数名として有効な識別子である必要があります。
  • プロパティ名に空白やハイフンなどの特殊文字が含まれる場合は、ブラケット記法（obj["property-name"]）を使用してください。
  1. JavaScriptのWeakSetとは？特徴と主要メソッド、サンプルコードをわかりやすく解説

    JavaScriptのWeakSet（ウィークセット）は、オブジェクトを格納するためのコレクションです。Setと同様に、同じオブジェクトを重複して保存することはできません。WeakSetの主な特徴弱い参照で保持する：WeakSet内のオブジェクトへの参照が他に存在しなくなると、ガベージコレクションによって自動的にメモリから解放されます。そのため、メモリリークを防ぎたい場面で役立ちます。オブジェクトのみ格納可能：数値や文字列などのプリミティブ値は追加できません。列挙できない：Setのようなsizeプロパティや反復処理の仕組みを持たず、格納されている要素の一覧を取得することはできません。WeakS

  2. JavaScriptのドット表記とブラケット表記の違いを解説！正しい使い分けのポイント

    JavaScriptには、オブジェクトのプロパティへアクセスするための方法としてドット表記（dot notation）とブラケット表記（bracket notation）の2つがあります。どちらも同じプロパティにアクセスできますが、それぞれに特徴があり、使い分けることでより柔軟で読みやすいコードを書くことができます。一般的には、簡潔で可読性の高いドット表記が最もよく使われています。しかし両者の最大の違いは、ブラケット表記では変数を使ってプロパティ名を動的に指定できるという点です。ドット表記とはドット表記は、object.property のように、オブジェクト名の後にドット（.）を付けてプロパ