JavaScript解构赋值是通过[ ]或{ }按索引或属性名提取数组/对象值并赋变量的语法，支持跳过、rest、默认值、重命名、嵌套及函数参数解构，但需注意不能以{开头、不可解构null/undefined、默认值仅对undefined生效、且为浅拷贝。
JavaScript 解构赋值是一种简洁、直观地从数组或对象中提取值并赋给变量的语法，不用再写 arr[0] 或 obj.name 那么啰嗦。
从数组中解构：按位置取值
数组解构依据元素在数组中的**索引顺序**，用一对方括号 [] 匹配结构：
基本用法：const [a, b] = [1, 2]; → a 得到 1，b 得到 2 跳过某些项：用逗号占位，const [first, , third] = ['a', 'b', 'c']; → first = 'a'，third = 'c' 获取剩余元素（rest 操作符）：const [x, ...rest] = [10, 20, 30, 40]; → x = 10，rest = [20, 30, 40] 默认值：当对应位置为 undefined 时生效，const [name = '匿名'] = []; → name 是 '匿名'
从对象中解构：按属性名取值
对象解构依据**属性名（key）**，用一对花括号 {}，变量名默认需与属性名一致：
基础写法：const { name, age } = { name: '小明', age: 25 }; → 直接得到两个变量 重命名变量：用 原属性名: 新变量名，const { title: bookName } = { title: 'JS入门' }; → bookName 得到值 设置默认值：const { city = '北京' } = {}; → city 为 '北京'（注意：仅当属性不存在或值为 undefined 时触发） 嵌套解构：const { user: { id, profile: { nick } } } = { user: { id: 123, profile: { nick: '阿七' } } }; → 一步拿到 id 和 nick
函数参数中直接解构
函数形参也支持解构，让调用更清晰、逻辑更聚焦：
立即学习“Java免费学习笔记（深入）”；
对象参数解构：function show({ name, level = '普通' }) { console.log(`${name}是${level}用户`); }
调用 show({ name: '张三', level: 'VIP' }) 即可 数组参数解构（较少见但合法）：function swap([a, b]) { return [b, a]; }swap([1, 2]) 返回 [2, 1]
注意事项和常见坑
解构看着简单，但几个细节容易出错：
解构赋值语句不能以 { 开头（会被解析为代码块），如需立即解构对象，加括号：({ a } = obj) 或 const { a } = obj 解构 null 或 undefined 会报错：const { x } = null; → TypeError。可用空值合并或可选链配合：const { x } = obj ?? {}; 默认值只在对应值全等 === undefined 时生效，0、false、'' 等“falsy”值不会触发默认值 解构是浅拷贝，对嵌套对象/数组内部的修改仍会影响原数据
以上就是javascript解构赋值怎么用_如何从数组和对象中提取值的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1544682.html
微信扫一扫 
支付宝扫一扫 
