JavaScript解构赋值是通过数组或对象的结构提取值并赋给变量的简洁语法:数组按索引位置匹配,对象按属性名匹配,支持跳过、剩余收集、默认值、重命名和嵌套解构,但需避免解构null/undefined且左右结构须对齐。

JavaScript 解构赋值是一种简洁语法,用于从数组或对象中提取值并赋给变量,无需通过索引或属性名逐个访问。
从数组中解构:按位置取值
数组解构依据元素在数组中的顺序(索引)来匹配变量。左边用方括号 [],右边是数组。
- 基础用法:
const [a, b] = [1, 2];→a得到1,b得到2 - 跳过某些元素:
const [first, , third] = ['a', 'b', 'c'];→first = 'a',third = 'c' - 剩余元素收集:
const [x, ...rest] = [10, 20, 30, 40];→x = 10,rest = [20, 30, 40] - 默认值:
const [p = 0, q = 0] = [5];→p = 5,q = 0(因为第二个值不存在)
从对象中解构:按属性名取值
对象解构依据属性名匹配,左边用花括号 {},右边是对象。变量名默认需与属性名一致。
- 基础用法:
const { name, age } = { name: 'Alice', age: 30 };→ 直接得到变量name和age - 重命名变量:
const { name: fullName, age: years } = { name: 'Bob', age: 25 };→fullName = 'Bob',years = 25 - 设置默认值:
const { city = 'Unknown' } = { name: 'Tom' };→city为'Unknown'(因原对象无city属性) - 嵌套解构:
const { user: { id, profile: { level } } } = { user: { id: 123, profile: { level: 'pro' } } };→id = 123,level = 'pro'
实用技巧与注意事项
解构不仅用于声明变量,也可用于函数参数、返回值、甚至交换变量值,但需注意几个常见坑:
立即学习“Java免费学习笔记(深入)”;
- 解构 null 或 undefined 会报错:
const { x } = null;→ TypeError;可先做存在性检查或用空对象兜底:const { x } = obj || {}; - 函数参数解构很常用:
function greet({ name = 'Guest', lang = 'en' }) { return `Hello ${name}`; } - 不能单独解构(无声明):
{ a, b } = { a: 1, b: 2 };会报语法错误;必须加括号({ a, b } = { a: 1, b: 2 });或配合let/const - 解构不改变原数组或对象,只是读取值,属于“浅解构”——嵌套对象仍为引用
不复杂但容易忽略
解构本质是语法糖,背后仍是属性访问和数组索引。写得清楚时能让代码更直观,尤其处理 API 响应、配置对象或函数入参时。关键是记住左右结构要“形状对齐”,名字(或位置)对得上,再配上默认值和重命名,就能覆盖大多数场景。











