理解JavaScript中的对象

介绍

JavaScript 中的 object 是数据类型，由 names 或 keys 和 values 的集合组成，以 名称：值对 表示。 name:value 对可以由 properties 组成，其中可能包含任何数据类型——包括字符串、数字和布尔值——以及 methods，它们是包含在对象中的函数。

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

对象是大多数 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，它具有三个属性。每个属性都由一个 name:value 对组成，也称为 key:value 对。 weapon 是属性名称之一，它链接到属性值 "axe"，一个字符串。它有一个方法，方法名称为greet，方法值由函数的内容组成。

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

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

gimli;

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

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

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

属性和方法

对象可以有属性和方法。

属性是对象内名称（键）和值之间的关联，它可以包含任何数据类型。属性通常是指对象的特性。

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

记住对象属性和方法之间区别的一种简单方法是将属性视为名词，将方法视为动词。 name、race 和 weapon 都是与对象相关的名词，并且是属性。 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() 的字符串值。

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

添加和修改对象属性

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

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

// 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 是从对象中删除属性的运算符。

在下面的示例中，我们将使用 delete 从 gimli 中删除 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...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 对象类型。您可以在“Understanding Arrays in 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 开发人员网络上的 Working with Objects。