”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > 属性访问器

属性访问器

发布于2024-11-04
浏览:125

Property accessors

了解 JavaScript 中的属性访问器

在 JavaScript 中,属性访问器是允许您访问对象属性的机制。有两种主要方法可以做到这一点:点表示法和方括号表示法。

点符号

点表示法是访问属性的最常见方法。您只需使用点 (.) 后跟属性名称即可。

括号表示法

当属性名称是动态的或不是有效的标识符(例如,它包含空格或特殊字符)时,括号表示法很有用。您使用方括号 ([]) 并将属性名称作为字符串传递

在 JavaScript 中创建对象

该语言提供了称为对象文字表示法的语法,用于快速创建对象。对象字面量用花括号表示。以下示例创建一个没有属性的空对象。

var animal = {};

在花括号内,属性及其值被指定为键/值对列表。
键可以是字符串或标识符,而值可以是任何有效的表达式。键/值对列表以逗号分隔,每个键和值用冒号分隔。

以下示例使用文字表示法创建一个具有三个属性对象。

第一个属性,动物,占据第一位。
第二个属性 dolphin 使用字符串指定,并且还存储字符串值。第三个属性,哺乳动物,存储一个空对象。

var animal = {
  dolphin: 1,
  "swim": "some string",
  mammal: {
  }
};

每个属性都写在单独的行上并缩进。整个对象可以写在一行上,但这种格式的代码更具可读性。对于具有许多属性的对象或嵌套对象尤其如此。

JavaScript 提供了两种用于访问对象属性的表示法。

第一个也是最常见的,被称为点符号
在点表示法下,通过给出主机对象的名称、后跟句点(或点)、再后跟属性名称来访问属性。

点符号

点表示法是访问属性的最常见方法。您只需使用点 (.) 后跟属性名称即可。例如:

以下示例显示如何使用点表示法读取和写入属性。如果对象.dolphin
最初的值为1,执行该语句后其值将变为2。

  • 请注意,如果animal.dolphon 还没有值,那么它将是未定义的。
animal.dolphin = animal.dolphin   1;

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

object["dolphin"] = object["dolphin"]   1;

括号表示法点表示法更具表现力,因为它允许变量指定全部或部分属性名称
这是可能的,因为 JavaScript 解释器会自动将方括号内的表达式转换为字符串,然后检索相应的属性

以下示例演示如何使用括号表示法动态创建属性名称。在示例中,属性名称 foo 是通过将变量 d 的内容与字符串“dolphin”连接起来创建的。

var d = "d";

object[d   "dolphin"] = "bar";

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

object["!@#$%^&*()."] = true;

访问嵌套属性

嵌套对象的属性可以通过将点和/或括号引用链接在一起来访问。
例如,以下对象包含一个名为 dolphin 的嵌套对象,该对象包含另一个名为哺乳动物的对象,该对象具有一个名为years 的属性,该属性的值为 one。

var animal = {
  dolphin: {
    mammal: {
      years: 1
    }
  }
};

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

animal.dolphin.mammal.lungs;
animal["dolphin"]["mammal"]["years"];
animal["dolphin"].mammal["years"];

如果使用不当,像上一个示例中所示的表达式可能会导致性能下降。
计算每个 点或括号表达式 需要时间。

如果多次使用同一属性,则更有意义的是访问该属性一次,然后将该值存储在局部变量中以供将来使用。以下示例在循环内多次使用 bar。然而,bar 不是浪费时间反复计算相同的值,而是存储在局部变量中。

var years = animal.dolphin.mammal.years;
var count = 0;

for (var i = 0; i 



函数作为方法

当函数用作对象属性时,它被称为方法。与属性一样,方法也可以用对象文字表示法指定。以下示例显示了这是如何完成的。

var animal = {
  sum: function(dolphin, years) {
    return dolphin   years;
  }
};

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

dolphin.sum(1, 2);
dolphin["sum"](1, 2);

添加属性和方法

对象字面量表示法对于创建新对象很有用,但是它不能向现有对象添加属性或方法。
幸运的是,向对象添加新数据就像创建赋值语句一样简单

以下示例创建一个空对象
然后使用赋值语句添加两个属性(海豚和哺乳动物)和方法年。
请注意,此示例使用 点表示法 ,但 括号表示法 也同样有效。

var animal = {};
animal.dolphin = 1;
animal.mammal = null;
animal.years = function() {
  return "I am 5 years()";
};

概括
对象是由基元和其他对象构建的复合数据类型。对象的构建块通常称为其字段或属性。属性用于描述对象的某些方面。例如,属性可以描述列表的长度、狗的颜色或人的出生日期。
因此,JavaScript 对象语法对于理解至关重要,因为它是该语言的基础。
首先,您需要先了解对象,然后才能了解面向对象的编程。

  • 点表示法:当属性名称是有效标识符时使用。
  • 括号表示法:当属性名称是动态的或无效标识符时使用。 这些访问器是 JavaScript 中有效操作对象及其属性的基础。

快乐编码!

版本声明 本文转载于:https://dev.to/irenejpopova/property-accessors-2dgk?1如有侵犯,请联系[email protected]删除
最新教程 更多>
  • Bootstrap 4 Beta 中的列偏移发生了什么?
    Bootstrap 4 Beta 中的列偏移发生了什么?
    Bootstrap 4 Beta:列偏移的删除和恢复Bootstrap 4 在其 Beta 1 版本中引入了重大更改柱子偏移了。然而,随着 Beta 2 的后续发布,这些变化已经逆转。从 offset-md-* 到 ml-auto在 Bootstrap 4 Beta 1 中, offset-md-*...
    编程 发布于2024-11-17
  • 如何修复 macOS 上 Django 中的“配置不正确:加载 MySQLdb 模块时出错”?
    如何修复 macOS 上 Django 中的“配置不正确:加载 MySQLdb 模块时出错”?
    MySQL配置不正确:相对路径的问题在Django中运行python manage.py runserver时,可能会遇到以下错误:ImproperlyConfigured: Error loading MySQLdb module: dlopen(/Library/Python/2.7/site-...
    编程 发布于2024-11-17
  • 在 Go 中使用 WebSocket 进行实时通信
    在 Go 中使用 WebSocket 进行实时通信
    构建需要实时更新的应用程序(例如聊天应用程序、实时通知或协作工具)需要一种比传统 HTTP 更快、更具交互性的通信方法。这就是 WebSockets 发挥作用的地方!今天,我们将探讨如何在 Go 中使用 WebSocket,以便您可以向应用程序添加实时功能。 在这篇文章中,我们将介绍: WebSoc...
    编程 发布于2024-11-17
  • 如何使用 MySQL 查找今天生日的用户?
    如何使用 MySQL 查找今天生日的用户?
    如何使用 MySQL 识别今天生日的用户使用 MySQL 确定今天是否是用户的生日涉及查找生日匹配的所有行今天的日期。这可以通过一个简单的 MySQL 查询来实现,该查询将存储为 UNIX 时间戳的生日与今天的日期进行比较。以下 SQL 查询将获取今天有生日的所有用户: FROM USERS ...
    编程 发布于2024-11-17
  • 大批
    大批
    方法是可以在对象上调用的 fns 数组是对象,因此它们在 JS 中也有方法。 slice(begin):将数组的一部分提取到新数组中,而不改变原始数组。 let arr = ['a','b','c','d','e']; // Usecase: Extract till index p...
    编程 发布于2024-11-17
  • 如何在 PHP 中组合两个关联数组,同时保留唯一 ID 并处理重复名称?
    如何在 PHP 中组合两个关联数组,同时保留唯一 ID 并处理重复名称?
    在 PHP 中组合关联数组在 PHP 中,将两个关联数组组合成一个数组是一项常见任务。考虑以下请求:问题描述:提供的代码定义了两个关联数组,$array1和$array2。目标是创建一个新数组 $array3,它合并两个数组中的所有键值对。 此外,提供的数组具有唯一的 ID,而名称可能重合。要求是构...
    编程 发布于2024-11-17
  • 除了“if”语句之外:还有哪些地方可以在不进行强制转换的情况下使用具有显式“bool”转换的类型?
    除了“if”语句之外:还有哪些地方可以在不进行强制转换的情况下使用具有显式“bool”转换的类型?
    无需强制转换即可上下文转换为 bool您的类定义了对 bool 的显式转换,使您能够在条件语句中直接使用其实例“t”。然而,这种显式转换提出了一个问题:“t”在哪里可以在不进行强制转换的情况下用作 bool?上下文转换场景C 标准指定了四种值可以根据上下文转换为 bool 的主要场景:语句:if、w...
    编程 发布于2024-11-17
  • Numpy 备忘单
    Numpy 备忘单
    Comprehensive Guide to NumPy: The Ultimate Cheat Sheet NumPy (Numerical Python) is a fundamental library for scientific computing in Python. ...
    编程 发布于2024-11-17
  • 你需要像专业人士一样阅读科技文章
    你需要像专业人士一样阅读科技文章
    在快节奏的技术世界中,并非您阅读的所有内容都是准确或公正的。并非您读到的所有内容都是由人类编写的! 细节可能存在微妙的错误,或者文章可能故意误导。让我们来看看一些可以帮助您阅读科技文章或任何媒体内容的技能。 1. 培养健康的怀疑态度 培养健康的怀疑态度至关重要。质疑大胆的主张,寻找...
    编程 发布于2024-11-17
  • 如何查找一个多维数组中存在但另一个多维数组中不存在的行?
    如何查找一个多维数组中存在但另一个多维数组中不存在的行?
    比较多维数组的关联行您有两个多维数组,$pageids 和 $parentpage,其中每行代表一个包含列的记录“id”、“链接标签”和“url”。您想要查找 $pageids 中存在但不在 $parentpage 中的行,从而有效地创建一个包含缺失行的数组 ($pageWithNoChildren...
    编程 发布于2024-11-17
  • 为什么 Windows 中会出现“Java 无法识别”错误以及如何修复它?
    为什么 Windows 中会出现“Java 无法识别”错误以及如何修复它?
    解决 Windows 中的“Java 无法识别”错误尝试在 Windows 7 上检查 Java 版本时,用户可能会遇到错误“'Java' 无法识别”作为内部或外部命令。”此问题通常是由于缺少 Java 安装或环境变量不正确而引起的。要解决此问题,您需要验证 Java 安装并配置必要...
    编程 发布于2024-11-17
  • 尽管文件存在且有权限,为什么 File.delete() 返回 False?
    尽管文件存在且有权限,为什么 File.delete() 返回 False?
    尽管存在并进行权限检查,File.delete() 返回 False使用 FileOutputStream 写入文件后尝试删除文件时,某些用户遇到意外问题: file.delete() 返回 false。尽管文件存在且所有权限检查(.exists()、.canRead()、.canWrite()、....
    编程 发布于2024-11-17
  • 如何有效地从 Go 中的切片中删除重复的对等点?
    如何有效地从 Go 中的切片中删除重复的对等点?
    从切片中删除重复项给定一个文本文件,其中包含表示为具有“Address”和“PeerID”的对象的对等点列表属性,任务是根据代码配置中“Bootstrap”切片中匹配的“Address”和“PeerID”删除所有重复的对等点。为了实现此目的,我们迭代切片中的每个对等点对象多次。在每次迭代期间,我们将...
    编程 发布于2024-11-17
  • 如何自定义Bootstrap 4的文件输入组件?
    如何自定义Bootstrap 4的文件输入组件?
    绕过 Bootstrap 4 文件输入的限制Bootstrap 4 提供了自定义文件输入组件来简化用户的文件选择。但是,如果您希望自定义“选择文件...”占位符文本或显示所选文件的名称,您可能会遇到一些挑战。更改 Bootstrap 4.1 及更高版本中的占位符自 Bootstrap 4.1 起,占...
    编程 发布于2024-11-17
  • 如何在 CSS 盒子上创建斜角?
    如何在 CSS 盒子上创建斜角?
    在 CSS 框上创建斜角可以使用多种方法在 CSS 框上实现斜角。一种方法描述如下:使用边框的方法此技术依赖于沿容器左侧创建透明边框和沿底部创建倾斜边框。以下代码演示了如何实现:<div class="cornered"></div> <div cl...
    编程 发布于2024-11-17

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3