首页 > 其他分享 >04-ES6语法:默认参数和rest参数

04-ES6语法:默认参数和rest参数

时间:2023-06-29 13:35:05浏览次数:36  
标签:ES6 04 createBox color rest height width 参数


本文我们分别介绍ES6中的默认参数和rest参数,下面我们分别进行说明和演示。

下面是简单的屏幕分享,不爱看文字的同道中人可以看视频。-_-



一、默认参数

首先,我们先看看在ES5中是如何定义默认参数的方式,代码如下:

// ES5的默认参数值。
function createBox(width, height, color) {
    var width = width || 200;
    var height = height || 100;
    var color = color || "blue";
    var message = `盒子的宽度=${width},高度=${height},颜色=${color}`;
    console.info(message);
}
createBox();
createBox(500, 200, "red");

上图代码在控制台输出的内容如下图所示:

04-ES6语法:默认参数和rest参数_JavaScript

从上图可以看到,第一次调用createBox()函数的时候,并未传递任何参数值,这个时候输出的内容就是我们在函数内部定义的默认参数值,第二次调用该函数的时候,我们给3个参数都传递了参数,输出的内容就是我们传递的参数内容。

那这样的代码功能在ES6中是如何实现的呢?代码如下:

// ES6的默认参数值。
function createBox(width = 200, height = 100, color = "blue") {
    var message = `盒子的宽度=${width},高度=${height},颜色=${color}`;
    console.info(message);
}
createBox();
createBox(500, 200, "red");

输出的结果和ES6之前的方式结果一模一样。可以看到,直接在函数的各个参数中就已经赋予了默认值,如果我们在调用函数的时候,没有传递对应的实参,则直接使用默认值了。另外,函数内部的代码也精简了不少。

二、rest参数

什么是rest参数呢?它的作用是什么呢?

我们还是先来看看ES5中是获取函数传递的实参的,代码如下:

// ES5中获取实参。
function createBox() {
    console.info(arguments);
}
createBox(500, 200, "red");

可以看到是通过关键字arguments来获取传递给函数的实际参数的。控制台输出的内容如下所示:

04-ES6语法:默认参数和rest参数_ES6_02

通过关键字arguments获取到的参数列表实际上是一个数组,其中每一个元素是按照实际参数的顺序进行组织的。

这个关键字很不错,但是,在我们的实际使用中可能会有这样的情况:有些参数我们是确定的,有些参数我们不太确定,需要根据实际的使用场景进行灵活传递,那该怎么办呢?此时,ES6的rest参数就有用武之地。先来看一个示例。

// ES6中的rest参数。
function createBox(width, height, color, ...args) {
    var message = `盒子的宽度=${width},高度=${height},颜色=${color}`;
    console.info(message);
    console.info(args);
}
createBox(500, 200, "red", "这里是盒子的描述信息1", "这里是盒子的描述信息2");

咱们先说说上面的代码,createBox()函数前面的3个参数都有着明确的意义,是需要我们传递参数的,在函数的内部代码中,直接使用这3个参数了。最后一个参数...args可以不传递,也可以多个,比如我们示例中就额外传递了2个参数。这段代码输出的内容如下图所示:

04-ES6语法:默认参数和rest参数_前端_03

 从输出的结果来看,...args传递的参数,我们也可以精准的获取到了。当然,这个参数的名字不一定非的是args,可以使其它任何你喜欢的名字,它并不是一个关键字,而是我们用来表示其余参数的代名词而已。这就是ES6中rest参数的作用。

在使用rest参数的过程中,有一个重要规则必须遵守:rest参数必须放到参数最后位置。

如果rest参数没有被放到最后的位置,代码编辑中可能会报错,如下图所示:

04-ES6语法:默认参数和rest参数_默认参数_04

而浏览器的控制台也会出现语法性的错误提示信息,如下图所示:

04-ES6语法:默认参数和rest参数_团队开发_05

标签:ES6,04,createBox,color,rest,height,width,参数
From: https://blog.51cto.com/u_3319687/6581497

相关文章

  • 02-ES6语法:const常量
    ES6标准中增加了新的关键字const来定义常量。使用const定义的常量,在后续的代码中将无法被改变。下面是简单的屏幕分享,不爱看文字的同道中人可以看视频。-_-一、基本常量首先我们来看下如何通过这个关键字定义常量,代码如下:<script>constPI=3.14159;console.info(PI)......
  • 03-ES6语法:模板字面量(Template Literals)
    ES6引入了模板字面量(TemplateLiterals),对多行字符串和字符串占位符的操作进行了增强。下面我们分别进行说明和演示。下面是简单的屏幕分享,不爱看文字的同道中人可以看视频。-_-一、多行字符串(Multi-lineStrings)首先我们来看下ES5中是如何表示多行字符串的,示例代码如下://ES5......
  • etcd 参数优化
    heartbeat-interval目前heartbeat-interval使用默认值即100, 较小的心跳间隔会导致发送频繁的消息,消耗CPU和网络资源。而较大的心跳间隔,又会导致检测到Leader故障不可用耗时过长,影响业务可用性。我们可以将其优化为300 election-timeout目前 election-timeout使用......
  • package-lock.json锁定镜像地址404的处理方法
    前言最近接触了一个新的vue项目,安装依赖是一直无法安装成功,有部分依赖包的地址报404,查看package-lock.json,发现其中部分依赖使用了公司私有的镜像库,但是目前该镜像库已关闭,访问该包地址返回404.解决方案如下1、删除package-lock.json,重新npmi生成新的package-lock.json2、先卸......
  • NodeJS系列(6)- ECMAScript 6 (ES6) 语法(四)
    本文在“NodeJS系列(2)-NPM项目Import/ExportES6模块”的npmdemo项目的基础上,继续介绍并演示Promise对象、Generator函数、async函数等ES6语法和概念。NodeJSES6:https://nodejs.org/en/docs/es6ECMA:https://www.ecma-international.org/publications-and-standard......
  • hdu 2604(矩阵快速幂)
    题意:f和m两种字母,给出l表示有2^l个由f和m组成长度为l的字符串,如果这些字符串内包含fmf或fff子串的是一种特殊字符串,给出l问不是特殊字符串的数量是多少。题解:先暴力把前几个l的答案跑了一下,发现有个规律f(n)=f(n-1)+f(n-3)+f(n-4),试着用这个公式写了矩阵快速幂交上去......
  • NodeJS系列(5)- ECMAScript 6 (ES6) 语法(三)
    在“NodeJS系列(3)-ECMAScript6(ES6)语法(一)”和“NodeJS系列(4)-ECMAScript6(ES6)语法(二)”里,我们介绍并演示let、const、Symbol、函数扩展、类等ES6语法和概念。本文在“NodeJS系列(2)-NPM项目Import/ExportES6模块”的npmdemo项目的基础上,继续介绍并演示Ref......
  • 模板元编程之非类型模板参数
    一、简介对于函数模板和类模板,模板参数并不局限于类型,普通值也可以作为模板参数,当要使用基于值的模板时,必须显示的指定这些值,才能够对模板进行实例化,并获得最终代码。template<typenameT,intMAXSIZE>classStack{private:Telems[MAXSIZE];//包含元素的数组i......
  • WP CTF-Web 攻防世界 GFSJ0475 get_post
    「场景」进入场景后提示请用GET方式提交一个名为a,值为1的变量「思路」根据提示在url后加上?a=1,回车发送请求。出现新提示。请再以POST方式随便提交一个名为b,值为2的变量打开brupsuite,配置本地代理为brupsuite中proxy的地址和端口号,刷新浏览器页面,brupsuite捕获到请求......
  • WP CTF-Web 攻防世界 GFSJ0474 view_source
    「场景」题目描述:X老师让小宁同学查看一个网页的源代码,但小宁同学发现鼠标右键好像不管用了。「思路」进入场景,右键无法使用,按F12,打开开发者工具,切换到ELements标签页,发现flag...「工具」「知识拓展」......