Rest模式和参数

news2024/11/17 19:38:57

展开运算符和Rest参数都是JavaScript中的语法特性,用于处理函数的参数。它们在使用方式和功能上有一些区别。
展开运算符用于将可迭代对象展开为独立的值,而Rest参数用于将多个参数收集到一个数组中。展开运算符可以用于多种上下文,而Rest参数只能作为函数的最后一个参数。

先来看一个简单的例子

const [a,b,...others] = [1,2,3,4,5];
console.log(a,b,others);
//首先,我们定义了一个包含五个元素的数组 [1, 2, 3, 4, 5]。

然后,我们使用解构赋值语法将数组元素赋值给对应的变量。其中,[a, b, ...others] 表示将数组的第一个元素赋值给变量 a,第二个元素赋值给变量 b,而其余的元素将被收集到 others 数组中。

最后,我们使用 console.log() 方法打印出 a、b 和 others 的值。根据给定的数组,输出将会是 1 2 [3, 4, 5]。也就是说,a 的值为 1,b 的值为 2,others 数组包含剩余的元素 [3, 4, 5]

这是一种使用解构赋值和Rest参数的写法。在给定的例子中,我们将数组 [1, 2, 3, 4, 5] 中的前两个元素分别赋值给变量 a 和 b,而剩余的元素则被收集到名为 others 的数组中。
解构赋值是一种从数组或对象中提取值并赋给变量的语法。在这种情况下,使用了数组的解构赋值,并且使用了 Rest 参数来收集剩余的元素。

我们再次以之前的对象来举例,这里不再对对象进行重写,如何需要学习可以翻看上几章的文章

const [pizza, , risotto,...others]=[...restaurant.mainMenu, ...restaurant.starterMenu];
console.log(pizza, risotto, others);

在这里插入图片描述

注:rest参数只会收集最后一个参数之后的,被跳过的被不会收集!

我们之前的有一个对象是关于工作日和周末的时间点,当然rest对于对象同样适用,如果我们想要除了周六之外的工作日时间,我们可以这么做

const {sat, ...weekdays} = restaurant.openingHours;
console.log(weekdays);

在这里插入图片描述

当然,我们也可以使用rest参数也帮我们实现一写功能上的东西,例如将给定的一串数字求和

const add = function(...numbers) {
  let sum = 0;
  for(let i = 0;i < numbers.length;i++)sum+=numbers[i];
  console.log(sum);
}

add(2,5);
add(5,1,12,4,1);
add(5,1,5,7,1,6,5,4,1,2,3);

在这里插入图片描述

const x = [23,5,7];
add(...x);

当然,我们也可以通过展开运算符的方式去进行计算;

之前,我们使用展开运算符去给一个函数传递多个参数,当然rest也可以实现类似的功能

  orderPizza: function(mainIngredient, ...ohterIngredients) {
    console.log(mainIngredient);
    console.log(ohterIngredients);
  }

这是一个制作披萨的过程,需要我们给他提供一个原材料

restaurant.orderPizza('mushrooms','onion','olives','spinach');

在这里插入图片描述

这样我们也可以通过rest参数去函数传递参数,使得函数达到预期的功能!

总结

展开运算符用于将可迭代对象展开为独立的值,而Rest参数用于将多个参数收集到一个数组中。展开运算符可以用于多种上下文,而Rest参数只能作为函数的最后一个参数。

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

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

相关文章

代码浅析DLIO(三)---子图构建

0. 简介 我们刚刚了解过DLIO的整个流程&#xff0c;我们发现相比于Point-LIO而言&#xff0c;这个方法更适合我们去学习理解&#xff0c;同时官方给出的结果来看DLIO的结果明显好于现在的主流方法&#xff0c;当然指的一提的是&#xff0c;这个DLIO是必须需要六轴IMU的&#x…

three.js球体实现

作者&#xff1a;baekpcyyy&#x1f41f; 使用three.js渲染出可以调节大小的立方体 1.搭建开发环境 1.首先新建文件夹用vsc打开项目终端 2.执行npm init -y 创建配置文件夹 3.执行npm i three0.152 安装three.js依赖 4.执行npm I vite -D 安装 Vite 作为开发依赖 5.根…

C#文件流二进制文件的读写

目录 一、BinaryWriter类 二、BinaryReader类 三、示例 1.源码 2.生成效果 二进制文件的写入与读取主要是通过BinaryWriter类和BinaryReader类来实现的。 一、BinaryWriter类 BinaryWriter类以二进制形式将基元类型写入流&#xff0c;并支持用特定的编码写入字符串&#…

Linux环境搭建(Ubuntu22.04)+ 配置共享文件夹(Samba)

Linux开发环境准备 搭建Linux开发环境所需要的软件如下&#xff1a; VMware虚拟机&#xff1a;用于运行Linux操作系统的虚拟机软件之一&#xff0c;VMware下载安装在文章中不做说明&#xff0c;可自行百度谢谢Ubuntu光盘镜像&#xff1a;用于源代码编译&#xff0c;有闲置计算…

C#开发的OpenRA游戏之属性SelectionDecorations(14)

C#开发的OpenRA游戏之属性SelectionDecorations(14) 前面分析选择类时,还有一个功能,就是把选中物品的状态和生命值显示出来。 它是通过下面的函数来实现: protected override IEnumerable<IRenderable> RenderSelectionBars(Actor self, WorldRenderer wr, bool …

【探索Linux】—— 强大的命令行工具 P.18(进程信号 —— 信号捕捉 | 信号处理 | sigaction() )

阅读导航 引言一、信号捕捉1. 内核实现信号捕捉过程2. sigaction() 函数&#xff08;1&#xff09;函数原型&#xff08;2&#xff09;参数说明&#xff08;3&#xff09;返回值&#xff08;4&#xff09;函数使用 二、可重入函数与不可重入函数1. 可重入函数条件2. 不可重入函…

突破界限:R200科研无人车,开辟研究新天地

提到科研无人车&#xff0c;大家可能首先想到的是其在自动驾驶和其他先进技术领域的应用。然而&#xff0c;随着科技的不断进步&#xff0c;科研无人车已经在智慧城市建设、商业服务、地质勘探、环境保护、农业技术革新、灾害应急和自动化服务等多个领域发挥着至关重要的作用。…

钢贸行业ERP系统:实现全面管理与持续增长的利器

去年在上海举办的数字化钢贸高峰论坛中提出钢贸业亟需数字化转型&#xff0c;因为在大力发展数字经济的时代背景下&#xff0c;行业进行数字化转型已经成为一种必然趋势。在今年以前&#xff0c;一些钢贸商一直沿用着以前非常粗放的管理手段&#xff0c;比如手写账本。而如果使…

揭秘近期CSGO市场小幅回暖的真正原因

揭秘近期CSGO市场小幅回暖的真正原因 最近市场小幅度回暖&#xff0c;第一个原因则是到处都在说buff要开租赁了&#xff0c;市场要开始爆燃了。童话听到这些消息实在是绷不住了&#xff0c;出来给大家讲一下自己的看法&#xff0c;大家理性思考一下。 Buff出不出租赁跟市场燃不…

【开源视频联动物联网平台】开箱即用的物联网项目介绍

写一个开箱即用的物联网项目捐献给Dromara组织 一、平台简介 MzMedia开源视频联动物联网平台&#xff0c;简单易用&#xff0c;更适合中小企业和个人学习使用。适用于智能家居、农业监测、水利监测、工业控制&#xff0c;车联网&#xff0c;监控直播&#xff0c;慢直播等场景。…

二.运算符

运算符 1.算术运算符2.比较运算符3.逻辑运算符 1.算术运算符 算数运算符主要用于数学运算&#xff0c;其可以连接运算符前后的两个数值或表达式&#xff0c;对数值或表达式进行 - * / 和 取模%运算 1.加减法运算符 mysql> SELECT 100,100 0,100 - 0,100 50,100 50 - …

良心推荐免费白嫖的电子书制作与发布平台,快来试试噢~

电子书的出现极大的改变了人们的阅读习惯&#xff0c;与传统的纸质文献相比呢&#xff0c;电子书具有存储量大、体积小、成本低、信息更新快、方便阅读等不可替代的优势&#xff0c;受到了越来越多人的喜爱。 那怎么去制作一个高级又炫酷的电子书呢&#xff1f;今天小编就专门…

java源码-数组

背景 上传图片&#xff0c;需要对图片格式进行校验&#xff0c;这是就可以使用数组 1、什么是数组&#xff1f; Java 语言中提供的数组是用来存储固定大小的同类型元素。 如&#xff1a;可以声明一个数组变量&#xff0c;如 numbers[100] 来代替直接声明 100 个独立变量 numb…

Minio开源高性能高可靠存储搭建

一、minio的特征 1、高性能 MinIO 是一种高性能、S3 兼容的对象存储。它专为大规模 AI/ML、数据湖和数据库工作负载而构建&#xff0c;并且它是由软件定义的存储。不需要购买任何专有硬件&#xff0c;就可以在云上和普通硬件上拥有分布式对象存储。MinIO拥有开源 GNU AGPL v3…

C陷阱与缺陷——第3章 语义陷阱

1. 指针和数组 C语言中只有一维数组&#xff0c;而且数组的大小必须在编译器就作为一个常数确定下来&#xff0c;然而在C语言中数组的元素可以是任何类型的对象&#xff0c;当然也可以是另外的一个数组&#xff0c;这样&#xff0c;要仿真出一个多维数组就不是难事。 对于一个…

OpenCvSharp从入门到实践-(06)创建图像

目录 1、创建图像 1.1实例1-创建黑色图像 1.2实例2-创建白色图像 1.3实例3-创建随机像素的雪花点图像 2、图像拼接 2.1水平拼接图像 2.2垂直拼接图像 2.3实例4-垂直和水平两种方式拼接两张图像 在OpenCV中&#xff0c;黑白图像其实就是一个二维数组&#xff0c;彩色图像…

vscode插件问题

1 Vscode code颜色变化 最外层标签颜色变成白色 其他标签有颜色&#xff0c;css代码颜色有些变成白色 是安装的另一个插件vue影响的&#xff0c;卸载就能恢复正常的颜色 2 配置Vue项目的代码片段 css 样式代码片段 配置css.json上后偶尔能用偶尔不能用&#xff0c;Vscode 右下…

Flutter应用程序的加固原理

在移动应用开发中&#xff0c;Flutter已经成为一种非常流行的技术选项&#xff0c;可以同时在Android和iOS平台上构建高性能、高质量的移动应用程序。但是&#xff0c;由于其跨平台特性&#xff0c;Flutter应用程序也面临着一些安全风险&#xff0c;例如反编译、代码泄露、数据…

Egg.js的方法扩展

Extend-application 方法扩展 eggjs的方法的扩展和编写 Egg.js可以对内部的五种对象进行扩展&#xff0c;以下是可扩展的对象、说明、this指向和使用方式。 application对象方法拓展 按照Egg的约定&#xff0c;扩展的文件夹和文件的名字必须是固定的。比如要对application扩…

【ZEDSLAM】Ubuntu18.04系统ZED 2i双目相机SDK安装、联合标定、SLAM测试

0.设备、环境和说明 笔记本电脑i5-8300H、GTX 1060、32GRAM 因为后面要测试Vins-Fusion和ORB-SLAM3&#xff0c;所以推荐安装Ubuntu 18.04&#xff08;或者Ubuntu 20.04&#xff09; ROS 1&#xff08;不建议用比Ubuntu18更低的版本&#xff09; ROS一键安装命令&#xff1a;…