前端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 }
} = person

console.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' } = {} } = person

console.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"。

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

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

爬虫笔记(三):实战qq登录

咳咳,再这样下去会进橘子叭hhhhhh 以及,这个我觉得大概率是成功的,因为测试了太多次,登录并且验证之后,qq提醒我要我修改密码才可以登录捏QAQ 1. selenium 有关selenium具体是啥,这里就不再赘述了&#x…

ZKFair Pass (FEB) NFT 上线 10 分钟售罄,市场反响激烈

据 ZKFair 推特显示,1 月 31 日晚间,ZKFair 与 Element 联合发布的 2 万张限量 ZKFair Pass(FEB)于 10 分钟内售罄。ZKFair Pass (FEB) 是 ZKFair 和 Element 联合推出的限时权益卡,总量 2 万张,持卡人将获…

基于junit4搭建自定义的接口自动化测试框架

随着业务的逐步稳定,对于接口的改动也会逐渐变少。更多的是对业务逻辑的优化,功能实现的完善。对于测试来说,重复繁琐的功能测试不仅效率低下,而且耗费一定的人力资源。笔者支持的信息流业务下的一个图文管理平台就是一个功能较为…

机器学习入门-----sklearn

机器学习基础了解 概念 机器学习是人工智能的一个实现途径 深度学习是机器学习的一个方法发展而来 定义:从数据中自动分析获得模型,并利用模型对特征数据【数据集:特征值+目标值构成】进行预测 算法 数据集的目标值是类别的话叫做分类问题;目标值是连续的数值的话叫做回…

【开源】SpringBoot框架开发无代码动态表单系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 动态类型模块2.2 动态文件模块2.3 动态字段模块2.4 动态值模块 三、系统设计3.1 用例设计3.2 数据库设计3.2.1 动态类型表3.2.2 动态文件表3.2.3 动态字段表3.2.4 动态值表 四、系统展示五、核心代码5.1 查询档案类型5.…

智慧文旅:驱动文化与旅游融合发展的新动力

随着科技的快速发展和人们生活水平的提高,文化和旅游的融合成为了时代发展的必然趋势。智慧文旅作为这一趋势的引领者,通过先进的信息技术手段,推动文化与旅游的深度融合,为产业的发展注入新的活力。本文将深入探讨智慧文旅如何成…

数据库运维工作量直接减少 50%,基于大模型构建智能问答系统的技术分享

本文源自百度智能云数据库运维团队的实践,深入探讨了基于大模型构建「知识库智能问答系统」的设计过程和应用。 全文包括了总体的技术方案选型、各个模块的设计实现、重点难点问题的突破、以及目前的落地场景应用等。 该系统自从内部上线以来,整体的回…

大语言模型之LlaMA系列-LlaMA 2及LlaMA_chat(下)

多转一致性的系统消息 - System Message for Multi-Turn Consistency 在对话设置中,某些指示应适用于所有对话轮次。 例如,简洁地响应,或"充当"某个公众人物。当我们向Llama 2-Chat提供此类指示时,后续应响应始终遵守约…

十、Qt三维图表

一、Data Visualization模块概述 Data Visualization的三维显示功能主要有三种三维图形来实现,三各类的父类都是QAbstract3DGraph,从QWindow继承而来。这三类分别是:三维柱状图Q3DBar三维空间散点Q3DScatter三维曲面Q3DSurface 1、相关类的…

混乱字母排序——欧拉路数论

题目描述 小明接到一个神秘的任务:对于给定的 n 个没有顺序的字母对(无序代表这两个字母可以前后顺序颠倒,区分大小写)。请构造一个有 (n1) 个字母的混乱字符串使得每个字母对都在这个字符串中出现。 输入输出格式 输入格式 第…

蓝桥杯备战——10.超声波模块

1.分析原理图 蓝桥杯单片机板子的原理图做的简直是依托答辩,乱糟糟的不说还弄成黑白的,明明很简单的东西,弄成一大堆。 可以看到,J2跳线帽如果P10接N_A1,P11接N_B1就是用作超声波功能。N_A1用作发生超声波功能,而N_B1…

【blender插件】(1)快速开始

特性 blender的python API有如下特性: 编辑用户界面可以编辑的任意数据(场景,网格,粒子等)。修改用户首选项、键映射和主题。运行自己的配置运行工具。创建用户界面元素,如菜单、标题和面板。创建新的工具。场景交互式工具。创建与Blender集成的新渲染引擎。修改模型的数据…

pinctrl/gpio子系统(2)-gpio子系统介绍及驱动源码简单分析

文章目录 1.gpio子系统api2.gpio相关of函数3.gpio子系统驱动分析3.1设备树信息分析3.2驱动程序分析 4.最后 1.gpio子系统api 这里的api都是基于gpio的编号去进行操作 1)gpio_request,用于申请一个GPIO管脚 int gpio_request(unsigned gpio, const char …

前缀和 差分

差分和前缀和都是算法里边比较重要的知识点,不过学习的难度并不高,这篇文章会讲解相关的内容。 1. 前缀和怎么玩 1)一维前缀和 在该数之前,包括该数的所有数之和,有点类似高中学的数列的前n项和Sn。 2)二维…

【sentinel流量卫兵搭建与微服务整合】

sentinel流量卫兵搭建与微服务整合 搭建sentinel dashboard控制台微服务整合 搭建sentinel dashboard控制台 1、下载 官网链接 由于官网github网络原因,导致长时间下载失败。 网盘链接 网盘提取码:dwgj 2、运行 将下载jar包放在任意非中文、不包含特殊…

专有云 ABC Stack 联合银联商务打造金融级云平台,入选《2024 央国企上云用云典型案例》

2024 年 1 月,在中国信通院《2024 央国企上云用云典型案例》征集中,百度智能云携手银联商务提交的《银联商务金融级云平台》成功入选「上云用云解决方案典型案例」。 在国家「1 朵央企云统领,N 朵行业云共载,M 朵私有云共生」的央…

jenkins 下载插件sentry-cli失败 证书过期

现状 npm set ENTRYCLI_CDNURLhttps://cdn.npm.taobao.org/dist/sentry-cli npm set sentrycli_cdnurlhttps://cdn.npm.taobao.org/dist/sentry-cli 原因是npm原域名停止解析,在访问上面sentry-cli的cdn资源的时候 证书过期无法下载。 解决: 替换证书过期…

BL808 Linux支持WIFI

BL808芯片介绍 BL808是高度集成的AIoT芯片组,具有Wi-Fi/BT/BLE/Zigbee等无线互联单元,包含多个 CPU 以及音频编码译码器、视频编码译码器和 AI 硬件加速器,适用于各种高性能和低功耗应用领域。 外围接口包括 USB2.0、 Ethernet、 SD/MMC、 …

【python3.8 pre-commit报错】记录pre-commit install报错

一、问题 在执行pre-commit install --allow-missing-config命令时,报错 Traceback (most recent call last):File "C:\ProgramData\Anaconda3\envs\py38\lib\runpy.py", line 192, in _run_module_as_mainreturn _run_code(code, main_globals, None,F…

【Linux】 Linux编译器-gcc/g++使用

💗个人主页💗 ⭐个人专栏——Linux学习⭐ 💫点击关注🤩一起学习C语言💯💫 目录 导读1. Linux编译器-gcc/g使用1.1 引入1.2 初识gcc/g1.3 程序运行的四个阶段1.3.1 预处理1.3.2 编译1.3.3 汇编1.3.4 链接 1.…