解構賦值是?ES6（ECMAScript 2015）引入的語法，通過模式匹配從數組或對象中提取值并賦值給變量。：

1. 功能實現

   • 數組解構：按位置匹配值，如?let [a, b] = [1, 2]。
   • 對象解構：按屬性名匹配值，如?let {name, age} = {name: 'John', age: 30}。
   • 嵌套解構：支持多層結構提取，如?let {a: {b}} = {a: {b: 1}}]。
2. 后續版本（如 ES2018）對其功能進行了擴展，例如：

• 對象剩余屬性解構：let {a, ...rest} = {a: 1, b: 2}。
• 函數參數解構：支持直接解構傳入參數]。

  //通過 ... 運算符將對象中未顯式解構的屬性收集到一個新對象中
  const obj = { a: 1, b: 2, c: 3 };
  const { a, ...rest } = obj;console.log(a);     // 輸出：1 
  console.log(rest);  // 輸出：{ b: 2, c: 3 }//在函數定義時直接解構傳入的對象參數，簡化參數提取過程// 參數解構基本用法 
  function printUser({ name, age }) {console.log(`Name:  ${name}, Age: ${age}`);
  }const user = { name: "Alice", age: 25, role: "admin" };
  printUser(user); // 輸出：Name: Alice, Age: 25 

解構詳解

• ??數組解構??：按位置匹配元素，支持跳過、默認值和剩余模式（...）

• ??對象解構??：按屬性名匹配值，支持變量重命名、默認值和嵌套解構

let [a, b] = [1, 2];  // a=1, b=2 
let [x, , z] = [10, 20, 30];  // x=10, z=30（跳過中間元素）
// 當解構值為 undefined 時觸發默認值：
let [name = "Guest"] = [];  // name="Guest"
//剩余參數捕獲
const [x, ...y] = [1,2,3]; // x=1, y=[2,3]// 對象解構賦值  對象解構示例
//通過屬性名直接賦值（變量名需與屬性名一致）
let {name, age} = {name: "Alice", age: 25};  // name="Alice", age=25 
//可重命名變量或設置默認值：
let {id: userId, role = "user"} = {id: 123};  // userId=123, role="user"const { name: userName, age = 18 } = { name: 'Alice' }; // userName='Alice', age=18
//支持多層嵌套結構：
let {data: {list}} = {data: {list: [1,2,3]}};  // list=[1,2,3]//已聲明變量解構,需用括號包裹表達式
let name;
({name} = {name: "Bob"});  // name="Bob"

解構賦值的復制行為

解構賦值本質是??淺拷貝??，即僅復制對象的第一層屬性：

1. ??基本類型??：直接復制值（如數字、字符串）。
2. ??引用類型??：復制引用地址，修改新變量會影響原對象

const obj = { a: 1, b: { c: 2 } };
const { a, b } = obj;
b.c = 3; // 原對象的 b 屬性也會被修改

解構賦值的常見陷阱

1. ??解構未定義對象??

   const { a } = undefined; // 報錯
   // 解決方案：提供默認值或條件判斷
   const { a } = obj || {};

2. ??變量名沖突??

   const a = 1;
   const { a: b } = { a: 2 }; // b=2, 原變量 a 不受影響

3. ??嵌套解構的可讀性問題??

   // 復雜嵌套降低可讀性
   const { user: { profile: { name } } } = data;
   // 建議分步解構
   const { user } = data;
   const { profile } = user;

4. ??剩余參數（...）的位置限制??

   const [a, ...b, c] = [1,2,3]; // 語法錯誤，剩余參數必須為最后一個元素

解構賦值的典型應用場景

1. ??函數參數解構??

   function getUser({ name = 'Guest', age }) { ... }

2. ??交換變量值??

   let x = 1, y = 2;
   [x, y] = [y, x]; // x=2, y=1

3. ??處理 API 響應??

   const { data: { user: { id, name } } } = await fetch();