对象的读写、解构与不可变更新

每点一个按钮，控制台会输出这次操作的表达式和真实结果。

一、点访问与方括号：键名什么时候必须加引号

user.name              // 键名是合法标识符 → 点访问
user['favorite-lang']  // 含连字符 → 方括号 + 引号
const key = 'age'
user[key]              // 方括号里放变量/表达式

二、新增、删除、判断键是否在

profile.city = '杭州'   // 新增或改写，赋值不区分两者
delete profile.city     // 删除（少用；置 null 或重建对象更清晰）
'age' in profile        // 判断键是否存在
profile.email ?? '未填'  // 不存在的键读到 undefined，用 ?? 兜底

三、属性简写、解构与剩余属性

const name = '阿蓝', age = 28
const user = { name, age }            // 简写：变量名即键名
const { name: nick } = account        // 取出并改名
const { age: userAge = 18 } = target  // 缺失时用默认值
const { createdAt, ...publicInfo } = account  // 剩余属性收成新对象
function renderCard({ title, date = '今天' }) { … }  // 参数位置解构

四、Object.keys / values / entries：对象转数组

Object.keys(pet)    // 键数组
Object.values(pet)  // 值数组
Object.entries(pet) // [[键, 值], …]，配合 for...of 遍历

for (const [k, v] of Object.entries(pet)) { … }

五、引用语义：别名、浅拷贝与深拷贝

const b = a                    // 别名，不是拷贝：改 b 连带改 a
const c = { ...a }             // 浅拷贝：第一层独立，嵌套对象仍共享
JSON.parse(JSON.stringify(a))  // 深拷贝穷人版：丢函数 / undefined，日期变字符串

六、不可变更新：改状态时别动原来的对象

左边是原对象 baseUser，右边由它派生。先点「不可变更新」（baseUser 保持 28，nextUser 为 29），再点「原地改」对比：原地改把旧对象自己也改了。