📁 第十课：JS 对象 — 数据的档案袋

欢迎进入进阶学习！先回顾一下你的"数据仓库"升级史：

阶段	装什么	比喻	课
变量	一个值：`let name = "ycx"`	一张便签	第三课
数组	一串值：`[1, 2, 3]`	一条购物清单	第四课
对象	一套带标签的值：`{ name, age, ... }`	一个档案袋	⭐ 今天

🎭 总比喻：对象就是一个档案袋——每份资料都贴着标签（名字: 内容）。
你早就见过它了！第七课的 localStorage 就是"钥匙名 → 字条"的档案袋，第六课的 CSS 变量仓库 :root { --main: purple } 也是同样的套路。今天正式认识它。

🔧 2. 对象的写法：花括号 + 标签冒号

用一个"个人档案"做例子，新代码标序号：

let me = { /* ① 花括号 = 打开档案袋 */

    name: '一场戏一人生', /* ② 标签 : 内容，逗号隔开 */

    age: 20,

    hobbies: ['音乐', '网页'] /* ③ 内容什么都能放，连数组都行 */

};

序号	部分	说明
①	`{ }`	对象的外壳，就像数组的 `[ ]`
②	`标签: 内容,`	每份资料：左边是标签名（key），右边是内容（value），中间冒号，份与份之间逗号
③	内容类型	字符串、数字、数组、甚至另一个对象或函数，都行

📌 标签名（key） 自己起名字；内容（value） 才是真正的数据。
对比数组：数组按位置找（第 0 号、第 1 号），对象按名字找——就像按座位号找人 vs 按姓名找人。

🔑 3. 取值三招：点、括号、改

me.name;              // ① 点语法（最常用）→ '一场戏一人生'

me['age'];       // ② 中括号语法 → 20（标签打引号）

me.age = 21;    // ③ 直接赋值 = 修改档案

me.school = '某大学'; // ④ 写个新标签 = 往里加资料

招数	写法	什么时候用
① 点语法	`me.name`	平时都用它，简洁
② 中括号	`me['age']`	标签名是变量或带特殊字符时（和数组下标长得很像吧？）
③ 修改	`me.age = 21`	和改变量一样，找到就换
④ 新增	`me.school = ...`	标签不存在时自动新开一份资料

取一个不存在的标签？返回 undefined（第七课的老朋友 null 的表亲——"查无此条"）。

🎙️ 4. 对象里还能放函数：方法（method）

还记得你之前问"有函数的文本怎么放进 div"吗？对象里的函数也是同样的思路——函数也是"资料"，贴上标签放进档案袋就行：

let me = {

    name: '一场戏一人生',

    sayHi: function() { /* ① 函数贴上标签 sayHi */

        return '大家好，我是 ' + this.name; /* ② this = 这个档案袋自己 */

    }

};

me.sayHi(); // ③ 点它 = 调用 → '大家好，我是一场戏一人生'

对象里的函数有个专属名字叫方法。你其实天天在用方法：localStorage.setItem() 就是"localStorage 这个档案袋"的 setItem 方法！
this 是"我自己这个对象"的代词——像自我介绍时说"我"，不用说全名。

📇 5. 黄金组合：数组里装对象

这是进阶开发最常用的姿势——为将来的音乐播放器铺路。一个歌单：

let songs = [

    { title: '晴天', artist: '周杰伦' }, /* 每首歌 = 一个档案袋 */

    { title: '稻香', artist: '周杰伦' }

];

songs[0].title;   // 数组取第 0 首 → 对象再取标签 → '晴天'

songs.length;          // 2（第四课的老朋友）

🎭 读法像地址一样：songs[0].title = "歌单 → 第 0 首 → 歌名"。数组负责"排队"，对象负责"贴标签"，分工合作。

📦 6. JSON：对象的"打包纸"（与第七课梦幻联动）

还记得第七课的大坑吗：抽屉只能存字符串。那对象怎么存进抽屉？答案：先"打包"成字符串。

let me = { name: '一场戏一人生', age: 20 };

// ① 打包：对象 → 字符串（存之前用）

let s = JSON.stringify(me);

// → '{"name":"一场戏一人生","age":20}'（注意整体带引号，是个字符串）

// ② 拆包：字符串 → 对象（取出来之后用）

let back = JSON.parse(s);

back.name; // → '一场戏一人生'，档案袋又回来了！

🎭 比喻：抽屉只收"字条"。JSON.stringify 把整个档案袋折成一张字条塞进去；取出来时 JSON.parse 把字条重新展开成档案袋。七课的"只能存字符串"限制，就这么被巧妙绕过了。

这个"打包成字符串"的格式就叫 JSON——它现在是全世界的通用格式，网页前后端之间、软件之间，全都靠 JSON 传数据。你学了一个世界级标准 😎

🎮 7. 亲手玩：档案袋操作台

下面是一个真的档案袋。填资料 → 建档案 → 存进抽屉 → 按 F5 刷新，再取出来——对象真的穿过"只能存字符串"的抽屉了！

👤 姓名： 🎂 年龄： 🎵 爱好：

档案袋现在的样子：

（还没建档案）

抽屉里存的字条（字符串）：

（空）

原理就是第 6 节的两步：stringify 打包存入 → parse 拆包取出。看抽屉里那条字条——它就是一个 JSON 字符串，和你的对象一一对应。

🛠️ 8. 动手挑战

✏️ 两个挑战：

① 给主页加"我的档案"（必做）
在 my-site\index.html 的 <script> 里建一个 me 对象：

let me = {

              name: '一场戏一人生',

              age: 20,

              hobbies: ['音乐', '网页开发']

            };

然后在"💬 关于我"区域新加一行，用占位法（span + getElementById）把 me.name、me.hobbies[0] 显示出来。改完记得同步副本 + 上传网站。

② 附加题：档案存进抽屉
把 me 对象用 JSON.stringify 存进 localStorage（钥匙名 me-档案），页面打开时 JSON.parse 取出来显示——你的档案就有"记忆"了。这和第七课的套路一模一样，只是这次存的不是单个字，是整个档案袋。

老规矩：改代码 → 保存 → 刷新 → F12 看报错。JSON 报错最常见的原因：标签名没打引号（JSON 里标签必须带引号，JS 对象里可以偷懒）。

📋 9. 今日总结

知识点	一句话
对象 ⭐	`{ 标签: 内容 }` —— 档案袋，按名字取资料
取值 ⭐	`obj.name` 点语法 / `obj['name']` 中括号
方法	对象里的函数，`this` 指自己
数组+对象 ⭐	`songs[0].title` —— 先排队再贴标签
JSON ⭐	`stringify` 打包存 / `parse` 拆包取，绕开"只能存字符串"

🎉 学完这一课：你就掌握了现代网页开发的数据基本功——
前端传数据、后端收数据、数据库存数据，全世界都在用对象 + JSON。
这是"网页"走向"软件"的第一块进阶基石。

✅ 下一步？

🌐

第十一课：fetch 调 API

让网页"上网拿数据"——从互联网接口实时获取信息（比如天气、名言），对象+JSON 就是它的语言

先做挑战，做完喊我检查！🚀