正在加载...

对象属性

字面量和点号读取已经在工具箱里。真实表单上,袋子本身会变:购物的人选定颜色,字段就出现;保存时草稿标记消失;城市住在地址里面。这一页就是属性上的这种日常操作。

跨过第一个字面量

对象那一页把袋子造好,并读过一个字段。这里你改的是「哪些键还在」:把原先没有的名字补上,丢掉不再需要的名字,问这个名字在不在,走进放在另一个对象里的对象,再把你真正握着的名字列出来。

属性上的五个动作

📊 添加、删除、判断、嵌套、列举

动作 写法 得到什么
添加 item.color = "blue" 同一个对象上的新属性
删除 delete item.draft 那个键没了
是否存在 "sku" in item true 或 false
嵌套 user.address.city 另一个对象里面的字段
列举 Object.keys(user) 对象自身键名的数组

说得出动作,对应的那一行就跟着来。添加不会另铸一个对象。删除不会把值变成空字符串。名字清单和读取一个值不是同一件事。

添加字面量里没有的属性

javascript
let item = {
name: "Mug",
price: 8
};
item.color = "blue";
console.log(item.color);

赋值让缺失的键长出来

item 一开始只有 name 和 price。因为没有 color,item.color = "blue" 就把这个键造出来。对象仍是同一个,现在有三个属性。控制台打印 blue。

用 delete 去掉属性

javascript
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 是另一回事:键还留着,只是值换了。

询问键在不在

javascript
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 问的是键,不是坐在那里的值。

读取嵌套对象里的字段

javascript
let user = {
name: "Lina",
address: {
city: "Shiraz",
zip: "71345"
}
};
console.log(user.address.city);

属性可以再装一个对象

address 不是字符串。它是带 city 和 zip 的对象。user.address.city 走两步:先进入 address,再进入 city。控制台打印 Shiraz。嵌套把地址的各块留在一起,而不是把每一块摊平到 user 上。

列出对象自身的键

javascript
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,再把城市放进段落。

页面演示——嵌套的城市

html
<!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,刷新,读新的一行。下一课:对象方法——住在对象上的函数。

练习步骤

  1. 建一个有两个属性的对象,用赋值加上第三个并打印。
  2. 放上 draft,用 delete 去掉,再检查 "draft" in item。
  3. 在只有 name 的对象上打印 "name" in item 和 "sku" in item。
  4. 把 address 嵌上 city,再打印 user.address.city。
  5. 对有两个键的对象打印 Object.keys,读那个数组。
  6. 在 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 返回的是名字,不是值
  • 嵌套字段和刚加上的字段可以在页面上共用一行
  • 下一课:对象方法——存在对象上的函数

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己,看看你对这个主题的理解程度如何

❓
8
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部