分类
文章

理解javascript中的对象

介绍

JavaScript中的object是一种数据类型 ,由nameskeysvalues的集合组成,以name:value pairs 。name:value对可以包含可以包含任何数据类型的properties (包括字符串,数字和布尔值)以及methods ,这些methods是对象中包含的函数。

JavaScript中的对象是独立的实体,可以与现实生活中的对象进行比对。例如,一本书可能是一个对象,您可以通过标题,作者,页数和类型来描述。同样,汽车可能是您要通过颜色,品牌,型号和马力来描述的对象。JavaScript 数组也是一种对象。

对象是大多数JavaScript程序不可或缺的基础部分。例如,用户帐户对象可能包含诸如用户名,密码和电子邮件地址之类的数据。另一个常见的用例是网络购物平台的购物车,该购物车可以由许多对象组成,其中包含每个项目的所有相关信息,例如名称,价格和运输信息的重量。待办事项列表是可能由对象组成的另一个常见应用程序。

在本教程中,我们将回顾如何创建对象,什么对象属性和方法以及如何访问,添加,删除,修改和遍历对象属性。

创建一个对象

对象是JavaScript数据类型 ,就像数字或字符串也是数据类型一样。作为数据类型,对象可以包含在变量中。

有两种方法可以用JavaScript构造对象:

  • object literal ,使用大括号: {}
  • object constructor ,使用new关键字

出于演示目的,我们可以使用这两种方法创建一个空对象示例。

首先,对象文字。

// Initialize object literal with curly brackets
const objectLiteral = {};

对象文字用大括号初始化该对象。

在下一个示例中,我们将使用对象构造函数。

// Initialize object constructor with new Object
const objectConstructor = new Object();

使用使用new Object()初始化的对象构造函数方法创建了相同的数据。

这两种方法都会创建一个空对象。使用对象字面量是更常见和首选的方法,因为它不太可能出现不一致和意外结果。

我们可以创建一个包含在变量gimli的示例对象来描述一个字符。

// Initialize gimli object
const gimli = {
    name: "Gimli",
    race: "dwarf",
    weapon: "axe",
    greet: function() {
        return `Hi, my name is ${this.name}!`;
    },
};

我们的新对象是gimli ,它具有三个属性。每个属性都由一个name:value对组成,也称为key:value对。 weapon是属性名称之一,它链接到属性值"axe" (字符串)。它有一个方法,方法名称为greet ,方法值由函数的内容组成。

greet ,您可能会注意到this关键字。在对象内部使用this对象时,它指向当前对象,在本例中为gimli

gimli发送到控制台将打印出整个对象。

gimli;
Output{name: "Gimli", race: "dwarf", weapon: "axe", greet: ƒ}

根据您所使用的控制台,此输出可能会有所不同,但是您应注意,传递给该对象的所有值都显示在输出中。

接下来,我们将回顾JavaScript对象的属性和方法。

属性和方法

对象可以具有propertiesmethods

属性是对象中名称(键)和值之间的关联,并且它可以包含任何数据类型。属性通常是指对象的特征。

方法是作为对象属性值的函数,因此是对象可以执行的任务。

记住对象属性和方法之间差异的一种简单方法是将属性视为名词,将方法视为动词。 nameraceweapon都是与物体相关的名词,都是属性。 fight()talk()是可以用作方法功能定义的动词。

访问对象属性

有两种访问对象属性的方法。

  • 点符号: .
  • 括号符号: []

让我们重新访问我们的原始示例对象gimli

const gimli = {
    name: "Gimli",
    race: "dwarf",
    weapon: "axe",
    greet: function() {
        return `Hi, my name is ${this.name}!`;
    },
};

如果要检索weapon的属性值,则可以使用对象点表示法来实现,方法是键入对象的变量名,然后键入点号( . )和属性或方法名。

// Retrieve the value of the weapon property
gimli.weapon;
Output"axe"

gimli.weapon输出属性值,即"axe" 。我们还可以使用对象括号符号检索相同的数据。与您可能为索引和访问字符串的方式相似,括号符号的语法是两个包围属性名称的方括号( [] )。

// Retrieve the value of the weapon property
gimli["weapon"];
Output"axe"

点号和括号都经常使用。点表示法更快,更易读,但有更多限制。括号表示法允许访问存储在变量中的属性名称,如果对象的属性包含任何特殊字符,则必须使用括号表示法。

为了检索对象方法,您将以与调用常规函数相同的方式对其进行调用,只是将其附加到对象变量上。

gimli.greet();
Output"Hi, my name is Gimli!"

在上面的示例中,我们看到返回了对象方法greet()的字符串值。

现在,我们可以通过添加name:value对或修改现有对象对来修改对象属性。

添加和修改对象属性

为了向对象添加新属性,您可以使用赋值运算符( = )将新值分配给属性。

例如,我们可以将数值数据类型添加到gimli对象中作为新的age属性。点和括号符号都可用于添加新的对象属性。

// Add new age property to gimli
gimli.age = 139;
// Add new age property to gimli
gimli["age"] = 139;

我们可以使用点表示法或方括号表示法来访问该值。

gimli.age;
Output139

也可以使用相同的过程将方法添加到对象。

// Add new fight method to gimli
gimli.fight = function() {
    return `Gimli attacks with an ${this.weapon}.`;
}

一旦创建了这个新的对象方法,就可以像上面一样调用它。

gimli.fight();
Output"Gimli attacks with an axe."

使用相同的方法,可以通过将新值分配给现有属性来修改对象的属性。

// Update weapon from axe to battle axe
gimli.weapon = "battle axe";

在这一点上,如果我们调用对象,我们将看到所有的添加和修改。

gimli;
Output{name: "Gimli", race: "dwarf", weapon: "battle axe", age: 139, greet: ƒ, fight: ƒ}

通过分配操作,我们可以修改JavaScript对象的属性和方法。

删除对象属性

为了从对象中删除属性,您将使用delete关键字。 delete是用于从对象中删除属性的运算符。

在下面的示例中,我们将使用deletegimlidelete weapon属性。

// Remove weapon from gimli
delete gimli.weapon;
Outputtrue

如果成功删除了该属性,或者该属性用于不存在的属性,则delete操作的评估结果为true

我们可以测试gimli的输出,看看是否成功。

gimli;
Output{name: "Gimli", race: "dwarf", age: 139, greet: ƒ, fight: ƒ}

在以上输出中, weapon名称及其关联值不再可用,表明我们已成功删除该属性。

在下一节中,我们将介绍遍历JavaScript中对象的方法。

遍历对象属性

JavaScript具有内置的for循环类型, for循环专门用于迭代对象的属性。这称为for...in循环。

这是我们的主要对象示例gimli的简化版本。

const gimli = {
    name: "Gimli",
    race: "dwarf",
    weapon: "battle axe",
};

我们可以使用for...in遍历gimli所有属性并将它们打印到控制台。使用括号符号,我们可以将属性值检索为变量,在本例中为key

// Iterate through properties of gimli
for (let key in gimli) {
  console.log(gimli[key]);
}
OutputGimli
dwarf
battle axe

我们还可以仅使用for...in循环中的第一个变量来检索属性名称本身。我们已经使用字符串方法将键值转换为大写

// Get keys and values of gimli properties
for (let key in gimli) {
  console.log(key.toUpperCase() + ':', gimli[key]);
}
OutputNAME: Gimli
RACE: dwarf
WEAPON: battle axe

for...in循环不要与for...of循环混淆,后者仅在Array对象类型上使用。您可以在” 了解JavaScript中的数组 “教程中了解有关遍历数组的更多信息。

另一个有用的枚举方法是Object.keys()方法,该方法将返回对象键的数组。

// Initialize method on gimli object to return property keys
Object.keys(gimli);
Output["name", "race", "weapon"]

此方法使我们可以将对象的键或名称作为数组使用,因此您可以利用JavaScript数组可用的所有方法。

结论

对象是JavaScript编程语言的一项极其有用且用途广泛的功能。它们是用JavaScript编写代码的一些主要构件,并且是组织相关数据和功能的实用方法。待办事项列表,购物车,用户帐户和Web地图上的位置都是您可能会遇到的现实世界JavaScript对象的众多示例中的一些。

在本教程中,我们了解了属性和方法之间的区别,如何创建对象以及如何添加,删除,修改和遍历对象属性。要了解有关JavaScript对象的更多信息,请阅读Mozilla开发人员网络上的” 使用对象 “。

发表评论

电子邮件地址不会被公开。 必填项已用*标注