JavaScript解构赋值是从数组或对象中提取值并赋给变量的简洁语法,支持重命名、默认值、嵌套解构、数组按位置提取、跳过元素、剩余运算符、函数参数自动解构及与rest/spread组合使用。

JavaScript 解构赋值是一种从数组或对象中提取值并赋给变量的简洁语法,它能大幅减少冗余代码,让逻辑更清晰、可读性更强。
快速提取对象属性
传统方式需要逐个访问属性再赋值,解构则一步到位:
说明:只需在等号左边用与目标对象结构相同的“模式”声明变量名,JS 自动匹配赋值。
- 基础用法:
const { name, age } = user;等价于const name = user.name; const age = user.age; - 重命名属性:
const { name: fullName, age: years } = user;提取时直接改名 - 设置默认值:
const { city = 'Beijing', level = 1 } = user;属性不存在时启用默认 - 嵌套解构:
const { profile: { avatar, bio } } = user;一层写完深层路径
高效处理数组元素
按位置提取数组项,跳过不需要的元素,甚至交换变量也不用临时变量:
立即学习“Java免费学习笔记(深入)”;
说明:方括号内对应索引顺序,空位表示跳过,剩余运算符(...)收集其余项。
- 基础提取:
const [first, second] = ['a', 'b', 'c'];→first === 'a',second === 'b' - 跳过中间项:
const [a, , c] = ['x', 'y', 'z'];→a === 'x',c === 'z' - 获取剩余元素:
const [head, ...tail] = [1, 2, 3, 4];→tail是[2, 3, 4] - 快速交换:
[a, b] = [b, a];一行完成,无需临时变量
函数参数自动解构
把解构用在函数形参上,让调用更语义化,也避免手动解析传入的对象或数组:
- 对象参数解构:
function greet({ name, greeting = 'Hello' }) { return `${greeting}, ${name}!`; }
调用:greet({ name: 'Alice' })→"Hello, Alice!" - 数组参数解构:
function sum([a, b]) { return a + b; }
调用:sum([3, 5])→8 - 混合使用:
function draw({ x, y }, [width, height]) { /* ... */ }
配合 rest/spread 和默认值提升健壮性
解构不是孤立语法,和扩展运算符、默认值组合后,能优雅应对不确定结构的数据:
- 安全提取 API 响应:
const { data = {}, error = null } = response || {}; - 合并配置:
const config = { timeout: 5000, ...customConfig };再用解构读取:const { timeout, retries = 3 } = config; - 函数返回多值处理:
const [err, result] = await doAsync();—— 类似 Go 风格错误处理
不复杂但容易忽略。用对了,代码会更轻、更稳、更容易维护。











