前端JavaScript篇之对对象与数组的解构的理解、如何提取高度嵌套的对象里的指定属性?

目录

    • 对对象与数组的解构的理解
    • 如何提取高度嵌套的对象里的指定属性?


对对象与数组的解构的理解

对象与数组的解构是一种通过模式匹配的方式,从对象或数组中提取值,并将其赋给变量的过程。它可以让我们以一种简洁的方式访问和使用对象或数组中的数据。

  1. 对象解构:
    对象解构允许我们根据对象的属性名来提取对应的值,并将其赋给变量。
const person = { name: 'Alice', age: 25, gender: 'female' }const { name, age } = person
console.log(name) // 输出:Alice
console.log(age) // 输出:25

在上述例子中,我们定义了一个对象person,然后使用对象解构将person对象中的name属性和age属性提取并赋值给对应的变量name和age。这样,我们就可以直接通过变量名来访问对象中的值。

  1. 数组解构:
    数组解构允许我们根据数组的索引位置来提取对应的值,并将其赋给变量。
const numbers = [1, 2, 3, 4, 5];const [first, second, ...rest] = numbers;
console.log(first); // 输出:1
console.log(second); // 输出:2
console.log(rest); // 输出:[3, 4, 5]

在上述例子中,我们定义了一个数组numbers,然后使用数组解构将numbers数组中的第一个元素赋值给变量first,第二个元素赋值给变量second,剩余的元素赋值给变量rest(使用扩展运算符…)。这样,我们就可以通过变量名来访问数组中的值,并且可以轻松地提取剩余的元素。

对象解构和数组解构的使用场景包括:

  • 从函数返回的对象或数组中提取特定的值。
  • 快速访问和使用对象或数组中的数据。

总结来说,对象解构和数组解构是一种方便的方式,可以根据对象的属性名或数组的索引位置来提取对应的值,并将其赋给变量。它使我们能够以一种简洁的方式访问和使用对象或数组中的数据。

如何提取高度嵌套的对象里的指定属性?

要提取高度嵌套对象中的指定属性,可以使用对象解构的嵌套形式。对象解构的嵌套形式允许我们通过逐层解构的方式,从外层到内层逐步提取对象中的属性。

const person = {name: 'Alice',age: 25,address: {city: 'New York',street: '123 Main St',zip: '10001'}
}const {name,age,address: { city, street }
} = personconsole.log(name) // 输出:Alice
console.log(age) // 输出:25
console.log(city) // 输出:New York
console.log(street) // 输出:123 Main St

请添加图片描述

在上述例子中,我们定义了一个高度嵌套的对象person,其中包含了name、age和address属性。address属性又是一个嵌套对象,包含了city、street和zip属性。

使用对象解构的嵌套形式,我们可以一层一层地提取对象中的属性。首先,我们提取了外层的name和age属性,然后在address属性中继续嵌套解构,提取了内层的city和street属性。

这样,我们就可以通过变量名直接访问到高度嵌套对象中的指定属性。

需要注意的是,当提取的属性不存在时,对应的变量将会是undefined。如果需要设置默认值,可以使用解构赋值的默认值语法。

const person = {name: 'Alice',age: 25
}const { name, age, address: { city = 'Unknown', street = 'Unknown' } = {} } = personconsole.log(name) // 输出:Alice
console.log(age) // 输出:25
console.log(city) // 输出:Unknown
console.log(street) // 输出:Unknown

请添加图片描述

在上述例子中,我们定义了一个没有address属性的对象person。在解构赋值中,我们使用了默认值语法,将city和street的默认值设置为"Unknown"。由于person对象中没有address属性,所以解构赋值的默认值会生效,city和street的值都将是"Unknown"。

通过对象解构的嵌套形式,我们可以方便地提取高度嵌套对象中的指定属性,并且可以设置默认值来处理不存在的属性。

持续学习总结记录中,回顾一下上面的内容:
对象解构和数组解构是一种方便的方式,可以根据对象的属性名或数组的索引位置来提取对应的值,并将其赋给变量。它使我们能够以一种简洁的方式访问和使用对象或数组中的数据。
要提取高度嵌套对象中的指定属性,可以使用对象解构的嵌套形式。对象解构的嵌套形式允许我们通过逐层解构的方式,从外层到内层逐步提取对象中的属性。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/250141.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

嵌入式学习第十六天

C语言小项目&#xff1a; 制作俄罗斯方块小游戏&#xff08;1&#xff09; 主函数部分&#xff08;1&#xff09; #include <stdio.h> #include <unistd.h> #include <signal.h>extern int InitBoarder(void); extern int SetBoarder(void); extern int S…

2023年算法SAO-CNN-BiLSTM-ATTENTION回归预测(matlab)

2023年算法SAO-CNN-BiLSTM-ATTENTION回归预测&#xff08;matlab&#xff09; SAO-CNN-BiLSTM-Attention雪消融优化器优化卷积-长短期记忆神经网络结合注意力机制的数据回归预测 Matlab语言。 雪消融优化器( SAO) 是受自然界中雪的升华和融化行为的启发&#xff0c;开发了一种…

Unity DOTween插件常用方法(二)

文章目录 1.3 动画设置1.4 动画队列 Sequence1.5 动画回调函数1.6 等待函数&#xff08;协程中使用&#xff09; 1.3 动画设置 SetLoops 设置循环动画&#xff1b; 参数&#xff1a; loops&#xff1a;指定循环的次数&#xff0c;设置为 -1 表示无限循环&#xff1b; loopType…

由数据插入超长引起的问题——了解GaussDB和openGauss的字符集

前言 故事是这样开始的。我们的小DEMO项目的数据库版本从openGauss 2.1.0升级到了5.0.0版本。升级后进行功能验证的时候&#xff0c;测试同学发现个BUG&#xff0c;原来通过gs_restore导出来的数据再导入时报超长&#xff0c;插入失败了&#xff0c;如下图所示&#xff0c;nva…

如何让你的 Jmeter+Ant 测试报告更具吸引力?

引言 想象一下&#xff0c;你辛苦搭建了一个复杂的网站&#xff0c;投入了大量的时间和精力进行开发和测试。当你终于完成了测试并准备生成测试报告时&#xff0c;你可能会发现这个过程相当乏味&#xff0c;而对于其他人来说&#xff0c;它可能也不那么吸引人。 但是&#xf…

【RT-DETR改进涨点】ResNet18、34、50、101等多个版本移植到ultralytics仓库(RT-DETR官方一比一移植)

👑欢迎大家订阅本专栏,一起学习RT-DETR👑 一、本文介绍 本文是本专栏的第一篇改进,我将RT-DETR官方版本中的ResNet18、ResNet34、ResNet50、ResNet101移植到ultralytics仓库,网上很多改进机制是将基础版本的也就是2015年发布的ResNet移植到ultralytics仓库中,但是其实…

【Qt基本功修炼】Qt线程的两种运行模式

1. 前言 QThread是Qt中的线程类&#xff0c;用于实现多线程运行。 QThread有两种工作模式&#xff0c;即 消息循环模式无消息循环模式 两种模式分别适用于不同的场景。下面我们将从多个方面&#xff0c;讲解QThread两种工作模式的区别。 2. 消息循环模式 2.1 实现原理 Q…

【misc | CTF】攻防世界 2017_Dating_in_Singapore

天命&#xff1a;这次终于碰到了算是真正的misc题目了 下载附件&#xff0c;打开是PDF&#xff0c;我一开始以为是flag隐写在PDF里面了 虽然也不奇怪&#xff0c;应该是可以的&#xff0c;毕竟PDF有xss漏洞也是可以的 言归正传&#xff0c;打开PDF 看着新加坡的日历&#xff…

大数据平台-可视化面板介绍-Echarts

应对现在数据可视化的趋势&#xff0c;越来越多企业需要在很多场景(营销数据&#xff0c;生产数据&#xff0c;用户数据)下使用&#xff0c;可视化图表来展示体现数据&#xff0c;让数据更加直观&#xff0c;数据特点更加突出。 目录 01-使用技术 02- 案例适配方案 03-基础…

【BUG】golang gorm导入数据库报错 “unexpected type clause.Expr“

帮同事排查一个gorm导入数据报错的问题 事发现场 ck sql CREATE TABLE ods_api.t_sms_jg_msg_callback_dis (app_key String DEFAULT COMMENT 应用标识,callback_type Int32 DEFAULT 0 COMMENT 0送达&#xff0c;1回执,channel Int32 DEFAULT 0 COMMENT uid下发的渠道,mode…

EasyExcel通用导入 | 简单封装

0. 前言&#xff1a;1. 基本思路&#xff1a;2. 调用代码&#xff1a; 0. 前言&#xff1a; 之前做了好几个导入&#xff0c;用EasyExcel每次都要定义监听器去处理&#xff0c;就想能不能做个通用的方式&#xff0c;如下 1. 基本思路&#xff1a; 导入无非主要就是参数校验和数…

MacBook安装虚拟机Parallels Desktop

MacBook安装虚拟机Parallels Desktop 官方下载地址: https://www.parallels.cn/pd/general/ 介绍 Parallels Desktop 被称为 macOS 上最强大的虚拟机软件。可以在 Mac 下同时模拟运行 Win、Linux、Android 等多种操作系统及软件而不必重启电脑&#xff0c;并能在不同系统间随…

数据结构------算法时间复杂度

通俗的理解一下算法的时间复杂度 主要是看这个速发的时间性能&#xff0c;从这个算法规模入手&#xff0c;具体的看一下这个算法的所需时间与这个算法规模的关系 关系有 O(1) 常数次 1次 2次。。。。。。 O(n)一个for循环 O(n^2)两个for循环&#xff08;嵌套&#xff09; O(mn)…

【动态规划】【数学】1388. 3n 块披萨

作者推荐 【动态规划】【字符串】【表达式】2019. 解出数学表达式的学生分数 本文涉及知识点 动态规划汇总 LeetCode1388 3n 块披萨 给你一个披萨&#xff0c;它由 3n 块不同大小的部分组成&#xff0c;现在你和你的朋友们需要按照如下规则来分披萨&#xff1a; 你挑选 任…

异步编程,到底有什么用?

关键词&#xff1a;高性能、架构设计、异步思想、场景落地 文章导读 场景切入 先来看一个日常生活快递寄件场景&#xff0c;从寄件人&#xff08;寄件&#xff09;到收件人&#xff08;收件&#xff09;&#xff0c;全流程如下 当你准备寄送一个包裹时&#xff0c;通常你可以…

ManticoreSearch-(安装配置,集群搭建)-学习总结

ManticoreSearch-(安装配置)-学习总结 基础概念安装搭建集群搭建(基于K8S) 原文地址 https://blog.csdn.net/liuyij3430448/article/details/135955025 基础概念 Manticore Search是一个专门为搜索设计的多存储数据库&#xff0c;具有强大的全文搜索功能&#xff0c;适用于…

Python代码重构库之rope使用详解

概要 Python是一门强大的编程语言,但在大型项目中,维护和重构代码可能会变得复杂和困难。为了提高开发人员的效率和准确性,有许多工具可用于辅助代码重构和智能代码补全。其中之一是Python Rope。 Python Rope是一个用于Python编程语言的强大工具,它提供了丰富的功能,包…

EasyX图形库学习(一)

目录 一、easyX图形库基本介绍 1、easyX的原理 2、easyX的安装 3、easyX的颜色&#xff08;RGB颜色模型&#xff09; 颜色模型相关函数: 4、easyX的坐标 二、相关函数介绍: 绘图设备相关函数&#xff1a; 图形颜色及样式设置相关函数: 图形绘制相关函数: 文字输出相关…

iMazing 3中文版双平台版本同步,iOS 设备在 Windows 上也能自动备份了

自从WWDC 2019 宣布 iTunes 退役后&#xff0c;也许很多小伙伴都对「上位者」iMazing 有所耳闻。 这款设计更加人性化、功能细致强大的 iOS 备份管理工具。 iMazing 支持在 Windows 及 Mac 上运行&#xff0c;而这个月 Windows 版本更新至 2.17. 之后&#xff0c;iMazing 的双…

【GitHub项目推荐--一个由OpenAI提供支持的聊天机器人和虚拟助手的构建平台】【转载】

Botpress Botpress是一个开源项目&#xff0c;它提供了一个平台&#xff0c;用于构建、部署和管理基于人工智能的聊天机器人和虚拟助手 github地址&#xff1a; https://github.com/botpress/botpress Botpress的介绍 Botpress是一个开源项目&#xff0c;它提供了一个平台&…