javaScript中的对象语法

关键要点

• 理解 JavaScript 对象对于在该语言中成功开发至关重要，因为许多内置数据类型都表示为对象。对象是由基元和其他对象构建的复合数据类型，其属性描述对象的各个方面。
• 通过多种方法可以在 JavaScript 中创建和访问对象。对象文字表示法（用大括号表示）允许快速创建具有键/值对的对象。可以通过点表示法或方括号表示法访问对象属性，方括号表示法为变量属性名称或包含特殊字符的属性名称提供了更大的灵活性。
• 用作对象属性的函数称为方法，可以使用点表示法和方括号表示法调用它们。可以通过赋值语句将属性和方法添加到现有对象中，并且可以通过将点和/或方括号引用链接在一起访问嵌套对象的属性。

JavaScript 对象是该语言的基石。许多内置数据类型（例如错误、正则表达式和函数）在 JavaScript 中都表示为对象。要成为一名成功的 JavaScript 开发人员，您必须牢固掌握对象的运作方式。本文将教您 JavaScript 对象创建和操作的基础知识。对象是复合数据类型，由基元和其他对象构建而成。对象的构建块通常被称为其字段或属性。属性用于描述对象的某些方面。例如，属性可以描述列表的长度、狗的颜色或人的出生日期。

创建对象

在 JavaScript 中创建对象很容易。该语言提供了称为对象文字表示法的语法，用于快速创建对象。对象文字用大括号表示。以下示例创建一个没有属性的空对象。

<code class="language-javascript">var object = {};</code>

在大括号内，属性及其值被指定为键/值对列表。键可以是字符串或标识符，而值可以是任何有效的表达式。键/值对列表用逗号分隔，每个键和值用冒号分隔。以下示例使用文字表示法创建一个具有三个属性的对象。第一个属性 foo 存储数字 1。第二个属性 bar 使用字符串指定，也存储字符串值。第三个属性 baz 存储一个空对象。

<code class="language-javascript">var object = {
  foo: 1,
  "bar": "some string",
  baz: {
  }
};</code>

请注意前面示例中空格的使用。每个属性都写在单独一行并缩进。整个对象可以写在单行上，但是以这种格式编写的代码更易读。对于具有许多属性或嵌套对象的 对象，尤其如此。

访问属性

JavaScript 提供了两种访问对象属性的表示法。第一种也是最常见的一种称为点表示法。在点表示法中，通过给出主机对象的名称，后跟一个句点（或点），然后是属性名称来访问属性。以下示例显示了如何使用点表示法读取和写入属性。如果 object.foo 最初存储的值为 1，则执行此语句后其值将变为 2。请注意，如果 object.foo 还没有值，则它将是未定义的。

<code class="language-javascript">var object = {};</code>

访问对象属性的另一种语法称为方括号表示法。在方括号表示法中，对象名称后跟一组方括号。在方括号内，属性名称指定为字符串。前面点表示法的示例已在下面重写为使用方括号表示法。虽然代码可能看起来不同，但它在功能上与前面的示例等效。

<code class="language-javascript">var object = {
  foo: 1,
  "bar": "some string",
  baz: {
  }
};</code>

方括号表示法比点表示法更具表现力，因为它允许变量指定属性名称的全部或部分。这是可能的，因为 JavaScript 解释器会自动将方括号内的表达式转换为字符串，然后检索相应的属性。以下示例显示了如何使用方括号表示法动态创建属性名称。在此示例中，属性名称 foo 是通过将变量 f 的内容与字符串“oo”连接起来创建的。

<code class="language-javascript">object.foo = object.foo + 1;</code>

方括号表示法还允许属性名称包含点表示法中禁止的字符。例如，以下语句在方括号表示法中完全合法。但是，如果您尝试在点表示法中创建相同的属性名称，则会遇到语法错误。

<code class="language-javascript">object["foo"] = object["foo"] + 1;</code>

访问嵌套属性

可以通过将点和/或方括号引用链接在一起访问嵌套对象的属性。例如，以下对象包含一个名为 baz 的嵌套对象，该对象包含另一个名为 foo 的对象，该对象有一个名为 bar 的属性，该属性存储值 5。

<code class="language-javascript">var f = "f";

object[f + "oo"] = "bar";</code>

以下表达式访问嵌套属性 bar。第一个表达式使用点表示法，而第二个表达式使用方括号表示法。第三个表达式结合了两种表示法以达到相同的结果。

<code class="language-javascript">object["!@#$%^&*()."] = true;</code>

如果使用不当，像前面示例中所示的表达式可能会导致性能下降。评估每个点或方括号表达式都需要时间。如果多次使用相同的属性，则最好只访问一次该属性，然后将该值存储在局部变量中以供将来所有用途使用。以下示例在循环中多次使用 bar。但是，与其浪费时间一遍又一遍地计算相同的值，不如将 bar 存储在局部变量中。

<code class="language-javascript">var object = {
  baz: {
    foo: {
      bar: 5
    }
  }
};</code>

函数作为方法

当函数用作对象属性时，它被称为方法。与属性一样，方法也可以在对象文字表示法中指定。以下示例显示了如何实现这一点。

<code class="language-javascript">object.baz.foo.bar;
object["baz"]["foo"]["bar"];
object["baz"].foo["bar"];</code>

也可以使用点表示法和方括号表示法调用方法。以下示例使用这两种表示法调用前面示例中的 sum() 方法。

<code class="language-javascript">var object = {};</code>

添加属性和方法

对象文字表示法对于创建新对象很有用，但它不能向现有对象添加属性或方法。幸运的是，向对象添加新数据就像创建赋值语句一样简单。以下示例创建一个空对象。然后使用赋值语句添加两个属性 foo 和 bar 以及一个方法 baz。请注意，此示例使用点表示法，但方括号表示法也能同样有效。

<code class="language-javascript">var object = {
  foo: 1,
  "bar": "some string",
  baz: {
  }
};</code>

结论

本文介绍了 JavaScript 对象语法的基础知识。掌握这些内容至关重要，因为它构成了该语言其余部分的基础。他们说你必须先学会走路才能跑步。那么，在 JavaScript 的世界里，你必须先了解对象才能了解面向对象编程。

关于 JavaScript 对象语法的常见问题 (FAQ)

JavaScript 对象语法中点表示法和方括号表示法有什么区别？

在 JavaScript 中，对象是键值对的集合。您可以使用点表示法或方括号表示法访问这些值。点表示法更直接，更易于阅读。当您知道属性名称时使用它。例如，如果您有一个名为“person”的对象，它有一个名为“name”的属性，您可以像这样访问它：person.name。

另一方面，方括号表示法更灵活。它允许您使用变量或可能不是有效标识符的属性名称来访问属性。例如，如果属性名称包含空格或特殊字符，或者它是一个数字，您可以像这样访问它：person['property name']。

如何向现有的 JavaScript 对象添加属性？

您可以使用点表示法或方括号表示法向现有的 JavaScript 对象添加属性。对于点表示法，您只需使用语法 object.property = value。对于方括号表示法，语法为 object['property'] = value。在这两种情况下，如果对象中还不存在该属性，则会添加它。

如何从 JavaScript 对象中删除属性？

您可以使用“delete”运算符从 JavaScript 对象中删除属性。“delete”运算符的语法对于点表示法为 delete object.property，对于方括号表示法为 delete object['property']。这将从对象中删除属性及其值。

JavaScript 对象中的方法是什么？

方法是存储为对象属性的函数。它们用于执行利用对象数据的操作。您可以使用函数语法在对象中定义方法，如下所示：object.methodName = function() { / code / }。

如何迭代 JavaScript 对象的属性？

您可以使用“for...in”循环迭代 JavaScript 对象的属性。此循环将迭代对象的所以可枚举属性，包括从原型链继承的属性。语法如下：for (var property in object) { / code / }。

JavaScript 对象中的“this”关键字是什么？

JavaScript 对象中的“this”关键字指的是它所属的对象。在方法内部，“this”指的是所有者对象。在构造函数中，“this”指的是新创建的对象。

JavaScript 中的构造函数是什么？

JavaScript 中的构造函数是用于创建相同类型对象的特殊函数。它们以大写字母命名，以区别于普通函数。“new”关键字用于调用构造函数并创建一个新对象。

JavaScript 中的对象原型是什么？

每个 JavaScript 对象都有一个原型。原型也是一个对象，所有对象都从其原型继承属性和方法。这是 JavaScript 的一个强大功能，因为它允许您向对象类型的所以实例添加新的属性或方法。

如何检查 JavaScript 对象中是否存在属性？

您可以使用“in”运算符或“hasOwnProperty”方法检查 JavaScript 对象中是否存在属性。“in”运算符如果属性存在于对象或其原型链中，则返回 true。“hasOwnProperty”方法仅当属性存在于对象本身时才返回 true。

JavaScript 中的对象解构是什么？

JavaScript 中的对象解构是一个允许您从对象中提取属性并将它们绑定到变量的功能。这可以使您的代码更简洁易读。语法如下：var { property1, property2 } = object。

以上是javaScript中的对象语法的详细内容。更多信息请关注PHP中文网其他相关文章！