javascript解构赋值怎么用_如何从数组和对象中提取值

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

函数参数中直接解构

函数形参也支持解构，让调用更清晰、逻辑更聚焦：

故事AI绘图神器

文本生成图文视频的AI工具，无需配音，无需剪辑，快速成片，角色固定。

77

查看详情

立即学习“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解构赋值怎么用_如何从数组和对象中提取值的详细内容，更多请关注php中文网其它相关文章！