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.hqwc.cn/news/219358.html

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

相关文章

offer 选择难?说说我的 2 个思考

大家好,我是鱼皮。秋招仍在进行中,随着越来越多的公司开奖,最近 编程导航星球 的小伙伴们也陆续发来了 offer 报喜: 图片 图片 但也有一部分小伙伴陷入了 “甜蜜的烦恼”,拿了几个 offer 却不知道怎么选择。 offer 选择…

大数据数据仓库,Sqoop--学习笔记

数据仓库介绍 1. 数据仓库概念 数据仓库概念创始人在《建立数据仓库》一书中对数据仓库的定义是:数据仓库(Data Warehouse)是一个面向主题的(Subject Oriented)、数据集成的(Integrated)、相对…

【机器学习】聚类(二):原型聚类:LVQ聚类(学习向量量化)

文章目录 一、实验介绍1. 算法流程2. 算法解释3. 算法特点4. 应用场景5. 注意事项 二、实验环境1. 配置虚拟环境2. 库版本介绍 三、实验内容0. 导入必要的库1. LVQ类a. 构造函数b. 闵可夫斯基距离c. LVQ聚类过程e. 聚类结果可视化 2. 辅助函数3. 主函数a. 命令行界面 &#xff…

构建SQL Server链接服务器:实现跨服务器数据访问及整合

点击上方蓝字关注我 在SQL Server数据库管理中,链接服务器是一项强大的功能,允许在一个SQL Server实例中访问另一个SQL Server实例的数据。这种功能为数据库管理员提供了灵活性,使其能够跨不同服务器进行数据交互,开辟了更多的应用…

Spring的依赖注入,依赖注入的基本原则,依赖注入的优势

文章目录 Spring的依赖注入依赖注入的基本原则依赖注入有什么优势查找定位操作与应用代码完全无关。有哪些不同类型的依赖注入实现方式?构造器依赖注入和 Setter方法注入的区别 Spring的依赖注入 控制反转IoC是一个很大的概念,可以用不同的方式来实现。…

【开源】基于Vue.js的陕西非物质文化遗产网站

文末获取源码,项目编号: S 065 。 \color{red}{文末获取源码,项目编号:S065。} 文末获取源码,项目编号:S065。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 设计目标2.2 研究内容2.3 研究方法与…

智慧城市运营管理平台解决方案:PPT全文61页,附下载

关键词:智慧城市建设方案,智慧城市解决方案,智慧城市的发展前景和趋势,智慧城市建设内容,智慧城市运营管理平台 一、智慧城市运营平台建设背景 随着城市化进程的加速,城市面临着诸多挑战,如环…

【H5 Canvas】【平面几何】特殊图形绘制(箭头/正多边/正多尖角形等)

文章目录 直线/弧线 箭头 直线/弧线 箭头 // startX,startY 起始坐标 // endX,endY 结束坐标 // radian 圆弧角度,取值[0,PI]; 0表示画直线箭头,否则画圆弧箭头 CanvasRenderingContext2D.prototype.drawArrow function(startX,startY,endX,endY,radia…

路径规划之A*算法

系列文章目录 路径规划之Dijkstra算法 路径规划之Best-First Search算法 路径规划之A*算法 路径规划之A*算法 系列文章目录前言一、前期准备1.1 算法对比1.2 数学式方法1.3 启发式方法 二、A*算法2.1 起源2.2 思想2.3 启发式函数2.4 过程2.5 案例查看 前言 之前提过Dijkstra算…

Spring面向切面编程(AOP);Spring控制反转(IOC);解释一下Spring AOP里面的几个名词;Spring 的 IoC支持哪些功能

文章目录 Spring面向切面编程(AOP)什么是AOPSpring AOP and AspectJ AOP 的区别?Spring AOP中的动态代理如何理解 Spring 中的代理?解释一下Spring AOP里面的几个名词Spring在运行时通知对象Spring切面可以应用5种类型的通知:什么是切面 Aspe…

pyhon数据分析A股股票策略实际买卖总结(每月末更新数据)

简介 本篇文章主要记录python数据分析a股股票选股后实际买卖的记录。 选股策略 低位寻股,筛选出低位股价股票已经做过调整的股票,做短线交易(不超过7天),不贪,小赚即走。分三个时段,开盘三十…

使用VC++设计程序:实现常见的三种图像插值算法:最近邻插值,双线性插值,立方卷积插值

图像放大的三种插值算法 获取源工程可访问gitee可在此工程的基础上进行学习。 该工程的其他文章: 01- 一元熵值、二维熵值 02- 图像平移变换,图像缩放、图像裁剪、图像对角线镜像以及图像的旋转 03-邻域平均平滑算法、中值滤波算法、K近邻均值滤波器 04-…