JavaScript 中的对象（附示例）

JavaScript 中的对象（附示例）

JavaScript 中的对象用于以“键：值”对的格式存储数据集合。包含在一个对象中，我们可以有任意数量的变量和/或函数，这些变量和/或函数被称为对象属性和方法。

创建对象

让我们举个例子！要将变量 car 初始化为对象，我们使用花括号 {} ：

 变车 = {};

我们现在有一个空对象，可以通过开发者工具控制台访问，只需输入我们的变量名：

 车 // {} [目的]

一个空对象并不是那么有用，所以让我们用一些数据来更新它：

 变车= {  
 名称：“特斯拉”，  
 型号：'型号 3'，  
 重量：1700，  
 附加功能：['加热座椅'，'木质装饰'，'有色玻璃']，  
 详细信息：函数（）{  
 alert('This ' + this.name + ' is a ' + this.model + ' 它的重量 ' + this.weight + 'kg 并包括以下附加内容：' + this.extras[0] + ', ' + this .extras[1] + ' 和 ' + this.extras[2] + '.');  
 },  
 显示：函数（）{  
 alert('这辆车是' + this.name + '.');  
 }  
 };

让我们在我们的开发者工具控制台中访问这些数据：

 car.name // 特斯拉  
 car.model // 模型 3  
 汽车重量 // 1700  
 car.extras[1] // 木质装饰  
 car.details() // 这辆特斯拉是 Model 3，它重 1700 公斤，包括以下附加功能：加热座椅、木质装饰和有色玻璃。  
 car.display() // 这辆车是特斯拉。

如您所见，每个名称/值对必须用逗号分隔，并且每种情况下的名称和值用冒号分隔。语法将始终遵循以下模式：

 变量对象名 = {  
 成员1名称：成员1值，  
 成员2名称：成员2值，  
 成员3名称：成员3值  
 };

对象成员的值几乎可以是任何东西——在我们的汽车对象中，我们有两个字符串、一个数字、一个数组和两个函数。前四项是数据项，称为对象的属性。最后两项是允许对象使用该数据做某事的函数，被称为对象的方法。

这种对象被称为对象字面量——我们在创建对象时就已经写出了对象的内容。这与从类实例化的对象进行比较，我们稍后会介绍。

点符号

上面，您已经看到使用点符号访问对象的属性和方法。对象名称 车 充当命名空间——需要先输入它才能访问对象中的任何内容。然后你写一个点，后面跟着你想访问的项目——这可以是一个简单属性的名称，一个数组属性的项目，或者对对象方法之一的调用，例如：

 车名  
 car.extras[1]  
 car.details()

删除属性

我们可以使用 delete 运算符来删除属性，如下所示：

 汽车模型  
 // 特斯拉 3 删除汽车.model 汽车模型  
 // 不明确的

方括号

例如，如果我们的对象中有一个多字属性，例如：

 变种用户 = {  
 名称：“理查德”，  
 年龄：32，  
 "likes steaks": true // 必须引用多字属性名称  
 };

我们无法使用点符号访问多字属性：

 user.likes potato // 语法错误！

这是因为点要求键是有效的变量标识符。那是没有空间和其他限制。

另一种方法是使用方括号，它适用于任何字符串：

 让用户 = {}; // 放  
 用户[“喜欢牛排”] = true; // 得到  
 alert(user["喜欢牛排"]); // 真的 // 删除  
 删除用户["喜欢牛排"];

更新对象成员

我们可以通过简单地声明您想要使用新值设置的属性来更新对象中的值，如下所示：

 用户年龄 // 32  
 user.age = 33 // 33  
 用户年龄 // 33

您还可以创建对象的全新成员。例如：

 user.surname = '史密森';  
 // 用户  
 {name：“Richard”，年龄：33，喜欢牛排：true，姓：“Rembert”}

这是什么”？

您可能已经注意到在我们前面的示例中使用了“this”这个词。请参阅以下内容：

 显示：函数（）{  
 alert('这辆车是' + this.name + '.');  
 }

这 _这个_ 关键字是指正在编写代码的当前对象——所以在这种情况下 _这个_ 相当于 _车_ .

为什么不直接写 车 反而？编写结构良好的面向对象代码是最佳实践，在此过程中使用 这个 非常有用。它将确保在成员的上下文发生变化时使用正确的值（例如，两个不同的 车 对象实例可能有不同的名称，但在显示自己的信息时会希望使用自己的名称）。

例如：

 变车1 = {  
 名称：“特斯拉”，  
 显示：函数（）{  
 alert('这辆车是' + this.name + '.');  
 }  
 }  
 var car2 = {  
 名称：“丰田”，  
 显示：函数（）{  
 alert('这辆车是' + this.name + '.');  
 }  
 }

在这种情况下， car1.display() 将输出“This car is a Tesla”。和 car2.display() 将输出“This car is a Toyota.”，即使方法的代码在两种情况下完全相同。

作为 这个 等于代码所在的对象—— 这个 当您动态生成对象（例如使用构造函数）时变得非常有用，这超出了本文的范围！

概括

就是这样！您现在应该对如何在 JavaScript 中使用对象有了一个很好的了解——包括创建自己的简单对象以及访问和操作对象属性。您还将开始看到对象作为存储相关数据和功能的结构是如何非常有用的。

例如，如果您尝试跟踪我们的所有属性和方法 车 对象作为单独的变量和函数，这将是非常低效的，并且我们会冒与其他具有相同名称的变量和函数发生冲突的风险。对象让我们将信息安全地锁定在它们自己的包中。

结论

如果你喜欢这篇博文，请关注我 推特 我每天都会在这里发布有关技术相关的事情！

让我们联系

• 文件夹
• 推特
• 领英
• 井号
• 德夫托
• 中等的
• GitHub
• 密码笔

最初发表于 https://dev.to 2022 年 9 月 13 日。

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/36032/06461408