javascript解构赋值支持从数组或对象中按位置或属性名提取值并赋给变量,语法简洁、可读性高,支持跳过、剩余元素、默认值、别名、嵌套及函数参数解构,但需注意变量声明、undefined判断和引用关系。

JavaScript 的解构赋值能让你从数组或对象中快速提取值并赋给变量,写法简洁、可读性高。
数组解构:按位置取值
左边用方括号 [],变量顺序对应数组元素索引。未匹配的变量得 undefined,也可跳过或设置默认值。
-
基本用法:
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 [d = 5] = [];→d=5;const [e = 10] = [null];→e=null(注意:默认值只在undefined时生效)
对象解构:按属性名取值
左边用花括号 {},变量名需与属性名一致(或使用别名),支持嵌套和默认值。
-
基础写法:
const { name, age } = { name: 'Alice', age: 25 };→ 直接得到变量name和age -
别名赋值:
const { name: userName, age: userAge } = { name: 'Bob', age: 30 };→userName='Bob', userAge=30 -
嵌套解构:
const { user: { id, profile: { city } } } = { user: { id: 123, profile: { city: 'Shanghai' } } }; -
默认值 + 可选属性:
const { level = 'guest', role } = { role: 'admin' };→level='guest', role='admin'
函数参数中的解构
可在函数形参位置直接解构,让调用更清晰,尤其适合配置对象。
function greet({ name = 'Guest', greeting = 'Hello' }) { return `${greeting}, ${name}!`; }- 调用:
greet({ name: 'Tom' })→"Hello, Tom!";greet({ greeting: 'Hi' })→"Hi, Guest!" - 数组参数也支持:
function sum([a, b]) { return a + b; }→sum([3, 5])返回8
注意事项和常见坑
解构本身不创建新引用,但要注意赋值目标必须是可写的,且语法结构要匹配。
- 不能对未声明变量直接解构(除非用括号包裹,如
([a, b] = [1, 2]);) - 对象解构时,若属性不存在,变量为
undefined,不会报错 - 解构赋值不等于深拷贝,对象/数组内部仍是引用关系
- 避免过度嵌套解构,影响可读性;复杂结构建议分步或用工具函数处理
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











