了解JavaScript中的对象

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

介绍

JavaScript中的一个对象是一个数据类型 ,由名称的集合组成,以名称:值对表示 名称:值对可以由可能包含任何数据类型(包括字符串,数字和布尔值)的属性组成,以及方法 ,它们是一个对象中包含的函数。

JavaScript中的对象是独立的实体,可以被比作现实生活中的对象。 例如,一本书可能是由标题,作者,页数和类型描述的对象。 类似地,一辆汽车可能是您将通过颜色,制造,模型和马力来描述的对象。 JavaScript 数组也是一种对象。

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

在本教程中,我们将介绍如何创建对象,对象属性和方法,以及如何访问,添加,删除,修改和循环对象属性。

创建对象

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

JavaScript中有两种构造对象的方法:

  • 对象文字 ,使用大括号: {}
  • 对象构造函数 ,它使用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 ,它有三个属性。 每个属性都包含一个名称:值对,也称为key:value对。 weapon是属性名称之一,它与属性值"axe" ,一个字符串。 它有一种方法,方法名称为greet ,方法值由函数的内容组成。

greet ,您可能会注意到this关键字。 当在对象中使用this内容时,它指的是当前对象,在这种情况下是gimli

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

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

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

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

属性和方法

对象可以具有属性方法

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

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

记住对象属性和方法之间的差异的简单方法是将属性视为名词,将方法视为动词。 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;
"axe"

gimli.weapon输出属性值,即"axe" 我们也可以用对象括号表示法检索相同的数据。 类似于您可以索引和访问字符串 ,括号符号的语法是包含属性名称的两个方括号( [] )。

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

定时使用圆点符号和括号符号。 点符号更快,更可读,但有更多的限制。 支架符号允许访问存储在变量中的属性名称,如果对象的属性包含任何特殊字符,则必须使用括号。

为了检索一个对象方法,你可以用与调用一个常规函数相同的方式来调用它,只是附加到对象变量上。

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

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

现在我们可以通过添加名称:值对或修改现有对象来继续修改对象属性。

添加和修改对象属性

为了向一个对象添加一个新的属性,你可以赋值给一个赋值为operator( = )的属性赋值。

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

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

我们可以使用点符号或括号表示法访问该值,如上所述。

gimli.age;
139

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

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

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

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

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

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

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

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

通过赋值操作,可以修改JavaScript对象的属性和方法。

删除对象属性

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

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

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

如果属性成功删除,或者如果在不存在的属性上使用delete操作,则delete操作将返回true

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

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

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

在下一节中,我们将介绍如何在JavaScript中迭代对象。

循环通过对象属性

JavaScript具有内置的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]);
}
Gimli
dwarf
battle axe

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

// Get keys and values of gimli properties
for (let key in gimli) {
  console.log(key.toUpperCase() + ':', gimli[key]);
}
NAME: 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);
["name", "race", "weapon"]

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

结论

对象是JavaScript编程语言中非常有用和多功能的功能。 它们是JavaScript中编写代码的一些主要构建块,并且是组织相关数据和功能的实用方法。 待办事项列表,购物车,用户帐户和网络地图上的位置都是您可能遇到的真实JavaScript对象的许多示例中的一部分。

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