07-object

07 Object

JavaScript Development Lab 第 07 个独立最小实验。

本章专门研究 JavaScript 中的对象（Object）与结构化数据。

核心目标：

把一个真实事物的多种信息组织成一个对象，并理解如何读取、嵌套和调用对象中的数据。

---

1. 这一章解决什么问题？

数组适合保存“一组数据”，对象更适合描述“一个事物”。

例如一个产品通常同时包含：

• ID
• 名称
• 分类
• 价格
• 库存
• 颜色
• 规格
• 方法

这些信息如果全部拆成独立变量，会越来越难维护。

对象可以把相关数据组织在一起。

---

2. 核心 JavaScript 知识

本章重点：

• 对象字面量 {}
• 属性
• 点语法
• 嵌套对象
• 数组属性
• 布尔属性
• 对象方法
• this

典型结构：

product
├── id
├── name
├── category
├── price
├── inStock
├── colors[]
├── specs{}
└── getSummary()

---

3. HTML 做了什么？

index.html 提供几个独立观察区域：

• 产品基本信息
• 普通属性
• 嵌套对象
• 数组属性
• 对象方法

页面只负责展示结果。

---

4. JavaScript 做了什么？

js/app.js 创建一个产品对象，并分别读取：

• 普通属性
• 嵌套规格
• 颜色数组
• 对象方法

然后把结果输出到页面。

---

5. 数据如何流动？

product 对象
↓
读取属性 / 调用方法
↓
得到结果
↓
DOM
↓
页面展示

---

6. 修改哪里可以观察结果？

推荐直接修改 js/app.js。

实验 A

修改：

name
price
category

观察产品卡片。

实验 B

在 specs 中新增：

weight
material
surface

并尝试读取。

实验 C

给 colors 新增颜色。

实验 D

修改对象方法，让它返回更多产品信息。

---

7. 可以继续扩展什么？

后续可以继续研究：

• 方括号访问属性
• 动态属性名
• Object.keys()
• Object.values()
• Object.entries()
• 对象复制
• 对象合并

但对象复制与展开语法会在下一章重点研究。

---

与前面章节的关系

第 05 章：

数组是一组数据。

第 06 章：

数组方法用于处理一组数据。

第 07 章：

对象用于描述一个完整事物。

真实项目中最常见的数据结构通常是：

Array
+
Object

例如：

products[]
  ├── product{}
  ├── product{}
  └── product{}

这也是以后 API、JSON、WooCommerce 产品数据等场景中非常常见的结构。

---

文件结构

07-object/
├── index.html
├── css/
│   └── style.css
├── js/
│   └── app.js
└── README.md

---

学习目标

完成本章后，应能够理解：

JavaScript 对象可以把一个事物的多个属性、嵌套数据和行为组织在一起，从而形成结构化数据模型。

下一章：

08-destructuring-spread：解构赋值与展开语法。