javascript解构赋值是什么_如何从数组或对象中提取值?

18次阅读

javaScript解构赋值是简洁语法,支持从数组(按位置,用[])和对象(按属性名,用{})提取变量;支持跳过、剩余元素、默认值、重命名、嵌套及函数参数解构,但源为NULL/undefined时会报错。

javascript解构赋值是什么_如何从数组或对象中提取值?

javascript解构赋值是一种简洁语法,允许你从数组或对象中按结构“拆出”所需变量,无需逐个访问属性或索引。

从数组中提取值(数组解构)

按位置顺序提取元素,用方括号定义接收变量,顺序对应数组索引。

  • 基础用法:const [a, b] = [1, 2]; → a 是 1,b 是 2
  • 跳过某些项:用逗号占位,const [x, , z] = [10, 20, 30]; → x=10,z=30
  • 剩余元素:用 收集剩余项,const [first, …rest] = [1, 2, 3, 4]; → first=1,rest=[2,3,4]
  • 默认值:当对应位置为 undefined 时生效,const [a = 0, b = 1] = [5]; → a=5,b=1

从对象中提取值(对象解构)

按属性名提取,用花括号定义变量名,变量名需与属性名一致(或使用别名)。

  • 基础用法:const { name, age } = { name: ‘Alice’, age: 30 }; → name=’Alice’,age=30
  • 重命名变量:用 原属性名: 新变量名const { title: bookName } = { title: ‘js Guide’ };
  • 嵌套解构:可一层层展开,const { user: { profile: { city } } } = { user: { profile: { city: ‘Beijing’ } } };
  • 默认值:属性不存在或为 undefined 时启用,const { price = 99 } = { name: ‘book’ }; → price=99

实用场景与注意事项

解构常用于函数参数、API响应处理、react props 等地方,让代码更清晰。

立即学习Java免费学习笔记(深入)”;

  • 函数参数解构:function greet({ name, msg = ‘Hello’ }) { return `${msg}, ${name}!`; }
  • 交换变量无需临时变量:[a, b] = [b, a];
  • 注意:解构时若源为 nullundefined 会报错,建议配合可选链或提前校验
  • 对象解构不关心属性顺序,只看名字;数组解构严格依赖位置
text=ZqhQzanResources