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

JavaScriptでネストされたオブジェクトのプロパティを変更する2つの方法

JavaScriptでネストされた（入れ子になった）オブジェクトのプロパティを変更するには、主に2つの方法があります。ひとつはドット記法、もうひとつはブラケット記法（角括弧記法）です。

どちらの方法も機能はまったく同じで、違いは記述の形式だけです。それぞれの書き方を詳しく見ていきましょう。

ドット記法を使う方法

例

次の例では、最初はcountryプロパティの値が「England」に設定されています。しかしドット記法を使って値を変更すると、「India」に書き換えられます。

<html>
<body>
<script>
   var person;
   var txt = '';
   person = {
      "name":"Ram",
      "age":27,
      "address": {
         "houseno":123,
         "streetname":"Baker street",
         "country":"England"
      }
   }
   document.write("Before change : " + " " + person.address.country);
   person.address.country = "India";
   document.write("</br>");
   document.write("After change : " + " " + person.address.country);
</script>
</body>
</html>

出力結果

Before change : England
After change : India

person.address.country = "India"; のように、各階層のプロパティをドット（.）でつなげてアクセスし、新しい値を代入するだけで変更できます。コードが直感的で読みやすいのが特徴です。

ブラケット記法を使う方法

例

次の例では、ブラケット記法を使ってcountryプロパティの値を「England」から「India」に変更しています。

<html>
<body>
<script>
   var person;
   var txt = '';
   person = {
      "name":"Ram",
      "age":27,
      "address": {
         "houseno":123,
         "streetname":"Baker street",
         "country":"England"
      }
   }
   document.write("Before change : " + " " + person.address["country"]);
   person.address.country = "India";
   document.write("</br>");
   document.write("After change : " + " " + person.address["country"]);
</script>
</body>
</html>

出力結果

Before change : England
After change : India

ブラケット記法では person.address["country"] のように、プロパティ名を文字列として角括弧内に指定します。

使い分けのポイント

両者の出力結果はまったく同じですが、以下のような場面ではブラケット記法が便利です。

  • プロパティ名を変数から動的に指定したい場合：person[key]
  • ハイフンやスペースなど、識別子として無効な文字を含むプロパティ名にアクセスする場合

一方、通常はドット記法の方が簡潔で可読性が高いため、特別な理由がなければドット記法を使用するのがおすすめです。

  1. JavaScriptでプロパティにアクセスする3つの方法｜ドット記法・角括弧・分割代入の使い分け

    JavaScriptでオブジェクトのプロパティにアクセスする3つの方法 JavaScriptには、オブジェクトが持つプロパティ（キーと値のペア）を参照するための方法が主に3つあります。どれも同じ値を取得できますが、それぞれ特徴や向いている場面が異なるため、正しく使い分けられるとコードの可読性と保守性が大きく向上します。 ドット記法：object.property 角括弧記法：object[property] 分割代入：let {property} = object 1. ドット記法（object.property） 最もシンプルで読みやすい記法です。obj.a のようにピリオドでつなぐだけ

  2. JavaScriptで既存のオブジェクトにプロパティとメソッドを追加する方法

    JavaScriptのオブジェクトは動的な性質を持っており、一度作成した後でも、いつでも新しいプロパティやメソッドを追加できます。最もシンプルな方法は、ドット記法（オブジェクト名.プロパティ名）を使って値を代入することです。プロパティに関数を代入すれば、それがそのままメソッドとして機能します。 基本的な書き方 object.newProperty = value; object.newMethod = function() {   // 処理 }; サンプルコード 以下は、既存の student オブジェクトにプロパティとメソッドを追加し、その内容を画面に表示する完全な例で