解构赋值是 ES6（ECMAScript 2015）引入的语法，通过模式匹配从数组或对象中提取值并赋值给变量。：
-
功能实现
- 数组解构：按位置匹配值，如
let [a, b] = [1, 2]。 - 对象解构：按属性名匹配值，如
let {name, age} = {name: 'John', age: 30}。 - 嵌套解构：支持多层结构提取，如
let {a: {b}} = {a: {b: 1}}]。
- 数组解构：按位置匹配值，如
- 后续版本（如 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"解构赋值的复制行为
解构赋值本质是浅拷贝，即仅复制对象的第一层属性：
- 基本类型：直接复制值（如数字、字符串）。
- 引用类型：复制引用地址，修改新变量会影响原对象
const obj = { a: 1, b: { c: 2 } };
const { a, b } = obj;
b.c = 3; // 原对象的 b 属性也会被修改解构赋值的常见陷阱
-
解构未定义对象
const { a } = undefined; // 报错 // 解决方案：提供默认值或条件判断 const { a } = obj || {}; -
变量名冲突
const a = 1; const { a: b } = { a: 2 }; // b=2, 原变量 a 不受影响 -
嵌套解构的可读性问题
// 复杂嵌套降低可读性 const { user: { profile: { name } } } = data; // 建议分步解构 const { user } = data; const { profile } = user; -
剩余参数（
...）的位置限制const [a, ...b, c] = [1,2,3]; // 语法错误，剩余参数必须为最后一个元素
解构赋值的典型应用场景
-
函数参数解构
function getUser({ name = 'Guest', age }) { ... } -
交换变量值
let x = 1, y = 2; [x, y] = [y, x]; // x=2, y=1 -
处理 API 响应
const { data: { user: { id, name } } } = await fetch();
)
