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 ] 是有细微差别的。
这里就涉及到深拷贝与浅拷贝的内容了
- array1 = array
这种方式将array1
变量指向了array
数组的引用,它们实际上指向了同一个数组。如果你修改array
或array1
中的元素,另一个数组也会受到影响。这是因为它们引用的是同一个数组对象。 - array1 = […array]
这种方式使用扩展操作符创建了一个array
数组的浅拷贝副本,并将其赋值给array1
变量。array1
指向的是一个新的数组,而不是原始的array
数组对象。修改array1
不会影响到array
。
总结一下,使用 array1
= array
会让 array1
和 array
引用同一个数组对象,而使用 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]
通过使用 ...
运算符,你可以更方便地操作数组和函数参数。
相关文章:
JS中的扩展操作符...(点点点)
标题 前言概述拓展操作符(Spread Operator)赋值与扩展操作符的区别 剩余操作符(Rest Operator) 前言 大家应该都在代码中用过或者看到…方法,我每次用到这个方法的时候都会想到第一次见到这个方法一头雾水的样子&#…...

找redis大key工具rdb_bigkeys
github官网 https://github.com/weiyanwei412/rdb_bigkeys 在centos下安装go [roothadoop102 rdb_bigkeys-master]# wget https://dl.google.com/go/go1.13.5.linux-amd64.tar.gz [roothadoop102 rdb_bigkeys-master]# tar -zxf go1.13.5.linux-amd64.tar.gz -C /usr/local将g…...

ElasticSearch进阶
一、 search检索文档 ES支持两种基本方式检索; 通过REST request uri 发送搜索参数 (uri 检索参数);通过REST request body 来发送它们(uri请求体); 1、信息检索 API: https://w…...

Nor flash 页写地址与数据大小的限制
厂商提供的flash手册如下 如果页写指令的地址不是256的整数倍,并且写入的数据量超过了当前地址所在页的边界,则超过的那些数据会重新写入当前页的首地址(即256的整数倍地址),所以,在进行页写的时候&#x…...

python 深度学习 解决遇到的报错问题4
目录 一、DLL load failed while importing _imaging: 找不到指定的模块 二、Cartopy安装失败 三、simplejson.errors.JSONDecodeError: Expecting value: line 1 column 1 (char 0) 四、raise IndexError("single positional indexer is out-of-bounds") 五、T…...

C到C++的升级
C和C的关系 C继承了所有C语言的特性;C在C的基础上提供了更多的语法和特性,C语言去除了一些C语言的不好的特性。C的设计目标是运行效率与开发效率的统一。 变化一:所有变量都可以在使用时定义 C中更强调语言的实用性,所有的变量…...

《热题101》动态规划篇
思路:需要一个二维数组dp来记录当前的公共子序列长度,如果当前的两个值等,则dp[i][j]dp[i-1][j-1]1,否则dp[i][j] max(dp[i-1][j],dp[i][j-1])。也就是说,当前的dp值是由左、上、左上的值决定的。获得dp数组之后,倒序…...

【综述+3D】基于NeRF的三维视觉2023年度进展报告(截止2023.06.10)
论文:2003.Representing Scenes as Neural Radiance Fields for View Synthesis 官方网站:https://www.matthewtancik.com/nerf 突破性后续改进: Instant Neural Graphics Primitives with a Multiresolution Hash Encoding | 展示官网&#…...

基于JavaScript粒子流动效果
这是一个HTML文件,主要包含了一些CSS样式和JavaScript代码,用于创建一个动画效果。 在CSS部分,定义了一些基本的样式,包括页面的背景颜色、位置、大小等。特别的,定义了两种球形元素(.ball_A 和 .ball_B&am…...

【U盘】实现U盘清空并重置恢复存储
打开电脑,将U盘插入USB端口,点按快捷键【WinR】,弹出运行对话框,输入命令 diskpart 进入命令提示符窗口 输入指令 list disk 查看现在的硬盘 这里显示的U盘编号是“1”,因此输入select disk “1”,就是选择…...

基于Hugo 搭建个人博客网站
目录 1.环境搭建 2.生成博客 3.设置主题 4.将博客部署到github上 1.环境搭建 1)安装Homebrew brew是一个在 macOS 操作系统上用于管理软件包的包管理器。类似于centos下的yum或者ubuntu下的apt,它允许用户通过命令行安装、更新和管理各种软件工具、…...

Springboot + Sqlite实战(离线部署成功)
最近有个需求,是手机软件离线使用, 用的springboot mybatis-plus mysql,无法实现,于是考虑使用内嵌式轻量级的数据库SQLlite 引入依赖 <dependency><groupId>org.xerial</groupId><artifactId>sqlite-…...
【后量子密码】CRYSTALS-KYBER 算法(一):MLWE 问题与NTT(附源码分析)
一、前言 大多数基于数论的密码学,如Diffie-Hellman协议和RSA加密系统,依赖于大整数因子分解或特定群的离散对数等困难问题。然而,Shor 在1997年给出了对所有这些问题的高效量子算法,这将使得基于数论的密码系统在未来量子计算机时代变得不安全。相比之下,目前对于格密码…...
VTK——angleWidget的3D转换
文章目录 3D空间坐标转换例程心得 3D空间坐标转换 在冠状图、矢状面、横截面等创建的角度组件的三个端点坐标,不能直接用在3D视图中。这是因为2D切片的坐标是基于像素的,而3D空间的坐标可能是基于实际物理尺寸的。 解决方案是使用2D点的坐标、切片的物理…...

HDFS 集群动态节点管理
目录 一、动态扩容、节点上线 1.1 背景 1.2 扩容步骤 1.2.1 新机器基础环境准备 1.2.2 Hadoop 配置 1.2.3 手动启动 DataNode 进程 1.2.4 Web 页面查看情况 1.2.5 DataNode 负载均衡服务 二、动态缩容、节点下线 2.1 背景 2.2 缩容步骤 2.2.1 添加退役节点 …...

postman9.12.汉化版(附有下载链接)
想用英文版本的可以直接点击下载最新版本 这里直接付上9.12.2版本的下载链接,如果大家要下载别的版本,可以直接修改链接里面的版本号即可 ,下面是汉化包下载 链接:https://pan.baidu.com/s/1izK3HfqlfXJdq6KIYeJ2zw?pwdpetk 提…...

mysql与msql2数据驱动
mysql基本使用 数据库操作(DDL) -- 数据考操作 -- 1.查询所有数据库 SHOW DATABASES;-- 2.选择数据库 USE learn_mysql;-- 3.当前正在使用的数据库 SELECT DATABASE();-- 4.创建数据库 CREATE DATABASE IF NOT EXISTS learn_mysql;-- 5.删除数据库 DRO…...
解决微信小程序回调地狱问题
一、背景 小程序开发经常遇到根据网络请求结果,然后继续 处理下一步业务操作,代码如下: //1第一个请求 wx.request({url:"https://example.com/api/",data:data,success:function(res){//2第二个请求 wx.request({url:"http…...

cron介绍
cron表达式在线生成 在使用定时调度任务的时候,我们最常用的,就是cron表达式了。通过cron表达式来指定任务在某个时间点或者周期性的执行。 cron表达式的组成 cron表达式是一个字符串,由6到7个字段组成,用空格分隔。其中前6个字…...

mkp勒索病毒的介绍和防范,勒索病毒解密,数据恢复
mkp勒索病毒是一种新兴的电脑病毒,它会对感染的电脑进行加密,并要求用户支付一定的赎金才能解锁。这种病毒已经引起了全球范围内的关注,因为它不仅具有高危害性,而且还有很强的传播能力。本文将对mkp勒索病毒进行详细介绍…...

7.4.分块查找
一.分块查找的算法思想: 1.实例: 以上述图片的顺序表为例, 该顺序表的数据元素从整体来看是乱序的,但如果把这些数据元素分成一块一块的小区间, 第一个区间[0,1]索引上的数据元素都是小于等于10的, 第二…...

label-studio的使用教程(导入本地路径)
文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...
Spring Boot 实现流式响应(兼容 2.7.x)
在实际开发中,我们可能会遇到一些流式数据处理的场景,比如接收来自上游接口的 Server-Sent Events(SSE) 或 流式 JSON 内容,并将其原样中转给前端页面或客户端。这种情况下,传统的 RestTemplate 缓存机制会…...

dedecms 织梦自定义表单留言增加ajax验证码功能
增加ajax功能模块,用户不点击提交按钮,只要输入框失去焦点,就会提前提示验证码是否正确。 一,模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

江苏艾立泰跨国资源接力:废料变黄金的绿色供应链革命
在华东塑料包装行业面临限塑令深度调整的背景下,江苏艾立泰以一场跨国资源接力的创新实践,重新定义了绿色供应链的边界。 跨国回收网络:废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点,将海外废弃包装箱通过标准…...
【Go】3、Go语言进阶与依赖管理
前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课,做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程,它的核心机制是 Goroutine 协程、Channel 通道,并基于CSP(Communicating Sequential Processes࿰…...

学习STC51单片机31(芯片为STC89C52RCRC)OLED显示屏1
每日一言 生活的美好,总是藏在那些你咬牙坚持的日子里。 硬件:OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写,"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...
MySQL中【正则表达式】用法
MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现(两者等价),用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例: 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...

多模态大语言模型arxiv论文略读(108)
CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题:CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者:Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...
Device Mapper 机制
Device Mapper 机制详解 Device Mapper(简称 DM)是 Linux 内核中的一套通用块设备映射框架,为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程,并配以详细的…...