【JavaScript】解构赋值与扩展运算符

解构赋值和扩展运算符是 ES6 使用频率最高的语法之一，能让对象和数组的操作代码大幅缩短，在 React、Vue 的现代项目里无处不在。

1. 对象解构

const user = { name: "张三", age: 18, city: "北京" };

// 基本解构：按属性名取值
const { name, age } = user;
console.log(name, age); // 张三 18

// 重命名与默认值
const { name: userName, hobby = "读书" } = user;
console.log(userName, hobby); // 张三 读书

// 嵌套解构
const student = { info: { score: 95 } };
const { info: { score } } = student;
console.log(score); // 95

2. 数组解构

const [first, second] = [1, 2, 3];
console.log(first, second); // 1 2

// 跳过与剩余元素
const [, third, ...rest] = [1, 2, 3, 4, 5];
console.log(third, rest); // 3 [4, 5]

// 交换变量，不再需要临时变量
let a = 1, b = 2;
[a, b] = [b, a];
console.log(a, b); // 2 1

3. 函数参数解构

// 直接在参数位置解构，还能给默认值
function createUser({ name, age = 18, role = "user" }) {
    return { name, age, role };
}

createUser({ name: "张三" });              // {name:"张三", age:18, role:"user"}

// 参数整体默认值，防止不传参数报错
function foo({ x = 1 } = {}) {
    console.log(x);
}
foo(); // 1

4. 扩展运算符 …

// 数组展开
const merged = [...arr1, ...arr2];
const copy = [...arr];           // 浅拷贝
const max = Math.max(...nums);

// 对象展开：后面的属性覆盖前面的
const base = { theme: "light", size: 14 };
const custom = { ...base, size: 16 };  // {theme:"light", size:16}

// 函数剩余参数（和展开是一对操作）
const [head, ...tail] = [1, 2, 3];

5. 注意浅拷贝

扩展运算符和解构都是浅拷贝，嵌套对象仍然共享引用：

const obj = { info: { score: 1 } };
const clone = { ...obj };
clone.info.score = 99;
console.log(obj.info.score); // 99，被影响了！

// 深拷贝用 structuredClone（现代标准）或 JSON 序列化
const deep = structuredClone(obj);