介绍
在 JavaScript 中,一个 **object 是由一个由 **name 或 **keys 和 **values 组成的数据类型(https://andsky.com/tech/tutorials/understanding-data-types-in-javascript),以 **name:value pairs 表示。
JavaScript 中的对象是独立的实体,可以与现实生活中的对象进行比较,例如,一本书可能是你用标题、作者、页数和类型来描述的对象,同样,汽车也可以是你用颜色、形状、模型和马力来描述的对象。
对象是大多数JavaScript程序的组成部分和基本方面。例如,用户帐户对象可能包含用户名、密码和电子邮件地址等数据。另一个常见的用例是网购平台的购物车,它可以由一系列的许多对象组成,其中包含每个项目的所有相关信息,如姓名、价格和运输信息的重量。
在本教程中,我们将审查如何创建一个对象,对象属性和方法是什么,以及如何访问,添加,删除,修改和循环通过对象属性。
创建一个对象
一个对象是一个 JavaScript 数据类型,就像一个数字或字符串也是一个数据类型一样,作为一个数据类型,一个对象可以包含在变量中。
在 JavaScript 中构建一个对象有两种方法:
- object literal,使用弯曲的轴承:
{} - object constructor,使用
new关键字
我们可以使用两种方法为示范目的创建一个空对象示例。
首先是字面对象。
1// Initialize object literal with curly brackets
2const objectLiteral = {};
对象字面上将对象以弯曲的支架进行初始化。
在下一个例子中,我们将使用对象构造器。
1// Initialize object constructor with new Object
2const objectConstructor = new Object();
使用对象构建方法创建了相同的数据,该方法被初始化为新对象()。
使用对象字母是更常见和偏好的方法,因为它有更少的不一致和意想不到的结果的潜力。
我们可以创建一个示例对象,包含在变量gimli,来描述一个字符。
1// Initialize gimli object
2const gimli = {
3 name: "Gimli",
4 race: "dwarf",
5 weapon: "axe",
6 greet: function() {
7 return `Hi, my name is ${this.name}!`;
8 },
9};
我们的新对象是gimli,它有三个属性. 每个属性由一个 name:value 对组成,也称为 key:value 对。
在greet中,你可能会注意到this的关键字,当你在对象中使用this时,它指的是当前的对象,在这种情况下gimli。
将gimli发送到控制台将打印出整个对象。
1gimli;
1[secondary_label Output]
2{name: "Gimli", race: "dwarf", weapon: "axe", greet: ƒ}
此输出可能因使用哪个控制台而异,但您应该注意到,输出中显示给对象传输的所有值。
接下来,我们将审查 JavaScript 对象的属性和方法。
属性与方法
对象可以具有 ** 属性** 和 ** 方法**。
属性是对象中的名称(密钥)和值之间的关联,它可以包含任何数据类型。
方法是一个函数,它是对象属性的值,因此是一个对象可以执行的任务。
記住對象屬性和方法之間的區別的一種簡單方法是將屬性視為名詞,而方法則視為詞彙。『名稱』、『種族』和『武器』都是與對象相關的名詞,是屬性。
访问对象财产
有两种方法可以访问对象的属性。
- 点符号:
. - 轴符号:
[]
让我们重新审视我们的原始示例对象,gimli。
1const gimli = {
2 name: "Gimli",
3 race: "dwarf",
4 weapon: "axe",
5 greet: function() {
6 return `Hi, my name is ${this.name}!`;
7 },
8};
如果我们想获取武器的属性值,我们可以通过键入对象的变量名称,然后是点(.)和属性或方法名称来进行对象点标注。
1// Retrieve the value of the weapon property
2gimli.weapon;
1[secondary_label Output]
2"axe"
gimli.weapon输出属性值,即轴。我们还可以通过对象支架标注获取相同的数据。类似于您可以使用 索引并访问字符串,支架标注的语法是两个平方支架([])嵌入属性名称。
1// Retrieve the value of the weapon property
2gimli["weapon"];
1[secondary_label Output]
2"axe"
点符号和符号都经常使用。点符号更快,更易读,但具有更多的局限性。 符号允许访问存储在变量中的属性名称,如果对象的属性包含任何类型的特殊字符,则必须使用。
为了检索一个对象方法,你会以同样的方式称呼它,你会称呼一个常规函数,只是附加到对象变量。
1gimli.greet();
1[secondary_label Output]
2"Hi, my name is Gimli!"
在上面的示例中,我们看到对象方法 greet() 的字符串值返回。
现在,我们可以通过添加名称:值对或修改现有对来修改对象属性。
添加和修改对象属性
若要将新属性添加到一个对象中,您将使用分配运算符(=)为该属性分配新值。
例如,我们可以将数字数据类型添加到gimli对象中,作为新的age属性。
1// Add new age property to gimli
2gimli.age = 139;
1// Add new age property to gimli
2gimli["age"] = 139;
我们可以像上面那样访问该值,无论是点符号还是支架符号。
1gimli.age;
1[secondary_label Output]
2139
也可以使用相同的过程添加方法到对象中。
1// Add new fight method to gimli
2gimli.fight = function() {
3 return `Gimli attacks with an ${this.weapon}.`;
4}
一旦我们创建了这个新的对象方法,我们可以像上面那样称呼它。
1gimli.fight();
1[secondary_label Output]
2"Gimli attacks with an axe."
使用相同的方法,可以通过将新值分配给现有属性来修改对象的属性。
1// Update weapon from axe to battle axe
2gimli.weapon = "battle axe";
在这一点上,如果我们调用对象,我们将看到我们的所有添加和修改。
1gimli;
1[secondary_label Output]
2{name: "Gimli", race: "dwarf", weapon: "battle axe", age: 139, greet: ƒ, fight: ƒ}
通过分配操作,我们可以修改 JavaScript 对象的属性和方法。
删除对象属性
为了从对象中删除属性,您将使用删除关键字。
在下面的示例中,我们将使用删除从gimli中删除武器属性。
1// Remove weapon from gimli
2delete gimli.weapon;
1[secondary_label Output]
2true
删除操作将评估为真实,如果该属性被成功删除,或如果它被用于不存在的属性。
我们可以测试gimli的输出,看看它是否成功。
1gimli;
1[secondary_label Output]
2{name: "Gimli", race: "dwarf", age: 139, greet: ƒ, fight: ƒ}
在上述输出中,武器名称及其相关值不再可用,表明我们已成功删除该属性。
在下一节中,我们将讨论如何在JavaScript中重复通过对象。
穿越物体属性
JavaScript 具有内置的for循环类型,专门用于重复对象的属性,这被称为for...in循环。
以下是我们主要对象示例的简化版本,gimli。
1const gimli = {
2 name: "Gimli",
3 race: "dwarf",
4 weapon: "battle axe",
5};
我们可以使用for...in来穿过gimli的所有属性,并将其打印到控制台上。
1// Iterate through properties of gimli
2for (let key in gimli) {
3 console.log(gimli[key]);
4}
1[secondary_label Output]
2Gimli
3dwarf
4battle axe
我们还可以使用for...in循环中的第一个变量来检索属性名称本身,我们使用了字符串方法来将关键值转换为上方(https://andsky.com/tech/tutorials/how-to-index-split-and-manipulate-strings-in-javascript#converting-to-upper-or-lower-case)。
1// Get keys and values of gimli properties
2for (let key in gimli) {
3 console.log(key.toUpperCase() + ':', gimli[key]);
4}
1[secondary_label Output]
2NAME: Gimli
3RACE: dwarf
4WEAPON: battle axe
for...in循环不应该与for...of循环混淆,该循环仅用于 Array 对象类型。
另一个有用的列表方法是Object.keys()方法,该方法会返回对象的数组键。
1// Initialize method on gimli object to return property keys
2Object.keys(gimli);
1[secondary_label Output]
2["name", "race", "weapon"]
这种方法允许我们以一个对象的键或名称为数组工作,因此您可以利用所有可用的JavaScript数组的方法。
结论
对象是JavaScript编程语言的一个非常有用的和多功能的功能,它们是JavaScript编写代码的主要组成部分,并且是组织相关数据和功能的实用方法。
在本教程中,我们了解了属性和方法之间的区别,如何创建对象,以及如何通过对象属性添加、删除、修改和循环。