javascript解构赋值可从数组或对象中按索引或属性名批量提取值并赋给变量,支持跳过项、默认值、rest操作符、嵌套解构及函数参数解构,简化交换变量、处理返回值等操作。

JavaScript 中解构赋值能让你一行代码从数组或对象中提取值并赋给变量,省去手动取值和重复声明的步骤,写法简洁、可读性强。
从数组中批量提取并声明变量
按索引顺序从数组中取出元素,直接赋给对应变量名:
const [a, b, c] = [1, 2, 3]; console.log(a); // 1 console.log(b); // 2 console.log(c); // 3
- 变量数量少于数组长度时,只取前几个;多于时,多余变量为 undefined
- 可用逗号“跳过”不需要的项:
const [first, , third] = ['a', 'b', 'c']; - 支持默认值:
const [x = 10, y = 20] = [5];→ x=5,y=20 - 配合 rest 操作符收集剩余项:
const [head, ...tail] = [1, 2, 3, 4];→ tail 是 [2, 3, 4]
从对象中按属性名提取并声明变量
根据属性键名自动匹配,无需重复写点号访问:
const user = { name: 'Alice', age: 28, city: 'Beijing' };
const { name, age } = user;
console.log(name); // 'Alice'
console.log(age); // 28
- 变量名必须与属性名一致;若想用不同变量名,用 别名语法:
{ name: userName } - 支持嵌套解构:
const { profile: { level } } = { profile: { level: 5 } }; - 可设默认值应对缺失属性:
const { job = 'unknown' } = user; - 同样支持 rest 操作符:
const { name, ...rest } = user;→ rest 是 { age: 28, city: 'Beijing' }
函数参数中直接解构(常用且实用)
在函数形参位置直接解构,让调用更清晰、内部逻辑更干净:
function greet({ name, age }) {
return `Hello ${name}, you are ${age} years old.`;
}
greet({ name: 'Bob', age: 30 }); // "Hello Bob, you are 30 years old."
- 适用于配置对象传参场景,避免函数体内一堆
const name = config.name - 可结合默认值处理可选参数:
function connect({ host = 'localhost', port = 3000 }) { ... } - 也支持数组参数解构:
function swap([a, b]) { return [b, a]; }
交换变量值、提取函数返回值等快捷用法
解构不只是初始化,还能简化常见操作:
-
交换两个变量:不用临时变量 —
[a, b] = [b, a]; -
接收多个返回值:函数返回数组时直接解构 —
const [min, max] = Math.minMax?.([1,5,3]) || [1,5];(需自行实现或用库) -
快速提取 Promise.all 结果:
const [user, posts] = await Promise.all([fetchUser(), fetchPosts()]); -
忽略部分返回值:
const [, , year] = new Date().toDateString().split(' '); // 取年份
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











