扣丁学堂HTML5培训之ES6基础之默认参数值

2019-02-21 17:41:32 355浏览

今天扣丁学堂HTML5培训老师给大家介绍一下关于ES6基础之默认参数值详解，首先如果调用函数的过程中，定义的参数缺失，此参数变量的值则会是undefined。

怎么给缺失的参数赋值默认值，在ES6之前，没有简洁的语法设置缺失参数的默认值，但是我们一般可以这么编写代码解决缺失参数默认值：

function myFunction(x, y, z) {
 x = x === undefined ? 1 : x;
 y = y === undefined ? 2 : y;
 z = z === undefined ? 3 : z;
 console.log(x, y, z); //Output "6 7 3"
 }
 myFunction(6, 7);

这种写法是不是比较麻烦？默认值的设置是不是不够直观？在ES6中，我们可以用更简洁的语法进行实现，通过本篇文章你将学习到以下内容：

使用ES6语法声明参数默认

值使用undefined传

参参数运算

使用ES6语法声明参数默认值

我们可以使用ES6简洁的语法，如下示例进行声明函数参数的默认值：

function myFunction(x = 1, y = 2, z = 3) {
 console.log(x, y, z); 
}
myFunction(6,7); // Outputs 6 7 3

在上述代码示例中，我们在调用此函数中传递了前两个参数，因此参数的默认值(即x=1和y=2)将会被覆盖(即x=6和y=7)。由于第三个参数缺省，因此z使用默认值，将会是3。

使用undefined传参

如果我们想让具体某个参数使用默认值，我们可以使用undefined进行赋值，如下段代码所示：

function myFunction(x = 1, y = 2, z = 3) {
 console.log(x, y, z); // Outputs "1 7 9"
 }
 myFunction(undefined,7,9);

是不是很简单，只需要使用undefined，我们就可以指定具体某个参数使用默认值。

参数运算

在ES6中我们不仅可以给参数默认赋值具体的数值，同时参数赋值支持参数的逻辑运算进行赋值，如下段代码所示：

function myFunction(x = 1, y = 2, z = x + y) {
 console.log(x, y, z); // Output "6 7 13"
 }
 myFunction(6,7);

在上述代码中，我们只传入了前两个参数，第三个参数缺省，第三个参数的值默认值是则会是前两个参数之和。

小节

今天的内容就到这里，当我们在开发一些工程应用通用组件时，都需要暴露一些接口以供使用。而这些接口的友好性是决定这个组件质量的一大指标，其中参数缺省值（默认值）的完善程度同时也影响接口的友好性，感谢ES6能让我们用如此简介的语法设置参数的缺省值。

与解构赋值默认值结合使用

这里有两种写法需要区分一下：

function m1({x=0,y=0} = {}){
  return [x,y];
}
function m2({x,y} = {x:0,y:0}){
  return [x,y];
}
m1({x:3});//[3,0]
m2({x:3});//[3,undefined]
m1({});//[0,0]
m2({});//[undefined,undefined]

参数默认值的位置

通常情况下，定义了默认值的参数应该是函数的尾参数。因为这样比较容易看出，到底省略了哪些参数，如果非尾部的参数设置默认值，实际上这个参数是无法省略的。

如果有默认值的参数都不是尾参数，这时，无法只省略该参数而不省略其后的参数，除非显示输入undefined。如果传入undefined，那么就会触发默认值，但是null没有这个效果。

函数的length属性

如果函数指定了默认值后，函数的length属性就不会包含有默认值的参数。这是因为length属性的含义是，该函数预期传入的参数个数，某个参数指定默认值之后，预期传入的参数个数就不包括这个参数了，同理，rest参数也不会计入length属性。

函数参数默认值的类型

（1）变量

如果函数参数的默认值是一个变量，则该变量所处的作用域和其他变量的作用域规则相同，即是先前函数的作用域，然后再是全局作用域。

（2）函数

如果函数A的参数默认值是函数B，那么由于函数的作用域是其声明的时候所在的作用域，函数B的作用域就在全局作用域而不是函数A的作用域。

以上就是关于扣丁学堂HTML5培训之ES6基础之默认参数值的全部内容，希望对大家的学习有所帮助，最后扣丁学堂html5培训官网、微信等平台，扣丁学堂IT职业在线学习教育平台为您提供权威的html5视频教程供学员学习，扣丁学堂老师精心推出的html5视频直播课定能让你快速掌握html5从入门到精通开发实战技能。扣丁学堂H5技术交流群：673883249。

【关注微信公众号获取更多学习资料】

查看更多关于“HTML5开发技术资讯”的相关文章>>