JavaScript解构赋值是从数组或对象中提取值并赋给变量的简洁语法，支持对象/数组解构、重命名、默认值、嵌套、剩余参数及函数参数解构，大幅提升代码可读性与开发效率。
JavaScript解构赋值是一种从数组或对象中提取值并赋给变量的简洁语法，它让取值操作更直观、代码更少、可读性更高。
对象解构：按属性名直接取值
不用再写 const name = user.name; const age = user.age; 这样重复的点号访问。只要结构匹配，就能一次性把多个属性赋给同名变量：
-
基础用法：
const { name, age } = user;—— 变量名必须和属性名一致 -
重命名变量：
const { name: userName, age: userAge } = user;—— 冒号左边是原属性名，右边是新变量名 -
设置默认值：
const { city = 'Beijing', avatar } = user;—— 当city为undefined时启用默认值 -
嵌套解构：
const { profile: { bio, tags } } = user;—— 直接深入一层或多层取值，无需先取profile
数组解构：按位置提取元素
告别 const first = arr[0]; const second = arr[1];，用方括号按索引顺序快速取值：
-
基本提取：
const [a, b, c] = [1, 2, 3];——a=1,b=2,c=3 -
跳过某些项：
const [first, , third] = ['a', 'b', 'c'];—— 中间留空，first='a',third='c' -
剩余元素收集：
const [head, ...tail] = [1, 2, 3, 4];——tail是数组[2, 3, 4] -
交换变量无需临时变量：
[x, y] = [y, x];—— 一行完成交换
函数参数解构：让接口更清晰
把解构用在函数形参上，能直接“拆开”传入的对象或数组，省去函数体内手动提取的步骤：
立即学习“Java免费学习笔记（深入）”；
-
对象参数解构：
function greet({ name, greeting = 'Hello' }) { return `${greeting}, ${name}!`; }
调用时只需greet({ name: 'Alice' })，不用关心参数顺序 -
数组参数解构：
function sum([a, b]) { return a + b; }
调用sum([3, 5])即得8 -
混合与默认结合：
function createPost({ title, content, tags = [], published = false }) { ... }—— 参数语义明确，缺省安全
实际简化场景举例
常见开发中，解构能显著减少样板代码：
-
处理 API 响应：
const { data: { id, username }, status } = await fetchUser(); -
React 中取 props：
function Button({ size = 'md', variant = 'primary', children }) { ... } -
Promise.all 后批量取值：
const [userRes, postRes] = await Promise.all([fetchUser(), fetchPosts()]); -
事件回调中快速取字段：
input.addEventListener('input', ({ target: { value } }) => console.log(value));
