JavaScript中的解构赋值是什么_如何使用它

8次阅读

解构赋值是 JavaScript 中从数组或对象提取值并赋给变量的简洁语法,支持对象 / 数组解构、重命名、默认值、嵌套结构及函数参数解构。

JavaScript 中的解构赋值是什么_如何使用它

解构赋值是 JavaScript 中一种从数组或对象中提取值并赋给变量的简洁语法,它让代码更清晰、更少冗余。

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

可以直接从对象中取出指定属性,无需重复写对象名和点号。

  • 基础用法:const {name, age} = person; 等价于 const name = person.name; const age = person.age;
  • 重命名变量:const {name: fullName, age: userAge} = person;name 赋给 fullName
  • 设置默认值:const {city = ‘Beijing’} = person; 如果 person.city 不存在或为 undefined,就用默认值

数组解构:按位置提取元素

通过方括号和逗号分隔的位置关系,快速获取数组中的项。

  • 基本形式:const [first, second] = arr; 取出前两个元素
  • 跳过某些元素:const [,, third] = arr; 忽略前两项,只取第三项
  • 剩余元素收集:const [head, …rest] = arr; rest 是一个包含后续所有元素的新数组

嵌套结构也能解构

对象或数组内部还有对象或数组时,可以一层层展开写。

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

  • 嵌套对象:const {address: { street, zip} } = user;
  • 嵌套数组:const [[a, b], [c]] = matrix; 从二维数组中分别取出值
  • 混合使用:const {items: [firstItem], meta: {total} } = response;

函数参数中的解构很实用

把解构直接写在函数形参里,调用时传入对象或数组即可自动拆解。

  • 对象参数:function logUser({name, age = 18}) {console.log(name, age); }
  • 数组参数:function swap([a, b]) {return [b, a]; }
  • 配合默认参数:function getConfig({timeout = 5000, retries = 3} = {}) {…} 还能防止传入 undefined 报错
text=ZqhQzanResources