JavaScript解构数组

还记得之前我们是如何读取到数组里面的元素的么?

const arr = [2, 3, 4];
const a = arr[0];
const b = arr[1];
const c = arr[2];

然后通过这个方式去读取数组中的数据;

现在我们可以使用解构赋值的方法去实现

const [x, y, z] = arr;
console.log(x, y, z);

在这里插入图片描述

这是一种解构赋值(Destructuring assignment)的写法。它允许我们从数组 arr 中提取值,并分别赋给变量 x, y, z。解构赋值可以用于数组、对象等数据结构,以便快速获取其中的值。在这个例子中,arr 是一个数组,通过解构赋值将其第一个元素赋给 x,第二个元素赋给 y,第三个元素赋给 z。然后通过 console.log 打印出这三个变量的值。

那如何使用解构的方式去或者对象中的数组呢?

const restaurant = {name: 'Classico Italiano',location: 'Via Angelo Tavanti 23, Firenze, Italy',categories: ['Italian', 'Pizzeria', 'Vegetarian', 'Organic'],starterMenu: ['Focaccia', 'Bruschetta', 'Garlic Bread', 'Caprese Salad'],mainMenu: ['Pizza', 'Pasta', 'Risotto'],
};

● 如上方的数组,我们想获取categories的第一个和第二个数据,使用解构的的方式如下:

const [first,second] = restaurant.categories;
console.log(first,second);

在这里插入图片描述

● 那如果我们想获取第一个和第三个的数据呢,我们只要给他留一个即可

const [first, , second] = restaurant.categories;
console.log(first, second);

在这里插入图片描述

● 再看上面的数据,例如我们现在需要将categories数组中的Italian和Vegetarian进行替换,按照以前的方式,我们可能会这么做

let [main, , secondary] = restaurant.categories;
console.log(main, secondary);const temp = main;
main = secondary;
secondary = temp;
console.log(main,secondary);

在这里插入图片描述

但是我们通过解构,可以很轻松的进行实现!

let [main, , secondary] = restaurant.categories;
console.log(main, secondary);[main, secondary] = [secondary, main];
console.log(main, secondary);

在这里插入图片描述

● 我们也可以通过解构的方式再函数中返回数组;

const restaurant = {name: 'Classico Italiano',location: 'Via Angelo Tavanti 23, Firenze, Italy',categories: ['Italian', 'Pizzeria', 'Vegetarian', 'Organic'],starterMenu: ['Focaccia', 'Bruschetta', 'Garlic Bread', 'Caprese Salad'],mainMenu: ['Pizza', 'Pasta', 'Risotto'],order: function (starterIndex, mainIndex) {return [restaurant.starterMenu[starterIndex],restaurant.mainMenu[mainIndex],];},
};

例如上方的函数,如果我们使用之前的方式我们会这个做

console.log(restaurant.order(2, 0));

在这里插入图片描述

当然我们也可以将接受到的数组解构出来

const [starter, mainCourse] = restaurant.order(2, 0);
console.log(starter, mainCourse);

在这里插入图片描述

嵌套数组的解构

const nested = [2, 4, [5, 6]];
const [i, ,j] = nested;
console.log(i,j);

在这里插入图片描述

● 但是如果我们真的想把内部数组的数据给读取到,我们该怎么做呢?

const nested = [2, 4, [5, 6]];
const [i, , [j,k]] = nested;
console.log(i,j,k);

在这里插入图片描述

默认类型

● 如果我们的解构数据比我们数组的实际数据多会是怎样的呢?

const [p, q, r] = [8, 9];
console.log(p, q, r);

在这里插入图片描述

这时候,我们有可能给数组中的数据给一个默认值,

const [p = 1, q = 1, r = 1] = [8, 9];
console.log(p, q, r);

在这里插入图片描述

这有时候很有用,例如当我们从API获取数据时;

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

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

相关文章

基于视觉传感器的自主扫雷机器人设计与实现

摘要: 在当今的世界安全形势下,扫雷小车的出现可以减少各国人员在扫雷过程中的人员伤亡,扫雷小车实用性能强更适合在军事化领域或者是民用领域上应用。让它具有光明的发展前景。针对这一情况,本毕业设计就对自主扫雷小车进行研究…

Windows系统如何远程控制Realme手机?

realme使用的是realme UI系统。realme UI是realme研发的操作系统;realme UI 1.0基于安卓10系统,realme UI 2.0基于安卓11系统,realme UI 3.0基于安卓12系统。 对于安卓4.0及以上系统的手机,都可以通过软件AirDroid实现远程控制。 …

【超强笔记软件】Obsidian如何实现免费无限流量无套路云同步?

【超强笔记软件】Obsidian如何实现免费无限流量无套路云同步? 文章目录 【超强笔记软件】Obsidian如何实现免费无限流量无套路云同步?一、简介软件特色演示: 二、使用免费群晖虚拟机搭建群晖Synology Drive服务,实现局域网同步1 安…

抖音自动评论助手,开发流程与需要到的技术和代码分享

先来看实操成果,↑↑需要的同学可看我名字↖↖↖↖↖,或评论888无偿分享 一、引言 随着互联网的快速发展,短视频平台已成为人们日常生活的重要组成部分。其中,抖音作为一款深受用户喜爱的短视频平台,拥有庞大的用户群体…

HarmonyOS开发:ArkTs常见数据类型

前言 无论是Android还是iOS开发,都提供了多种数据类型用于常见的业务开发,但在ArkTs中,数据类型就大有不同,比如int,float,double,long统一就是number类型,当然了也不存在char类型&…

【超全】C++速查手册:面向对象与继承多态

C速查手册 C 类和对象 面向过程和面向对象初步认识 C语言是面向过程的,关注的是过程,分析出求解问题的步骤,通过函数调用逐步解决问题。 C是基于面向对象的,关注的是对象,将一件事情拆分成不同的对象,靠…

MySQL递归查询:洞悉数据的层层关联

在处理关系型数据库时,我们经常会遇到这样的情况:某些数据之间存在层级关系,例如目录、组织结构、评论等。在这些场景下,我们需要一种灵活的查询技术来处理这种层级关系。今天我们就来探讨MySQL中的递归查询,体验其独特…

yolov3学习总结

目标检测算法 单阶段:不提取出候选框,直接将整个图像输入模型中,算法直接输出检测结果,端到端 yolo,ssd 端到端,输入图像到网络中,然后从网络中输出图像 二阶段:先从图像中提取出…

紫光展锐Wi-Fi 6成功通过Wi-Fi联盟认证

近日,紫光展锐Wi-Fi 6产品成功通过Wi-Fi联盟 (简称“WFA”) Qualified Solution 认证,并支持Wi-Fi 6 Release 2,标志着紫光展锐自研Wi-Fi 6 IP技术已经成熟,在互操作性、安全性和一系列应用专有协议方面达到了国际行业标准。 WFA是…

自定义 element DatePicker组件指令 使选择器呈现为只读状态,用户无法直接编辑,但可以查看和选择日期

1.问题 现实中遇到列表的搜索条件使用DatePicker 组件进行开始结束时间筛选,但是手动修改input中的值,导致请求参数异常。比如讲clearable设置为false之后还是能手动清空输入框中的值。虽然组件提供了readonly 属性,但是也会让日期选择也无法…

【Flink进阶】-- Flink kubernetes operator 快速入门与实战

1、课程目录 2、课程链接 https://edu.csdn.net/course/detail/38831

4天肝出一个数据应用,可能吗?| StartDT Hackathon

以「基于SimbaOS Kernel的应用创新」为主题,2023年秋季StartDT Hackathon近日圆满收官。 本季黑客马拉松不仅有多次蝉联冠军的算法团队参战,有过去惜败的队伍卷土重来,还吸引到了制造、政企、泛零售等行业线开发者“攻擂”,携丰富…

uniapp + electron 打包项目

参考文献 1、控制台安装electron和electron打包工具electron-packager npm install electron -g npm install electron-packager -g2、manifest.json修改 运行的基础路径修改为:./ 不然打包出来会出现白屏,读取不到,因为打包出来的h5默认加…

【JavaEE】线程安全与线程状态

作者主页:paper jie_博客 本文作者:大家好,我是paper jie,感谢你阅读本文,欢迎一建三连哦。 本文于《JavaEE》专栏,本专栏是针对于大学生,编程小白精心打造的。笔者用重金(时间和精力)打造&…

配电房综合监控系统

配电房综合监控系统是一种集成了实时监控、数据采集、远程控制等多功能的系统,用于对配电房进行全方位的监测和管理。 力安科技配电室综合监控系统依托电易云-智慧电力物联网,实现配电室环境监测、有害气体监测、安防监控、采暖通风、门禁、灯光、风机、…

进阶C语言-字符函数和字符串函数

字符函数和字符串函数 🎈1.函数介绍🔎1.1strlen函数🔭1.1.1strlen函数的模拟实现📖1.计数器法📖2.递归法📖3.指针-指针 🔎1.2strcpy函数🔭1.2.1strcpy函数的模拟实现 🔎1…

Linux系统编程 day07 信号

Linux系统编程 day07 信号 1. 信号的介绍以及信号的机制2. 信号相关函数2.1 signal2.2 kill2.3 abort和raise2.4 alarm2.5 setitimer 3. 信号集4. 信号捕捉函数6. SIGCHLD信号7. SIGUSR1与SIGUSR2 1. 信号的介绍以及信号的机制 信号是信息的载体,在Linux/Unix环境下…

如何有效的进行 E2E

一、前言 本文作者介绍了什么是E2E测试以及E2E测试测什么,并从对于被测系统、测试用例、测试自动化工具、测试者四个方面的要求,介绍了如何保证E2E测试有效性,干货满满,值得学习。 二、什么是E2E测试 相信每一个对自动化测试感…

需求不明确的情况下,测试该如何处理?

当需求不明确的情况下,测试团队可以采取以下措施来处理: 1. 与项目团队进行沟通:测试团队应与项目团队密切合作,与业务分析师、产品经理等相关人员进行沟通,以获取更多的需求细节和背景信息。通过与相关方的交流&…

zookeeper 客户端常用命令简单记录(实操课程系列--watcher功能测试)(发布订阅功能测试)

本系列是zookeeper相关的实操课程,课程测试环环相扣,请按照顺序阅读测试来学习zookeeper。阅读本文之前,请先阅读----zookeeper 单机伪集群搭建简单记录(实操课程系列) 1、命令行工具切换到zookeeper的bin目录下面&am…