JavaScript解构数组

news2024/11/19 23:27:45

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

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.coloradmin.cn/o/1252292.html

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

相关文章

网络运维与网络安全 学习笔记2023.11.25

网络运维与网络安全 学习笔记 第二十六天 今日目标 ACL原理与类型、基本ACL配置、高级ACL配置 高级ACL之ICMP、高级ACL之telnet ACL原理与类型 项目背景 为了企业的业务安全,要求不同部门对服务器有不同的权限 PC1不能访问Server PC2允许访问Server 允许其他所…

Linux基本指令(前篇)

目录 1.ls指令 2.pwd指令 3.cd 指令 4.touch指令 5.mkdir指令(重要) 6.rmdir指令 && rm 指令(重要) 7.man指令(重要) 1.ls指令 ls 选项 目录或文件 对于目录,该命令列出该目录下的所…

MYSQL基础知识之【添加数据,查询数据】

文章目录 前言MySQL 插入数据通过命令提示窗口插入数据使用PHP脚本插入数据 MySQL 查询数据通过命令提示符获取数据使用PHP脚本来获取数据内存释放 后言 前言 hello world欢迎来到前端的新世界 😜当前文章系列专栏:Mysql 🐱‍👓博…

STM32 配置中断常用库函数

单片机学习 目录 一、配置AFIO相关库函数 1.1函数GPIO_AFIODeInit 1.2函数GPIO_EventOutputConfig 1.3函数GPIO_EventOutputCmd 1.4函数GPIO_EXTILineConfig 二、配置EXTI相关库函数 2.1函数EXTI_DeInit 2.2函数EXTI_Init 2.3函数EXTI_StructInit 2.4函数 EXTI_Gener…

html实现我的故乡,城市介绍网站(附源码)

文章目录 1. 我生活的城市北京(网站)1.1 首页1.2 关于北京1.3 北京文化1.4 加入北京1.5 北京景点1.6 北京美食1.7 联系我们 2.效果和源码2.1 动态效果2.2 源代码 源码下载 作者:xcLeigh 文章地址:https://blog.csdn.net/weixin_43…

spring本地事务与单/多线程

请直接看原文 原文链接:多线程与数据库事务以及数据库连接之间的关系 - 知乎 (zhihu.com) -------------------------------------------------------------------------------------------------------------------------------- 今天我们来梳理一下, 多线程、数…

033.Python面向对象_类补充_生命周期

我 的 个 人 主 页:👉👉 失心疯的个人主页 👈👈 入 门 教 程 推 荐 :👉👉 Python零基础入门教程合集 👈👈 虚 拟 环 境 搭 建 :👉&…

Java基准测试工具JMH的简介与使用

JMH是一套Java基准测试工具&#xff0c;用于对Java执行进行基准测试以及生成测试报告。平时应用于Java一些基础Api或者一些工具类这种离开网络因素的纯系统测试。 使用方式 maven引入&#xff1a; <dependency><groupId>org.openjdk.jmh</groupId><art…

linux账户管理实例二

要求&#xff1a;我的 用户pro1&#xff0c;pro2&#xff0c;pro3是同一个项目开发人员&#xff0c;想让这三个人用户在同一个目录下工作&#xff0c;但这三个人拥有自己的主文件夹和基本的私有用户组&#xff0c;工作目录为/srv/projecta&#xff0c;如何实现&#xff1f; 分…

03_MySQL基本SQL语句讲解

#课程目标 能够创建、删除数据表能够对表里的数据记录进行增加、删除、修改、查询操作能够创建、删除用户能够给用户授权并回收权限了解delete和truncate语句的区别 #一、数据库基本操作 ##1、查看数据库相关信息 mysql> show databases; 查看所有数据库 mysql>…

【机器学习】聚类(三):原型聚类:高斯混合聚类

文章目录 一、实验介绍1. 算法流程2. 算法解释3. 算法特点4. 应用场景5. 注意事项 二、实验环境1. 配置虚拟环境2. 库版本介绍 三、实验内容0. 导入必要的库1. 全局调试变量2. 调试函数3. 高斯密度函数&#xff08;phi&#xff09;4. E步&#xff08;getExpectation&#xff09…

【开源组件】- 关于Jetcache的使用

关于Jetcache的使用 &#x1f604;生命不息&#xff0c;写作不止 &#x1f525; 继续踏上学习之路&#xff0c;学之分享笔记 &#x1f44a; 总有一天我也能像各位大佬一样 &#x1f31d;分享学习心得&#xff0c;欢迎指正&#xff0c;大家一起学习成长&#xff01; JetCache是由…

MobileNets发展与总结

写在前面&#xff1a;本博客仅作记录学习之用&#xff0c;部分图片来自网络&#xff0c;如需引用请注明出处&#xff0c;同时如有侵犯您的权益&#xff0c;请联系删除&#xff01; 文章目录 引言MobileNetsMobileNet - V1思想代码实现 MobileNet - V2思想代码实现 MobileNet - …

LeetCode Hot100 105.从前序与中序遍历序列构造二叉树

题目&#xff1a;给定两个整数数组 preorder 和 inorder &#xff0c;其中 preorder 是二叉树的先序遍历&#xff0c; inorder 是同一棵树的中序遍历&#xff0c;请构造二叉树并返回其根节点。 代码&#xff1a; class Solution {private Map<Integer, Integer> indexM…

1.6 C语言之数组概述

1.6 C语言之数组概述 一、数组二、练习 一、数组 所谓数组&#xff0c;就是内存中一片连续的空间&#xff0c;可以用来存储一组同类型的数据 数组有下标&#xff0c;从0开始&#xff0c;可以理解为是给数组中的元素编号&#xff0c;便于后续寻址访问 我们来编写一个程序&…

杂货铺 | Windows系统上解压缩tgz文件

文章目录 &#x1f4da;快速终端打开实现 & 解压缩实现步骤&#x1f4da;环境变量的一般配置步骤 & 问题解决思路 &#x1f4da;快速终端打开实现 & 解压缩实现步骤 将对应的tgz文件放入对应的文件夹。快速在指定文件夹下打开终端 打开对应的路径 双击地址栏 然后…

4.28每日一题(二重积分比较大小:被积函数的大小、正负性、积分区间奇偶性)

一般比较大小的题目我们不需要把结果全部计算出来 &#xff0c;而是通过奇偶性或者被积函数的大小或大于0、等于0、小于0等方法判断比较

1、Mysql架构与历史

Mysql逻辑架构 最上层是服务并不是Mysql所独有的&#xff0c;大多数基于网络的客户端/服务器的工具或者服务都有类似的架构&#xff0c;比如连接处理&#xff0c;授权认证&#xff0c;安全等。 第二层是Mysql比较有意思的部分。大多数Mysql的核心服务都在这一层&#xff0c;…

antv/g6的学习总结

新建一个简单实例 1、使用命令行在项目目录下执行以下命令 cnpm install --save antv/g6 2、创建容器 <div id"mountNode"></div> 3、在需要用的 G6 的 JS 文件中导入 import G6 from antv/g6; 4、 数据准备 引入 G6 的数据源为 JSON 格式的对象。…

量化交易:因子风险暴露

本文介绍了如何计算因子风险暴露的内容。 判断风险暴露的建模是否合理 通常&#xff0c;此分析是基于历史数据&#xff0c;而对历史风险暴露的估计可能会影响未来的风险暴露。 因此&#xff0c;计算因子风险暴露是不够的。 必须对风险暴露保持信心&#xff0c;并明白对风险暴…