JavaScript 对象：创建、访问和修改属性

介绍

欢迎来到 JavaScript 对象实验。对象是 JavaScript 中的基本构建块，用于存储相关数据的集合以及更复杂的实体。它们由键值对组成，其中键是字符串（或 Symbols），值可以是任何数据类型，包括其他对象或函数。

在本实验中，你将学习如何：

使用对象字面量语法创建 JavaScript 对象。
向对象添加属性（键值对）。
访问和更新对象属性的值。
向现有对象添加新属性。

你将在 script.js 文件中完成所有工作。要查看代码的输出，你需要打开浏览器的开发者控制台。你可以通过导航到 Web 8080 标签页并打开开发者工具（通常通过右键单击并选择“检查”（Inspect），然后点击“控制台”（Console）标签页）来完成此操作。

让我们开始吧！

这是一个实验（Guided Lab），提供逐步指导来帮助你学习和实践。请仔细按照说明完成每个步骤，获得实际操作经验。根据历史数据，这是一个初级级别的实验，完成率为 98%。获得了学习者 100% 的好评率。

使用花括号创建对象字面量

在本步骤中，你将创建你的第一个 JavaScript 对象。创建对象的最简单方法是使用对象字面量语法，即一对花括号 {}。

首先，在 WebIDE 左侧的文件浏览器中找到 script.js 文件。单击它以在编辑器中打开。

现在，将以下代码添加到 script.js 中，以声明一个名为 car 的常量变量，并为其分配一个空对象。我们还将使用 console.log() 将对象打印到控制台以验证其创建。

const car = {};

console.log(car);

添加代码后，保存文件。要查看结果，请单击 Web 8080 标签页。打开开发者控制台（右键单击 -> 检查（Inspect）-> 控制台（Console））。你应该会在控制台中看到一个空对象 {} 被打印出来。

向对象添加键值对

一个空对象用处不大。对象用于存储数据，我们将其添加为属性。属性是键值对。键是属性的名称（一个字符串），值是与该键关联的数据。

在本步骤中，你将在创建 car 对象时，直接在花括号内为其添加属性。让我们为我们的汽车定义一些属性：品牌（make）、型号（model）和年份（year）。

修改 script.js 中的代码，使其如下所示：

const car = {
  make: "Toyota",
  model: "Camry",
  year: 2021
};

console.log(car);

这里，make、model 和 year 是键，而 'Toyota'、'Camry' 和 2021 是它们对应的值。请注意，字符串值是用单引号括起来的。

保存文件，然后再次检查 Web 8080 标签页中的开发者控制台。现在你将看到打印出来的对象及其属性。

使用点表示法访问属性

一旦你拥有了一个带有属性的对象，你通常需要检索特定属性的值。最常见的方法是使用点表示法（.）。语法是 objectName.propertyName。

在本步骤中，你将访问 car 对象的 model 属性，并将其打印到控制台。

将以下行添加到你的 script.js 文件末尾。你现有的代码应保留。

const car = {
  make: "Toyota",
  model: "Camry",
  year: 2021
};

console.log(car);

// Access and log the model property
console.log(car.model);

保存文件并刷新 Web 8080 标签页。在开发者控制台中，你现在将看到两行输出：完整的 car 对象，然后是字符串 Camry。

更新属性值赋值

对象中的数据不是固定的。你可以使用赋值运算符（=）轻松更改现有属性的值。这与你为普通变量赋值的方式相同。

在本步骤中，让我们将 car 的 year 从 2021 更新为 2022。

将以下行添加到你的 script.js 文件末尾。我们将更新属性，然后再次打印整个对象以查看更改。

const car = {
  make: "Toyota",
  model: "Camry",
  year: 2021
};

// Update the year property
car.year = 2022;

console.log(car);

为了清晰起见，你可以删除之前的 console.log 语句，但这并非必需。保存文件后，检查 Web 8080 标签页中的控制台。输出现在将显示 car 对象，其中 year 已更新为 2022。

为现有对象添加新属性

JavaScript 中的对象是动态的，这意味着在创建对象后，你可以随时向其添加新属性。语法与更新属性相同：使用点表示法加上新属性名并为其赋值。

在最后一步中，你将向 car 对象添加一个新的 color 属性。

将以下行添加到你的 script.js 文件末尾。这将添加新属性，然后打印对象以确认添加。

const car = {
  make: "Toyota",
  model: "Camry",
  year: 2021
};

car.year = 2022;

// Add a new color property
car.color = "blue";

console.log(car);

保存文件并最后一次检查开发者控制台。现在将显示 car 对象，其中包含四个属性：make、model、year 和新添加的 color。

总结

恭喜你完成了 JavaScript 对象实验！你已成功掌握了 JavaScript 中最重要的数据结构之一——对象——的基本操作。

在此实验中，你练习了：

使用字面量语法（{}）创建对象。
使用初始键值对填充对象。
使用点表示法（object.property）访问属性值。
更新现有属性的值。
向动态对象添加新属性。

理解对象对于任何 JavaScript 开发者都至关重要，因为它们无处不在，从简单的数据存储到复杂的应用程序架构。请继续练习这些概念，以建立扎实的 JavaScript 编程基础。