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

news2024/10/6 19:23:55

目录

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


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

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

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

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

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

flask基于大数据的旅游景区推荐可视化大屏系统 juj13-vue

本论文分为六个章节。 第一章,绪论,其包含课题背景及意义,现国内外的发展现状,本课题要研究的内容,所使用开发工具的描述等信息。 第二章,主要介绍了系统的开发技术。 第三章,先讲述功能需求分析…

留学生怎么合理使用ChatGPT ?还有哪些同类工具可以使用?

一篇篇相关于ChatGPT的文章陆陆续续铺天盖地的出现在我们面前。今天我们来看看怎么使用这个宝藏工具! 文章主要内容为: 1.它是什么? 2.它能做什么? 3.作为留学生我们怎么使用它? 4.其他同类工具推荐 5.个人观点 一…

第 8 章:Linux中使用时钟、计时器和信号

在本章中,我们将开始探索Linux环境中可用的各种计时器。随后,我们将深入了解时钟的重要性,并探讨UNIX时间的概念。接下来,我们将揭示在Linux中使用POSIX准确测量时间间隔的方法。之后,我们将进入std::chrono的领域&…

市场复盘总结 20240202

仅用于记录当天的市场情况,用于统计交易策略的适用情况,以便程序回测 短线核心:不参与任何级别的调整,采用龙空龙模式 一支股票 10%的时候可以操作, 90%的时间适合空仓等待 昨日主题投资 连板进级率 6/30 20% 二进三…

vue全家桶之路由管理Vue-Router

一、前端路由的发展历程 1.认识前端路由 路由其实是网络工程中的一个术语: 在架构一个网络时,非常重要的两个设备就是路由器和交换机。当然,目前在我们生活中路由器也是越来越被大家所熟知,因为我们生活中都会用到路由器&#…

基于最新koa的Node.js后端API架构与MVC模式

Koa 是一个由 Express 原班人马打造的现代 Web 框架,用于 Node.js。它旨在提供一个更小、更富有表现力和更强大的基础,用于 Web 应用和 API 开发。Koa 不捆绑任何中间件,它提供了一个优雅的方法以组合不同的中间件来处理请求和响应。 Koa 的核…

【QT】坐标系统和坐标变换

目录 1 坐标变换函数 1.1 坐标平移 1.2 坐标旋转 1.3 缩放 1.4 状态保存与恢复 2 坐标变换绘图实例 2.1 绘制3个五角星的程序 2.2 绘制五角星的PainterPath的定义 3 视口和窗口 3.1 视口和窗口的定义与原理 3.2 视口和窗口的使用实例 4 绘图叠加的效果 1 坐标变换函数 QPainter…

链表与二叉树-数据结构

链表与二叉树-数据结构 创建叶子node节点建立二叉树三元组:只考虑稀疏矩阵中非0的元素,并且存储到一个类(三元组)的数组中。 创建叶子node节点 class Node{int no;Node next;public Node(int no){this.nono;} } public class Lb…

24.云原生ArgoCD高级之数据加密seale sealed

云原生专栏大纲 文章目录 数据加密之seale sealedBitnami Sealed Secrets介绍Bitnami Sealed Secrets工作流程安装sealed-secrets和kubeseal安装sealed-secrets-controller安装kubeseal通过kubeseal将sealed-secrets公钥拿出来通过kubeseal加密secrets替换kustomize下secret为…

Leetcode 热门百题斩(第二天)

介绍 针对leetcode的热门一百题,解决大多数实习生面试的基本算法题。通过我自己的思路和多种方法,供大家参考。 1.两数之和(题号:1) 方法一 最先想到的就是两个for去遍历匹配。 class Solution {public int[] twoSum(int[]…

DPVS 多活部署架构部署

一、目标 利用DPVS部署一个基于OSPF/ECMP的提供HTTP服务的多活高可用的测试环境。 本次部署仅用于验证功能,不提供性能验证。 配置两台DPVS组成集群、两台REAL SERVER提供实际HTTP服务。 注:在虚拟环境里面,通过在一台虚拟服务器上面安装FR…

Linux - iptables 防火墙

一. 安全技术和防火墙 1.安全技术 入侵检测系统(Intrusion Detection Systems):特点是不阻断任何网络访问,量化、定位来自内外网络的威胁情况,主要以提供报警和事后监督为主,提供有针对性的指导措施和安全…

阿里云如何找回域名,进行添加或删除?

权威域名管理介绍说明,包含添加域名、删除域名、找回域名、域名分组等操作介绍。 一、添加域名 非阿里云注册域名或子域名如需使用云解析DNS,需要通过添加域名功能,将主域名或子域名添加到云解析控制台,才可以启用域名解析服务。…

Redis -- hash哈希

马行软地易失蹄,人贪安逸易失志。 目录 关于Redis的hash hash命令 hset hget hexists hdel hkeys hvals hgetall hmget hlen hsetnx hash计数 hincrby hincrbyfloat 小结 关于Redis的hash 几乎所有的主流编程语言都提供了哈希(hash&a…

基于极大似然法和最小二乘法系统参数辨识matlab仿真,包含GUI界面

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 1.极大似然法系统参数辨识 2. 最小二乘法系统参数辨识 5.完整程序 1.程序功能描述 分别对比基于极大似然法的系统参数辨识以及基于最小二乘法的系统参数辨识,输出起参数辨识收敛…

计算存储设备(Computational Storage Drive, CSD)

随着云计算、企业级应用以及物联网领域的飞速发展,当前的数据处理需求正以前所未有的规模增长,以满足存储行业不断变化的需求。这种增长导致网络带宽压力增大,并对主机计算资源(如内存和CPU)造成极大负担,进…

计算机网络实验二

目录 实验二 交换机的基本配置 1、实验目的 2、实验设备 (1)实验内容: (2)练习: 1.实验内容一:(交换机的配置方式) 2.实验内容二:(交换机…

碳汇的概念

碳汇的概念 在理解碳汇之前,首先理解“汇”,汇是指存储温室气体、气溶胶或温室气体化合物的库,例如土壤、海洋、森林等都是地球的重要碳库。根据《联合国气候变化框架公约》的定义,“碳汇”指从大气中清除二氧化碳等温室气体的过…

有没有合适写毕业论文的AI工具?

最近挺多同学在忙着写毕业论文,不断在“提交-打回-修改-提交”过程里循环着,好不容易写完了,还得考虑论文查重的问题!基哥作为一名曾经的毕业生,当然也体验过这种痛苦了。 但是,大人,时代变了&…

元素的显示与隐藏,精灵图,字体图标,CSSC三角

元素的显示与隐藏 类似网站广告,当我们点击关闭就不见了,但是我们重新刷新页面,会重新出现 本质:让元素在页面中隐藏或者显示出来。 1.display显示隐藏 2.visibility显示隐藏 3.overflow溢出显示隐藏 1.display属性(…