如何在 JavaScript 中建立物件屬性？

JavaScript 物件屬性是 JavaScript 物件主體內的鍵。物件屬性可以是三種基本資料型別中的任何一種，或者可以是任何抽象資料型別，例如另一個物件。物件屬性通常是物件方法內部使用的變數，但也可以是全域性可見的變數，這些變數在整個頁面中使用。這些屬性可以在物件宣告時由程式設計師靜態型別化，也可以根據需要在以後修改或建立。

有兩種方法可以建立或向 JavaScript 物件新增屬性：

  • 使用點表示法
  • 使用方括號表示法

讓我們結合程式碼示例逐一學習它們。

使用點表示法

您可以使用點語法新增或建立 JavaScript 物件屬性。要使用點語法，請在新的屬性或鍵名與現有物件的名稱之間使用點，並透過賦值運算子為其分配值，如下所示：

語法

以下是使用點語法建立或向 JavaScript 物件新增新屬性的語法：

objectName.propertyName = propertyValue;

在上述語法中，objectName 是一個已宣告的 JavaScript 物件，我們向其中新增名為 propertyName 的新屬性或鍵，而在賦值運算子的右側，propertyValue 是必須分配給該特定新建立或新增的屬性或鍵的值。

演算法

  • 步驟 1 - 作為建立或向 JavaScript 物件新增新屬性的第一步，您需要根據上面討論的語法建立一個 JavaScript 物件。
  • 步驟 2 - 在下一步中，您需要使用上面討論的點語法新增或建立新的 JavaScript 物件屬性或鍵。
  • 步驟 3 - 在此過程的第三步或最後一步中，您需要在螢幕上顯示帶有新新增或建立的屬性的物件。

示例 1

以下示例將說明使用點語法建立或向已存在的 JavaScript 物件新增新屬性（該物件具有多個屬性）：

<!DOCTYPE html>
<html>
<body>
   <h3>Creating new object property using Dot Notation.</h3>
   <p>Create or add a new property named "title" to the existing object "obj"</p>
   <p id="result">Resultant object:<br></p>
   <script>
      let obj = {
         company: "tutorialspoint",
         article: 1
      };
      obj.title = "How to create object properties in JavaScript?";
      console.log(obj);
      document.getElementById("result").innerHTML +=
      JSON.stringify(obj);
   </script>
</body>
</html>

在上面的示例中，我們看到一個名為“obj”的已存在的 JavaScript 物件，它以前具有“company”和“article”屬性，透過使用點語法新增名為“title”的新屬性來擴充套件它。

使用方括號表示法

這是建立或向 JavaScript 物件新增屬性的另一種方法。在此表示法中，物件的名稱後跟方括號，方括號內包含作為字串傳遞的屬性名，並且值將使用賦值運算子分配，就像在點表示法中分配的那樣。

語法

以下是使用方括號語法新增或建立 JavaScript 物件新屬性的語法：

objectName[“propertyName”] = propertyValue;

在上述語法中，objectName 是一個已存在的 JavaScript 物件，其屬性透過新增名為 propertyName 的新屬性（在方括號和雙引號內）而增加了一個，而在賦值運算子的右側，propertyValue 是將分配給物件新建立或新增的屬性的實際值。

演算法

  • 步驟 1 - 在第一步中，您將建立一個具有多個屬性的 JavaScript 物件，稍後您將向其中新增屬性。
  • 步驟 2 - 此過程的第二步涉及使用方括號語法新增或建立 JavaScript 物件屬性。
  • 步驟 3 - 最後一步或第三步將在使用者螢幕上顯示物件。以便使用者可以清楚地看到在新增新屬性之前和之後物件屬性的變化。

示例 2

以下示例將說明使用方括號語法建立或向已存在的 JavaScript 物件新增新屬性（該物件具有多個屬性）：

<html>
<body>
   <h3>Creating new object property using square brackets Notation.</h3>
   <p>Create or add a new property named "title" to the existing object "obj".</p>
   <p id="result">Resultant object:<br></p>
   <script>
      let obj = {
         company: "tutorialspoint",
         article: 1
      };
      obj["title"] = "How to create object properties in JavaScript?";
      console.log(obj);
      document.getElementById("result").innerHTML +=
      JSON.stringify(obj);
   </script>
</body>
</html>

在上面的示例中，我們看到一個名為“obj”的已存在的 JavaScript 物件，它以前具有“company”和“article”屬性，透過使用方括號語法新增名為“title”的新屬性來修改它。

正如我們所看到的，在 JavaScript 中新增或建立物件屬性的兩種語法的輸出是相似的。因此，上面討論的兩種語法都是有效的，可以用來建立新屬性或新增JavaScript 物件中的屬性。

注意

在上面討論的兩種表示法中，點表示法是向 JavaScript 物件新增或建立新屬性的一種更方便且首選的方式，因為它與方括號表示法相比，簡單易用。

更新於： 2022-10-31

339 次檢視

開啟您的 職業生涯

透過完成課程獲得認證

開始學習
廣告