对象解构与展开运算符
使用解构提取对象属性，使用展开运算符合并和克隆对象，并在函数签名中使用剩余参数。
对象解构与展开运算符 是 CoddyKit 上的免费 Frontend Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。
什么是解构
解构会将对象和数组中的值提取到命名变量中。它是多条属性访问语句的简写，可以让代码更简洁，并清楚表达所使用的属性。
对象解构基础
请在赋值语句左侧使用花括号来提取指定名称的属性。
const user = { name: 'Alice', age: 30, role: 'admin' };
// Without destructuring:
const name = user.name;
const age = user.age;
// With destructuring:
const { name, age, role } = user;
console.log(name); // 'Alice'
console.log(age); // 30重命名解构变量
解构时请使用 property: newName 语法重命名属性。当属性名称与现有变量冲突，或属性名称不够明确时，这种方式非常有用。
const { name: userName, age: userAge } = user;
console.log(userName); // 'Alice'解构中的默认值
如果某个属性的值为 undefined，则会使用默认值。您也可以将其与重命名结合使用。
const { name, role = 'viewer', theme = 'light' } = user;
// role is 'admin' (from object)
// theme is 'light' (default — not in object)嵌套对象解构
请提供嵌套模式来解构嵌套对象。
const order = {
id: 42,
customer: { name: 'Bob', email: 'bob@example.com' },
total: 99.99
};
const { id, customer: { name, email }, total } = order;
console.log(name); // 'Bob'数组解构
请使用方括号按位置解构数组。使用逗号可以跳过元素。
const [first, second, , fourth] = [10, 20, 30, 40];
console.log(first); // 10
console.log(second); // 20
console.log(fourth); // 40
// Swap variables:
let a = 1, b = 2;
[a, b] = [b, a];
console.log(a, b); // 2 1函数参数解构
直接在函数参数中进行解构，可以让 API 更清晰，并使代码能够自我说明。这在 React 组件函数中非常常见。
function greet({ name, greeting = 'Hello' }) {
return `${greeting}, ${name}!`;
}
greet({ name: 'Alice' }); // 'Hello, Alice!'
greet({ name: 'Bob', greeting: 'Hi' }); // 'Hi, Bob!'对象上的展开运算符
展开运算符 { ...obj } 会创建对象的浅拷贝，也可以合并对象。如果键发生冲突，后面的键会覆盖前面的键。
const defaults = { theme: 'light', lang: 'en', debug: false };
const userPrefs = { theme: 'dark', lang: 'fr' };
const settings = { ...defaults, ...userPrefs };
// { theme: 'dark', lang: 'fr', debug: false }数组上的展开运算符
[...arr] 会创建数组的浅拷贝。请使用展开语法连接数组，并以不可变方式在数组开头或末尾添加项目。
const base = [1, 2, 3];
const extended = [...base, 4, 5]; // [1, 2, 3, 4, 5]
const prepended = [0, ...base]; // [0, 1, 2, 3]
const combined = [...base, ...extended]; // [1, 2, 3, 1, 2, 3, 4, 5]解构中的剩余语法
剩余语法会将其余属性或元素收集到一个新对象或新数组中。剩余模式必须位于最后。
const { name, ...rest } = { name: 'Alice', age: 30, role: 'admin' };
console.log(name); // 'Alice'
console.log(rest); // { age: 30, role: 'admin' }
const [head, ...tail] = [1, 2, 3, 4];
console.log(head); // 1
console.log(tail); // [2, 3, 4]浅拷贝与深拷贝
展开语法和解构都会创建浅拷贝。嵌套对象和数组仍然是共享引用。请使用 structuredClone(obj)（现代方式）或 JSON.parse(JSON.stringify(obj))（传统方式）进行深度克隆。
const a = { x: 1, nested: { y: 2 } };
const b = { ...a };
b.x = 99; // a.x is still 1 (shallow copy OK)
b.nested.y = 99; // a.nested.y is now 99! (reference shared)快速检查
const { a, ...rest } = obj 的作用是什么？
回顾：解构与展开语法
对象解构会提取指定名称的属性。数组解构会按位置提取元素。使用冒号重命名，使用 = 设置默认值。嵌套模式用于解构深层对象。展开语法会创建浅拷贝并合并对象或数组。剩余语法会收集其余属性或元素。
常见问题解答
「对象解构与展开运算符」课时是免费的吗？
是的 — 「对象解构与展开运算符」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。
「对象解构与展开运算符」这节课中我会学到什么？
使用解构提取对象属性，使用展开运算符合并和克隆对象，并在函数签名中使用剩余参数。 你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Frontend Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「对象解构与展开运算符」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Frontend Academy 课中编写并运行代码吗？
能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。