6.1es新特性解构赋值

解构赋值是 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();