JavaScript中的解构赋值（Destructuring Assignment）

1. 描述
解构赋值是ES6引入的一种语法，允许从数组或对象中提取值，并按照对应位置或属性名赋值给变量。它简化了变量声明和赋值操作，使代码更简洁易读。

2. 基本用法
（1）数组解构

• 基本形式：用方括号[]匹配数组结构，变量按顺序赋值：

  const arr = [1, 2, 3];
  const [a, b, c] = arr; // a=1, b=2, c=3
  

• 跳过元素：使用空位忽略某些值：

  const [x, , z] = [10, 20, 30]; // x=10, z=30
  

• 默认值：当解构的值严格等于undefined时使用默认值：

  const [p = 5, q = 6] = [1]; // p=1, q=6
  

（2）对象解构

• 基本形式：用花括号{}匹配对象结构，变量名需与属性名一致：

  const obj = { name: "Alice", age: 30 };
  const { name, age } = obj; // name="Alice", age=30
  

• 重命名变量：使用冒号:指定新变量名：

  const { name: userName, age: userAge } = obj; // userName="Alice", userAge=30
  

• 默认值：同样适用于未定义或值为undefined的情况：

  const { role = "guest" } = { role: undefined }; // role="guest"
  

3. 嵌套解构
解构可以嵌套多层，用于处理复杂数据结构：

const data = { 
  user: { 
    id: 1, 
    profile: { name: "Bob" } 
  } 
};
const { user: { profile: { name } } } = data; // name="Bob"

4. 函数参数解构
直接在参数列表中使用解构，避免在函数体内手动提取值：

function printUser({ name, age }) {
  console.log(`${name} is ${age} years old.`);
}
printUser({ name: "Tom", age: 25 });

结合默认值，防止参数缺失报错：

function setup({ width = 100, height = 200 } = {}) {
  console.log(width, height);
}
setup(); // 输出 100, 200（避免传入undefined时报错）

5. 特殊场景与技巧

• 交换变量：无需临时变量：

  let a = 1, b = 2;
  [a, b] = [b, a]; // a=2, b=1
  

• 剩余模式（Rest Pattern）：用...收集剩余值：

  const [first, ...rest] = [1, 2, 3, 4]; // first=1, rest=[2,3,4]
  

• 字符串解构：字符串可视为字符数组：

  const [c1, c2] = "Hi"; // c1="H", c2="i"
  

6. 注意事项

• 解构失败时（如变量数多于值），多余变量值为undefined。
• 对象解构的变量名必须是有效属性名，若属性不存在则解构结果为undefined。
• 对null或undefined解构会报错（因为它们没有属性），需通过默认值或空对象兜底。

7. 实际应用示例

• 提取API返回数据：

  const response = { data: { items: [1, 2, 3] } };
  const { data: { items } } = response; // 直接获取items数组
  

• 函数多返回值：

  function getCoordinates() { return [10, 20]; }
  const [x, y] = getCoordinates(); // 直接赋值给x和y
  

通过解构赋值，可以显著减少冗余代码，提高数据操作的直观性。