正在加载...
JavaScript 对象
你已经会用 函数 和 闭包 把逻辑收拢。真实页面还需要结构化数据：商品的标题、价格和库存应放在一起。对象（object） 就是一个能装下多个具名片段的值。
对象是什么意思
对象把相关数据存成 属性（property）。每个属性有一个 键（key）——名字——和一个 值（value）。初学者通常先写 对象字面量：花括号 { }，里面是 键: 值 对。这一步还不需要类。
盯住四块
📊 字面量、键、值与访问
| 部分 | 作用 | 初学者提示 |
|---|---|---|
| 对象字面量 | 赋给变量的 { … } 值 |
一袋相关数据 |
| 键 | : 左边的属性名 |
怎么给这块贴标签 |
| 值 | : 右边的数据 |
字符串、数字、布尔值…… |
| 访问 | 用 . 或 [ ] 读或写 |
之后怎么拿到其中一块 |
能指出这四块，你就能讲清几乎所有入门对象例子。很多人惊讶的不是花括号——而是一个变量现在带着好几个具名字段。
let book = {
title: "Maps",
pages: 120
};
console.log(book);
花括号造出对象
book 是一个值。里面的 title 和 pages 是属性。逗号分隔各对。写完 } 后对象就能用了。打印 book 会在控制台看到整袋内容。
let book = {
title: "Maps",
pages: 120
};
console.log(book.title);
console.log(book.pages);
点号拿到一个字段
对象名、点、再写键：book.title。结果是字符串 "Maps"。读已知属性名时，点号是日常写法。这种形式下，键要像合法标识符。
let book = {
title: "Maps",
pages: 120
};
console.log(book["title"]);
console.log(book["pages"]);
方括号也能拿到字段
这里 book["title"] 与 book.title 同值。方括号里放字符串（或会变成键的表达式）。键在变量里、或名字不是简单标识符时用方括号。固定名字时，点号通常更清楚。
let book = {
title: "Maps",
pages: 120
};
book.pages = 140;
console.log(book.pages);
之后可以更新属性
给 book.pages 赋值会改那个字段。对象还是同一袋；里面有一个值变了。再读就是 140。后面的课会深入添加和列举属性——这里目标是一次清楚的首次更新。
let item = {
name: "Mug",
price: 8
};
console.log(item.name);
console.log(item.price);
相关字段一起走
name 和 price 描述一件店里的商品。放在一个对象里，好过两个容易分家的全局变量。把 item 传给函数或放到页面上时，两个字段作为一体移动。
在页面上显示对象字段
建一个小商品对象，读一个属性，把那段文字放进段落。
<!DOCTYPE html>
<html>
<head>
<title>objects — page</title>
</head>
<body>
<p id="label">…</p>
<script>
let item = {
name: "Lamp",
price: 25
};
let box = document.getElementById("label");
box.textContent = item.name + " — " + item.price;
</script>
</body>
</html>
段落显示 Lamp — 25。只改对象的 name 或 price，刷新，读新的一行。下一课深入 对象属性——键如何表现，以及日常怎么用它们。
练习步骤
- 用字面量创建含两个属性的对象。
- 用点号在控制台打印一个属性。
- 用方括号和字符串键打印同一属性。
- 改一个属性并读取新值。
- 建带
name和price的item；打印两个字段。 - 在 HTML 演示里只改对象值，刷新，读段落。
常见失误
- 把对象当成编号列表（那更接近课程后面的 数组）
- 字符串值忘了引号——没有引号的
title: Maps是错的 - 讲解字面量时把键和值搞混
- 在这第一页就指望方法、
this或深入的属性工具——那些在后面 - 每个字段各建一个全局变量，而不是一个对象
小结
- 对象把相关值收成具名属性
- 字面量形如
{ 键: 值, … } - 点号（
obj.key）读取已知属性 - 方括号（
obj["key"]）用字符串键读取 - 可以给属性赋值以便稍后更新
- 对象移动时，相关字段仍在一起
- 页面更新可以用对象字段拼出字符串
- 下一课：对象属性——更深入地使用键
🧠 测试您的知识
准备开始
测试您的知识
通过这个互动测验挑战自己，看看你对这个主题的理解程度如何
8
问题
70%
及格要求
∞
时间
∞
尝试次数
📝 说明
- 仔细阅读每个问题
- 为每个问题选择最佳答案
- 您可以随时重新参加测验
- 您的进度将显示在顶部