如何在 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 次查看

开启您的 职业生涯

通过完成课程获得认证

开始学习
广告

© . All rights reserved.