如何解构赋值_Javascript的语法是什么-js教程-PHP中文网

如何解构赋值_Javascript的语法是什么

紅蓮之龍

发布： 2025-12-19 21:40:02

原创

824人浏览过

解构赋值是JavaScript中按位置（数组）或属性名（对象）提取值并赋给变量的语法，支持跳过、剩余元素、默认值、重命名、嵌套及函数参数解构，但需注意括号包裹、null/undefined报错及保留字限制。

如何解构赋值_javascript的语法是什么

解构赋值是 JavaScript 中一种简洁提取数组或对象中值的语法，它让你不用通过下标或属性名反复访问，就能直接把数据“拆出来”赋给变量。

左边用方括号 []，右边是数组，变量顺序对应元素位置。

例如：

const [a, b] = [1, 2]; → a 是 1，b 是 2
跳过某项可用逗号占位：const [x, , z] = [1, 2, 3]; → x = 1，z = 3
剩余元素用扩展运算符：const [first, ...rest] = [1, 2, 3, 4]; → first = 1，rest = [2, 3, 4]
默认值写在等号后：const [a = 10, b = 20] = [5]; → a = 5，b = 20

左边用花括号 {}，变量名需与属性名一致（或使用别名），右边是对象。

Chatbase

从你的知识库中构建一个AI聊天机器人

117

例如：

const { name, age } = { name: 'Alice', age: 30 }; → 直接拿到 name 和 age
重命名用 原属性名: 新变量名：const { title: bookName } = { title: 'JS Guide' };
嵌套对象也能解构：const { user: { id, profile: { city } } } = { user: { id: 123, profile: { city: 'Beijing' } } };
同样支持默认值：const { role = 'guest' } = {}; → role 是 'guest'

函数形参可以直接写解构模式，让调用更清晰。

数组参数：function print([first, second]) { console.log(first, second); }
调用 print(['a', 'b']) 输出 a b
对象参数：function connect({ host = 'localhost', port = 3000 }) { ... }
调用 connect({ host: 'api.example.com' }) → host 被赋值，port 取默认

解构不是万能的，有些情况会报错或行为不符合直觉：

单独一行解构必须加括号，否则会被当成代码块：({ a } = { a: 1 }); 会报错，要写成 ({ a } = { a: 1 }); 或先声明再赋值
解构 null 或 undefined 会报错：const { x } = null; → TypeError；可配合空值合并或逻辑判断提前处理
对象解构时变量名不能是保留字（如 class、function），但可以用字符串形式别名绕过：const { 'class': cls } = { class: 'active' };

以上就是如何解构赋值_Javascript的语法是什么的详细内容，更多请关注php中文网其它相关文章！