对象与 JSON

这一课你将能做到

1. 用对象字面量描述「一个用户 / 一门课」，并读写属性
2. 会用可选链 ?. 与解构，避免对 null/undefined 取属性报错
3. 说出 JSON 是什么，以及 JSON.stringify / JSON.parse 干什么

为什么要学

现实事物有多个字段：课程有标题、是否完成、时长。
对象把这些字段放在一个值里。前后端传数据常用 JSON（一种文本格式，长得像 JS 对象）。

学完数组你会处理「一列」；学完对象你会处理「一条记录」。
两者组合——Array of Object——就是绝大多数前端列表的数据形状。

先建立图像

const lesson = {
  title: "HTML",
  done: false,
  minutes: 30,
};
// 像一张表格行：字段名 → 值

变量 lesson ──●──► 堆里的对象 { title, done, minutes }
（装的是引用/地址；赋值给别人可能共享同一份）

概念	人话
对象	一组命名字段打成一个值
属性	字段名与值的一对
JSON	跨系统传数据的文本格式
浅拷贝	只复印第一层，内层仍可能共享

跟着做

步骤 1：读写与新增属性

const user = { name: "ada", score: 10 };
console.log(user.name);      // 点号读
console.log(user["score"]);  // 方括号读（键动态时有用）
user.score = 12;             // 改
user.city = "天津";          // 新增字段
console.log(user);

你应在控制台看到带 city 的对象。const 并不阻止改属性。

步骤 2：解构与剩余属性

const lesson = { title: "JS", done: true, minutes: 40 };
const { title, done } = lesson; // 一次性取出
console.log(title, done);

const { minutes, ...rest } = lesson;
console.log(minutes, rest); // 40 与 { title, done }

解构让参数和返回值更干净；后面函数「收一个配置对象」时很常见。

步骤 3：浅拷贝坑（重要）

const a = { profile: { city: "天津" } };
const b = { ...a }; // 展开运算：浅拷贝
b.profile.city = "北京";
console.log(a.profile.city); // "北京" —— 内层还是同一份！

// 第一层换绑则互不影响：
const c = { ...a, title: "副本" };
c.title = "改了";
console.log(a.title); // undefined（a 本来就没有 title）

人话：{...a} 只复制第一层。内层对象仍共享。改嵌套字段要小心。

步骤 4：可选链与空值合并

const data = { user: null };
// console.log(data.user.name); // TypeError
console.log(data.user?.name);    // undefined，不报错
console.log(data.user?.profile?.city ?? "未知城市");