对象属性
字面量和点号读取已经在工具箱里。真实表单上,袋子本身会变:购物的人选定颜色,字段就出现;保存时草稿标记消失;城市住在地址里面。这一页就是属性上的这种日常操作。
跨过第一个字面量
对象那一页把袋子造好,并读过一个字段。这里你改的是「哪些键还在」:把原先没有的名字补上,丢掉不再需要的名字,问这个名字在不在,走进放在另一个对象里的对象,再把你真正握着的名字列出来。
属性上的五个动作
📊 添加、删除、判断、嵌套、列举
| 动作 | 写法 | 得到什么 |
|---|---|---|
| 添加 | item.color = "blue" |
同一个对象上的新属性 |
| 删除 | delete item.draft |
那个键没了 |
| 是否存在 | "sku" in item |
true 或 false |
| 嵌套 | user.address.city |
另一个对象里面的字段 |
| 列举 | Object.keys(user) |
对象自身键名的数组 |
说得出动作,对应的那一行就跟着来。添加不会另铸一个对象。删除不会把值变成空字符串。名字清单和读取一个值不是同一件事。
let item = {
name: "Mug",
price: 8
};
item.color = "blue";
console.log(item.color);
赋值让缺失的键长出来
item 一开始只有 name 和 price。因为没有 color,item.color = "blue" 就把这个键造出来。对象仍是同一个,现在有三个属性。控制台打印 blue。
let item = {
name: "Mug",
price: 8,
draft: true
};
delete item.draft;
console.log("draft" in item);
delete 把键掀走
delete item.draft 去掉的是这个属性,不是整个对象。之后 "draft" in item 为 false。名字和价格还在。存入 "" 或 null 是另一回事:键还留着,只是值换了。
let item = {
name: "Mug",
price: 8
};
console.log("name" in item);
console.log("sku" in item);
in 只回答键的有无
"name" in item 是 true——这个名字在对象上。"sku" in item 是 false——你从未加过它。缺失的属性读出来是 undefined,存进去的 undefined 读出来也一样。in 问的是键,不是坐在那里的值。
let user = {
name: "Lina",
address: {
city: "Shiraz",
zip: "71345"
}
};
console.log(user.address.city);
属性可以再装一个对象
address 不是字符串。它是带 city 和 zip 的对象。user.address.city 走两步:先进入 address,再进入 city。控制台打印 Shiraz。嵌套把地址的各块留在一起,而不是把每一块摊平到 user 上。
let user = {
name: "Lina",
role: "editor"
};
let names = Object.keys(user);
console.log(names);
Object.keys 交给你的是名字
Object.keys(user) 返回该对象自身键名的数组——这里是 ["name", "role"]。值仍用点号或方括号去读。不想把每个名字预先写死时,这份清单有用。它自己不打印值。
先选定动作,再敲键盘
要新字段?赋值。键该消失?用 delete。只要是否?用 in。城市在地址里面?先嵌套,再沿点号走。只要名字?用 Object.keys。存在对象上的函数——方法——是下一课的事。
添加之后,把嵌套的城市放到页面上
从用户和地址开始,在脚本里加上 plan,再把城市放进段落。
<!DOCTYPE html>
<html>
<head>
<title>object-properties — page</title>
</head>
<body>
<p id="place">…</p>
<script>
let user = {
name: "Lina",
address: { city: "Shiraz" }
};
user.plan = "yearly";
let box = document.getElementById("place");
box.textContent = user.address.city + " — " + user.plan;
</script>
</body>
</html>
段落显示 Shiraz — yearly。城市本来就嵌套着;plan 是字面量之后才到的。只改 city 或 plan,刷新,读新的一行。下一课:对象方法——住在对象上的函数。
练习步骤
- 建一个有两个属性的对象,用赋值加上第三个并打印。
- 放上
draft,用delete去掉,再检查"draft" in item。 - 在只有
name的对象上打印"name" in item和"sku" in item。 - 把
address嵌上city,再打印user.address.city。 - 对有两个键的对象打印
Object.keys,读那个数组。 - 在 HTML 演示里只改
city或plan,刷新,读段落。
常见失误
- 以为
item.color = "blue"会另铸一个全新对象——长大的是原来那个 - 本想
delete item.draft,却写成item.draft = null——键还在 - 把缺失的键和存进去的
undefined当成同一个问题——问键本身要用in city明明在user.address上,却写user.city- 指望
Object.keys返回值 - 在这一页找方法和
this——那是下一课
小结
- 给缺失的键赋值,就会加上那个属性
delete去掉键;对象其余部分还在"key" in obj告诉你键在不在- 属性可以再装一个对象;多写几个点就能走进去
Object.keys返回的是名字,不是值- 嵌套字段和刚加上的字段可以在页面上共用一行
- 下一课:对象方法——存在对象上的函数
🧠 测试您的知识
测试您的知识
通过这个互动测验挑战自己,看看你对这个主题的理解程度如何
📝 说明
- 仔细阅读每个问题
- 为每个问题选择最佳答案
- 您可以随时重新参加测验
- 您的进度将显示在顶部