解构赋值是JavaScript中从数组或对象提取值并赋给变量的简洁语法，支持按位置（数组）或属性名（对象）匹配、跳过元素、剩余参数、默认值、重命名、嵌套解构，并可用于函数参数，但需注意语法限制和null/undefined报错问题。
解构赋值是 JavaScript 中一种从数组或对象中提取值并赋给变量的简洁语法，它让取数据变得更直观、更少冗余，不用再写一堆 arr[0] 或 obj.name。
数组解构：按位置快速取值
传统方式要一个个索引取值，解构则用类似数组的结构来“匹配”并赋值：
-
基本用法：
const [a, b, c] = [1, 2, 3];→a = 1,b = 2,c = 3 -
跳过元素：
const [first, , third] = ['a', 'b', 'c'];→first = 'a',third = 'c' -
剩余元素：
const [x, ...rest] = [10, 20, 30, 40];→x = 10,rest = [20, 30, 40] -
默认值：
const [name = '匿名'] = [];→name会取默认值'匿名'
对象解构：按属性名精准提取
不再需要反复写 obj.prop，直接用属性名声明变量：
-
基础提取：
const { name, age } = { name: '小明', age: 25 };→ 变量name和age自动获得对应值 -
重命名变量：
const { title: bookName } = { title: 'JS入门' };→ 把title的值赋给bookName -
嵌套解构：
const { user: { id, profile: { city } } } = { user: { id: 123, profile: { city: '杭州' } } };→ 直接拿到id和city -
设置默认值：
const { role = 'user' } = {};→ 对象没role时自动用默认值
解构在函数参数中的实用场景
函数接收配置对象时，解构能让签名更清晰、调用更灵活：
立即学习“Java免费学习笔记（深入）”；
-
直接解构形参：
function connect({ host = 'localhost', port = 3000, secure = false }) { ... } -
调用时只传关心的字段：
connect({ host: 'api.example.com', secure: true });—— 其他用默认值 - 避免判断
options.host || 'localhost'这类重复逻辑
注意事项和常见坑
解构看着简单，但几个细节容易出错：
-
不能单独使用解构语句：
{ a, b } = { a: 1, b: 2 };会报语法错误（需加括号或声明），正确写法是const { a, b } = ...或({ a, b } = ...) -
null/undefined 会报错：
const { name } = null;→ TypeError。可用空值合并或可选链配合，如const { name } = data ?? {}; - 解构的是“值”，不是引用：对基本类型解构后修改变量，不影响原数组/对象；对对象/数组解构后，内部属性仍共享引用
基本上就这些。解构不是炫技，而是让代码更贴近“我想拿什么”的自然表达，读起来顺，写起来省，维护也轻松。
