JS中的扩展操作符...(点点点)

标题

  • 前言
  • 概述
  • 拓展操作符(Spread Operator)
    • 赋值与扩展操作符的区别
  • 剩余操作符(Rest Operator)

前言


大家应该都在代码中用过或者看到…方法,我每次用到这个方法的时候都会想到第一次见到这个方法一头雾水的样子,心想为什么会有这样子的写法以及方法,后面也是因为在工作中需求太多没有深入去了解这个方法,今天就深入的分析一下。

概述

在 ES6 中,…(点点点)被称为扩展操作符(Spread Operator)或剩余操作符(Rest Operator),它使用三个连续的点来展开一个可迭代对象(例如数组、字符串、对象等),将其拆分成独立的元素。

拓展操作符(Spread Operator)

扩展操作符用于将一个可迭代对象(如数组或类数组对象)拆分为单独的元素,在函数调用、数组字面量或对象字面量中使用。以下是一些使用扩展操作符的示例:

  • 数组拆分:
const array = [1, 2, 3];
const newArray = [...array]; // 拆分为独立的元素
console.log(newArray); // 输出 [1, 2, 3]
  • 函数调用:
function myFunction(a, b, c) {console.log(a, b, c);
}const args = [1, 2, 3];
myFunction(...args); // 将数组元素作为独立的参数传递给函数
  • 数组合并:
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const mergedArray = [...array1, ...array2]; // 合并两个数组
console.log(mergedArray); // 输出 [1, 2, 3, 4, 5, 6]

看到这里大家可能会想到一个点:
当我定义一个array之后,将array赋值给array1,例如:

const array = [1,2,3]
array1 = array
console.log(array1)	//输出[1,2,3]

与我下面用拓展操作符:

const array = [1,2,3]
array1 = [...array]
console.log(array1)	//输出[1,2,3]

这两个方法值都是一样的那么他们是否又相等呢?

赋值与扩展操作符的区别

这里我们看到他们的值的确是一样的,但是在 JavaScript 中,将 array1 设置为 array 或 […array ] 是有细微差别的。
这里就涉及到深拷贝与浅拷贝的内容了

  1. array1 = array
    这种方式将array1 变量指向了 array数组的引用,它们实际上指向了同一个数组。如果你修改 arrayarray1 中的元素,另一个数组也会受到影响。这是因为它们引用的是同一个数组对象。
  2. array1 = […array]
    这种方式使用扩展操作符创建了一个 array数组的浅拷贝副本,并将其赋值给 array1 变量。array1 指向的是一个新的数组,而不是原始的 array 数组对象。修改 array1不会影响到 array

总结一下,使用 array1 = array 会让 array1array 引用同一个数组对象,而使用 array1= […array ] 则会创建一个新的数组副本给 array1,二者对原始数组的修改的影响是不同的。

如果你想要创建一个数组的独立副本,以便对其进行独立的操作,建议使用 array1 = […array ] 或其他深拷贝方法,而不是将其指向同一个引用。

剩余操作符(Rest Operator)

剩余操作符用于将剩余的参数收集为一个数组,在函数参数中使用。以下是一个使用剩余操作符的示例:

function myFunction(a, b, ...rest) {console.log(a); // 第一个参数console.log(b); // 第二个参数console.log(rest); // 剩余的参数作为数组
}myFunction(1, 2, 3, 4, 5); // 输出:1 2 [3, 4, 5]

通过使用 ... 运算符,你可以更方便地操作数组和函数参数。

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

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

相关文章

淘宝/天猫 API 接入说明

API地址:https://o0b.cn/anzexi 调用示例: 参数说明 通用参数说明 参数不要乱传,否则不管成功失败都会扣费url说明 https://api-gw.onebound.cn/平台/API类型/ 平台:淘宝,京东等, API类型:[item_search,item_get,ite…

数学建模--粒子群算法(PSO)的Python实现

目录 1.开篇提示 2.算法流程简介 3.算法核心代码 4.算法效果展示 1.开篇提示 """ 开篇提示: 这篇文章是一篇学习文章,思路和参考来自:https://blog.csdn.net/weixin_42051846/article/details/128673427?utm_mediumdistribute.pc_relevant.none-task-blog-…

F#奇妙游(25):ADT和领域设计

前言 采用ADT来对领域进行设计,是一种很好的实践。在这种实践中,我们可以把领域中的数据抽象成ADT,把领域中的操作抽象成函数,然后利用ADT的类型系统来进行类型检查,从而保证领域中的数据和操作的正确性。 设计目标 …

【AGC】云数据库API9开发问题汇总

【问题描述】 云数据库HarmonyOS API9 SDK已经推出了一段时间了,下面为大家汇总一些在集成使用中遇到的问题和解决方案。 【问题分析】 1. 报错信息:数据库初始化失败:{“message”:“The object type list and permission …

云原生Kubernetes:K8S常用服务端口

目录 一、理论 1.K8S常用服务端口号 一、理论 1.K8S常用服务端口号 (1)K8S集群 表1 K8S集群端口 协议端口号K8S集群TCP22使用主机驱动通过SSH进行节点配置TCP2376主机驱动与Docker守护进程通信的TLS端口TCP2379etcd客户端请求TCP2380etcd节点通信U…

PgSQL-并行查询系列-介绍[译]

PgSQL-并行查询系列-介绍 现代CPU模型拥有大量的CPU核心。多年来,数据库应用程序都是并发向数据库发送查询的。查询处理多个表的行时,若可以使用多核,则可以客观地提升性能。PgSQL 9.6引入了并行查询的新特性,开启并行查询后可以大…

es(Elasticsearch)介绍

学习es可以参考mysql(相比mysql而言,es所需的cpu、内存更多) 什么是Elasticsearch Elasticsearch简称es,是由Elastic和search组成。Elastic的意思是有弹性的,search的意思是搜索。 弹性:es是一个天生支持分…

笔记:linux中LED(GPIO)驱动设备树配置和用法

设备树中节点配置 设备树中的LED驱动一般是这样写&#xff0c;LED驱动可以控制GPIO的电平变化&#xff0c;生成文件节点很方便 leds: leds {compatible "gpio-leds";gpio_demo: gpio_demo {label "gpio_demo";gpios <&gpio0 RK_PC0 GPIO_ACTIV…

晶圆键合对准机的原理与应用

一、晶圆键合设备的工作原理 1、 第一个晶圆面朝下置于晶圆对准设备卡盘并传送到对准机内&#xff1b; 2、对准机内&#xff0c;晶圆在Z轴方向上移动直到被顶部的传输夹具真空吸附固定&#xff1b; 3、被传输夹具固定的第一个晶圆将成为后续对准工艺的基准&#xff0c;确定所…

51、基于注解方式开发Spring WebFlux,实现生成背压数据,就是实现一直向客户端发送消息

★ Spring WebFlux的两种开发方式 1. 采用类似于Spring MVC的注解的方式来开发。此时开发时感觉Spring MVC差异不大&#xff0c;但底层依然是反应式API。2. 使用函数式编程来开发★ 基于注解开发Spring WebFlux 开发上变化并不大&#xff0c;主要是处理方法的返回值可使用Mon…

大数据组件系列-Hadoop每日小问

1、谈谈对HDFS的理解&#xff1f;HDFS这种存储适合哪些场景&#xff1f; HDFS即Hadoop Distributed File System&#xff0c;Hadoop 分布式文件系统。它为的是解决海量数据的存储与分析的问题&#xff0c;它本身是源于Google在大数据方面的论文&#xff0c;GFS-->HDFS; HD…

Mybatis的三种映射关系以及联表查询

目录 一、概念 二、一对一 1、配置generatorConfig.xml 2、Vo包的编写 3、xml的sql编写 4、编写对应接口及实现类 5、测试 三、一对多 1、Vo包类的编写 2、xml的sql编写 3、编写对应接口及实现类 4、测试 四、多对多 1、Vo类 2、xml的sql配置 3、接口及接口实现…

文件编辑器、用户管理,嘎嘎学

打开文件 vim # 首先你先得下载这个插件 yum install -y vim vim 文件名 进入编辑模式 i #在光标所在处进入编辑模式 a #在当前光标后面进入编辑模式 o #在光标的下一行进入编辑模式 I #在光标所在处行首进入编辑模式 A #在光标所在处行尾进入编辑模式 O #在光标的上一…

本地使用GFPGAN进行图像人脸修复

人脸修复 1.下载项目和权重文件2.部署环境3.下载权重文件4.运行代码5.网页端体验 首先来看一下效果图 1.下载项目和权重文件 https://github.com/iptop/GFPGAN-for-Video.git2.部署环境 根据README文件部署好环境&#xff0c;额外还需要&#xff1a; cd GFPGAN-1.3.8 pyt…

介绍GitHub

GitHub 是一个基于互联网的源代码托管平台&#xff0c;可以帮助软件开发者存储和管理源代码&#xff0c;方便团队协作和版本控制。GitHub 的主要功能包括&#xff1a; 代码托管&#xff1a;开发者可以在 GitHub 上创建远程代码仓库&#xff0c;存储和管理他们的源代码。 版本控…

金融信创,软件规划需关注自主安全及生态建设

软件信创化&#xff0c;就是信息技术软件应用创新发展的意思&#xff08;简称为“信创”&#xff09;。 相信在中国&#xff0c;企业对于“信创化”这个概念并不陌生。「国强则民强」&#xff0c;今年来中国经济的快速发展&#xff0c;受到了各大欧美强国的“卡脖子”操作的影…

大数据面试题:MapReduce压缩方式

面试题来源&#xff1a; 《大数据面试题 V4.0》 大数据面试题V3.0&#xff0c;523道题&#xff0c;679页&#xff0c;46w字 可回答&#xff1a;1&#xff09;Hadoop常见的压缩算法有哪些&#xff1f; 问过的一些公司&#xff1a;网易云音乐(2022.11)&#xff0c;阿里(2020.…

css 文字单行多行超出长度后显示 ...

0.超出… 1、单行文本超出 <div class"content">测试数据&#xff1a;css单行文本超出显示省略号--------</div><style> .content{width: 200px;height: 200px;overflow:hidden;white-space: nowrap;text-overflow: ellipsis;-o-text-overflow:el…

Linux C++ 海康摄像头获取过车信息

代码 void CALLBACK MessageCallback(LONG lCommand, NET_DVR_ALARMER *pAlarmer, char *pAlarmInfo, DWORD dwBufLen, void *pUser) {printf("enter MessageCallback---------------------->\n");int i;NET_DVR_ALARMINFO_V30 struAlarmInfo;memcpy(&struAl…

【运维基础】文本编辑器---nano的使用

前言 Nano 是一个简单易用的命令行文本编辑器&#xff0c;下面是一些基本使用方法 文章目录 前言打开文件光标控制&#xff1a;保存和退出&#xff1a; 打开文件 你可以使用以下命令打开一个文件进行编辑&#xff1a; nano 文件名光标控制&#xff1a; 使用方向键&#xf…