JavaScript 中怎么通过解构声明同时初始化多个变量-js教程-PHP中文网

javascript支持数组和对象解构赋值，可在一行中声明并初始化多个变量：数组解构按索引顺序提取值，支持跳过、默认值和剩余元素；对象解构按属性名提取，支持重命名、默认值和嵌套；常用于函数参数和循环，但需避免null/undefined解构。

javascript 中怎么通过解构声明同时初始化多个变量

JavaScript 中可以通过数组或对象解构赋值，在一行代码中同时声明并初始化多个变量，语法简洁且可读性强。

数组解构：按顺序提取值

适用于已知结构和顺序的类数组数据（如数组、函数返回的多个值）：

用方括号 [] 包裹变量名，顺序对应数组元素索引
变量会自动声明（使用 const、let 或 var），并赋上对应位置的值
支持跳过某些位置（留空逗号）、设置默认值、剩余元素收集

示例：

Java注释规范Skills

当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式，或要求按照代码注释规范处理 Java 文件时，使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则，并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括：补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。

下载

const [a, b, c] = [1, 2, 3]; // a=1, b=2, c=3<br>let [x, , z] = ['foo', 'bar', 'baz']; // x='foo', z='baz'（跳过索引1）<br>const [name = 'anonymous', age = 0] = ['Alice']; // name='Alice', age=0（默认值生效）<br>const [first, ...rest] = [10, 20, 30, 40]; // first=10, rest=[20, 30, 40]

对象解构：按属性名提取值

适用于从对象中提取特定属性，不依赖顺序，更语义化：

用花括号 {} 包裹属性名（或别名），名称需与对象键一致
可重命名变量（用 原属性名: 新变量名），避免命名冲突
同样支持默认值和嵌套解构

示例：

const user = { id: 123, name: 'Bob', role: 'admin' };<br>const { id, name } = user; // id=123, name='Bob'<br>const { name: userName, role: userRole } = user; // userName='Bob', userRole='admin'<br>const { status = 'active', tags = [] } = { status: undefined }; // status='active', tags=[]

混合使用与函数参数解构

解构也常用于函数参数，让调用更清晰，尤其适合配置对象：

函数形参直接写解构模式，调用时传入匹配结构的实参即可
可结合默认值，使参数更健壮
也可在单个语句中混合数组与对象解构（如从 API 响应中取 data 和 error）

示例：

function connect({ host = 'localhost', port = 3000 }, [username, password]) {<br>  console.log(`Connecting to ${host}:${port} as ${username}`);<br>}<br>connect({ host: 'api.example.com' }, ['admin', '123']);