展开语法、剩余语法

展开语法定义

展开语法Spread Syntax,可以在函数调用/数组构造时,将数组表达式或者string在语法层面展开;还可以在构造字面量对象时,将对象表达式按照key-value的方式展开。(字面量一般指[1, 2, 3]或者{name:"mdn"}这种简洁的构造方式)。

展开语法
函数调用
myFunction(...iteratorObj);
字面量数组构造或字符串
[...iteratorObj, '4', ...'hello', 6]
构造字面量对象时,进行克隆或者属性拷贝(ECMAScript2018规范新增特性)

需要我们注意的是,此时通过Spread Syntax克隆或者属性拷贝属于浅拷贝。

let objClone = { ...obj };
展开语法示例
在函数调用时使用展开语法

如果我们像要将args数组中的元素迭代为函数参数,一般使用Function.prototype.apply的方式进行调用。因为apply方法可以接收一个数组或者类数组对象,其中的数组元素将作为单独的参数传给调用的函数。

function myFunction(x, y, z) {}
var args = [1, 2, 3];
myFunction.apply(null, args);

如果有了展开语法Spread Syntax语法,我们可以写成:
myFunction(...args)表示什么意思呢?我们主要关注...args的操作,...args此时表示将args数组进行**展开操作。**那么展开之后,实际上整体的效果相当于myFunction(1, 2, 3),所以效果是和上面例子相同。

function myFunction(x, y, z) {}
var args = [1, 2, 3];
myFunction(...args);
在new表达式中应用

使用new关键字来调用构造函数是,不能直接使用数组+apply的方式。(apply执行的是调用[[call]],而不是构造[[Constructor]])。
此时我们是不能够直接通过apply的方式去调用myFunction函数,因为apply方法调用的是[[call]] internal Property,而不是[[Constructor]] internal Property,所以不能够达到目的。

function myFunction(x, y, z){};
var args = [1, 2, 3];
new myFunction.apply(null, args);
如果有了展开语法`Spread Syntax`,我们可以写成:
var dateFields = [1970, 0, 1];
var d = new Date(...dateFields);

如果不使用展开语法的话,想要将数组元素传递给构造函数,实现的方式可能是这样的:
主要的思路:虽然我们不能直接通过new myConstructor.apply(null, myArguments)的方式将myArguments数组中的元素传递给构造函数myConstructor。但是我们可以找一个缓冲层做铺垫,比如例子中的partial函数。

  1. 疑问一:return constructor.apply(this, args)在做些什么?主要是使用借用构造函数的方式去处理实例化对象内部的属性。
  2. 疑问二:return constructor.apply(this, args)为什么要return,此时的结果是return undefined,为什么不会影响到程序的执行呢?因为new关键字调用构造函数时,构造函数内部会自动创建this对象,并且将this对象返回出去。如果你手动返回原始值的话,是不会对构造函数返回值造成影响。如果你返回的是**引用值,**此时才会受到影响。
function applyAndNew(constructor, args) {function partial() {// 借用构造函数return constructor.apply(this, args);}if (typeof constructor.prototype === 'object') {// 继承关系 partial => 继承 => myConstructorpartial.prototype = Object.create(constructor.prototype);}return partial;
}function myConstructor() {console.log("arguments.length: " + arguments.length);console.log(arguments);this.prop1="val1";this.prop2="val2"
}var myArguments = ["hi", "how", "are", "you", "mr", null];
var myConstructorWithArguments = applyAndNew(myConstructor, myArguments);
console.log(new myConstructorWithArguments);
构造字面量数组时使用展开语法

没有展开语法的时候,只能使用push、splice、concat等方法,来将已有数组元素变成新数组的一部分。有了展开语法,通过字面量方式,构造新数组会变得更简单,更优雅。

var parts = ['shoulders', 'knees'];
var lyrics = ['head', ...parts, 'and', 'toes'];
构造字面量对象时使用展开语法

Rest/Spread Properties for ECMAScript提议对字面量对象增加了展开的特性。其行为是,将已有对象的所有可枚举属性拷贝到新构造的对象中。
对象合并,对象浅拷贝你可以使用展开语法。

var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };var clonedObj = { ...obj1 };
// 克隆后的对象:{ foo: "bar", x: 42 }var mergedObj = { ...obj1, ...obj2 };
// 合并后的对象:{ foo: "baz", x: 42, y: 13 }
只用于可迭代对象

数组或者函数参数中使用展开语法时,该语法只能用于可迭代对象:

var obj = {'key1': 'value1'};
var array = [...obj]; // TypeError: obj is not iterable
展开多个值

在函数调用时使用展开语法,请注意不能超过JavaScript引擎限制的最大参数个数。

剩余语法(剩余参数)定义

剩余语法Rest Syntax看起来和展开语法完全相同,不同在于,剩余参数用于解构数组和对象。从某种意义上来说,剩余语法和展开语法是相反的:展开语法将数组展开为其中的各个元素,而剩余语法则是将多个元素收集起来并“凝聚”为单个元素。
剩余参数语法允许我们将一个不定数量的参数表示为一个数组。

剩余语法的描述

如果函数的最后一个命名参数以...为前缀,则它将成为一个由剩余参数组成的真数组,其中从0包括到theArgs.length(排除)的元素由传递给函数的实际参数提供。
在下面的例子中,thisArgs将收集该函数的第三个参数(因为第一个参数被映射到a,而第二个参数映射到b)和所有后续参数。

function(a, b, ...theArgs) {// ...
}
剩余参数和arguments对象的区别

剩余参数和arguments对象之间的区别主要在于:

  1. 剩余参数只包含哪些没有对应形参的实参,而arguments对象包含了传给函数的所有实参。
  2. arguments对象不是一个真正的数组,而剩余参数是真正的Array实例,也就是说你能够在它上面直接使用所有的数组方法。
  3. arguments对象还有一些附加的属性,比如callee
解构剩余参数

剩余参数可以被解构,这意味着他们的数据可以被解包到不同的变量中。

function f(...[a, b, c]) {return a + b + c;
}f(1)          // NaN (b and c are undefined)
f(1, 2, 3)    // 6
f(1, 2, 3, 4) // 6 (the fourth parameter is not destructured)
剩余语法不仅仅用于函数参数

注意一点,剩余语法是一种语法,不仅仅只用作于函数参数。也可以用作收集数组解构时剩余的元素。

const [a, ...args] = [1, 2, 3, 4];
console.log(a); // 1
console.log(args); // [2, 3, 4]

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

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

相关文章

V100 GPU服务器安装CUDNN教程

大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…

【如何学习Python自动化测试】—— 鼠标键盘操作

5 、 鼠标键盘操作 在浏览器中,通常会用到鼠标来进行操作,比如右键菜单中选择一个操作,在 selenium 中提供了下列鼠标相关操作。 ActionChains 类提供了以下方法: 点击鼠标:click()右击鼠标:context…

Pandas数据清洗_Python数据分析与可视化

Pandas数据清洗 删除缺失值检测缺失值填充缺失值拉格朗日插值线性插值 在处理数据的时候,需要对数据进行一个清洗过程。清洗操作包括:空白行的删除、数据完整性检验、数据填充、插值等内容。 下面是数据清洗过程中使用的具体方法 删除缺失值 DataFram…

Go语言常用命令详解(三)

文章目录 前言常用命令go get示例参数说明 go install示例参数说明 go list示例 go mod示例参数说明 go work基本用法示例 go tool示例 go version示例 go vet示例 总结写在最后 前言 接着上一篇继续介绍Go语言的常用命令 常用命令 以下是一些常用的Go命令,这些命…

智能座舱架构与芯片- (14) 测试篇 上

一、 验证平台概要 1.1 测试软件方法论 “软件定义汽车” 的时代,软件在整车制造中的重要性日渐凸显。但不同于其他行业的软件开发,汽车行业有自己独特的软件开发要求。首先是需求严谨、需求层次复杂、需要通过专业的工具进行管理;其次开发…

数据中台之用户画像

用户画像应用领域较为广泛,适合于各个产品周期,从新用户的引流到潜在用户的挖掘、 从老用户 的培养到流失用户的回流等。通过挖掘用户兴趣、偏好、人口统计特征,可以 直接 作用于提升营销精准 度、推荐匹配度,最终提升产品服务和企业利润。还包括广告投放、产品布局和行业报…

从0开始学习JavaScript--深入理解JavaScript的async/await

JavaScript的异步编程在过去经历了回调地狱、Promise的引入,而今,通过async/await,让我们获得了更加优雅、可读性更高的异步编程方式。本文将深入探讨async/await的概念、用法,并通过丰富的示例代码展示其在实际应用中的威力。 理…

JVM垃圾收集器

什么是垃圾收集器 Java虚拟机的垃圾收集器是内存回收的具体实现,主要用于回收不再使用的对象,释放内存空间。Java虚拟机提供了多种垃圾收集器,不同的垃圾收集器适用于不同的场景和需求。 在C中,对象所占的内存在程序结束运行之前…

Windows to Go U盘系统制作(未测完成)

三、Windows U盘系统制作 1、下载windows镜像,并通过Windows To Go方式制作,具体选项参考下面截图 2、选择Windows版本 3、配置Windows 体验相关参数

C++ Qt TCP协议,处理粘包、拆包问题,加上数据头来处理

目录 前言: 场景: 原因: 解决: 方案2具体细节: 纯C服务端处理如下: Qt客户端处理如下: 前言: tcp协议里面,除了心跳检测是关于长连接操作的处理,这个在…

STM32通用定时器产生PWM信号

STM32通用定时器产生PWM信号 PWM信号stm32定时器PWM生成模式PWM配置基本步骤PWM周期计算CubeMX配置代码展现 本期内容我将展示使用STM32通用定时器产生PWM信号,这里以定时器3通道3为例 PWM信号 如果还不懂的话,可以看看 : “蓝桥杯单片机学习…

远程桌面访问MATLAB 2018B,提示License Manger Error -103,终极解决方案

通过远程桌面方位Windows Server系统下的MATLAB2018B,报错License Manger Error -103,Crack文件夹下的dll文件已经替换,同时也已经输出了lic文件,但是仍然无法打开。但是在本地桌面安装就没有问题。初步怀疑MATLAB的License使用机…

909-2014-T1

文章目录 1.原题2.算法思想3.关键代码4.完整代码5.运行结果 1.原题 为带表头的单链表类Chain编写一个成员函数Reverse,该函数对链表进行逆序操作(将链表中的结点按与原序相反的顺序连接),要求逆序操作就地进行,不分配…

远程命令执行漏洞原理,以及防护绕过方式

一、背景 RCE(Remote Command /Code Execute) 远程代码执行漏洞 通过PHP代码注入、Java代码注入等方式连接程序中预留的后门或接口从而进行远程命令执行,达到对服务器的控制。 为什么会出现远程代码执行漏洞呢? Web应用有时需要调用执行一些系统命令函数…

数据库的基本操作

DDL: 1.查询 show databases; 创建数据库: create data 数据库名称; 创建数据库(判断,如果不存在则创建): create database if not exists 数据库名称; 删除数据库 drop database 数据库名称; drop databa…

异行星低代码平台--第三方插件对接:企业微信平台对接(二)

异行星低代码平台可以集成企业微信,实现单点登录、消息推送和组织机构同步。 提示 此功能需要异行星低代码平台企业版授权才能使用。 企业微信集成​ 单点登录 异行星低代码平台集成到企业微信后,只要使用企业微信账户登录企业微信客户端&#xff0…

CSS-背景属性篇

属性名:background-color 功能:设置背景颜色 属性值:符合CSS中颜色规范的值 默认背景颜色是 transparent body{ background-color: blue; } 属性名:background-image 功能:设置背景图片 属性值:url(图片的…

sklearn中的TfidfTransformer和gensim中的TfidfModel的区别

sklearn.feature_extraction.text.TfidfTransformer 和 gensim.models.TfidfModel 都是用于计算文本数据的 TF-IDF 值的工具。它们的主要区别在于实现方式和输入数据的格式。 1、实现方式和输入数据格式: TfidfTransformer 是 scikit-learn 中的一个类,…

PyTorch多GPU训练时同步梯度是mean还是sum?

PyTorch 通过两种方式可以进行多GPU训练: DataParallel, DistributedDataParallel. 当使用DataParallel的时候, 梯度的计算结果和在单卡上跑是一样的, 对每个数据计算出来的梯度进行累加. 当使用DistributedDataParallel的时候, 每个卡单独计算梯度, 然后多卡的梯度再进行平均.…

shell 脚本语句

目录 条件语句 test 命令 比较整数数值 字符串比较 命令举 条件逻辑测试操作 组合写法 举例 双中括号 ​编辑 ( ) / { } if 语句的结构 case 语句 脚本举例 识别 yes 和 no 脚本 检查磁盘使用情况脚本 新建用户以及随机设置用户密码的脚本 补充命令 [RANDOM…