ES6基础之默认参数值

所属分类: 网络编程 / JavaScript 阅读数: 722
收藏 0 赞 0 分享

如果调用函数的过程中,定义的参数缺失,此参数变量的值则会是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的作用域。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

更多精彩内容其他人还在看

jQuery LigerUI 使用教程表格篇(1)

ligerGrid是ligerui系列插件的核心控件,用户可以快速地创建一个美观,而且功能强大的表格,支持排序、分页、多表头、固定列等等
收藏 0 赞 0 分享

JavaScript中常用的运算符小结

JavaScript中常用的运算符小结,需要的朋友可以参考下。
收藏 0 赞 0 分享

深入理解JavaScript系列(13) This? Yes,this!

在这篇文章里,我们将讨论跟执行上下文直接相关的更多细节。讨论的主题就是this关键字。实践证明,这个主题很难,在不同执行上下文中this的确定经常会发生问题
收藏 0 赞 0 分享

javascript (用setTimeout而非setInterval)

javascript (用setTimeout而非setInterval)如果用setInterval 可能出现 下次调用会在前一次调用前调用
收藏 0 赞 0 分享

JavaScript中两个感叹号的作用说明

用两个感叹号的作用就在于,如果明确设置了o中flag的值(非null/undefined/0""/等值),自然test就会取跟o.flag一样的值;如果没有设置,test就会默认为false,而不是null或undefined
收藏 0 赞 0 分享

javascript写的简单的计算器,内容很多,方法实用,推荐

最近用javascript写了一个简单的计算器,自己测试感觉还好,代码都给了注释,非常不错,推荐大家学习。
收藏 0 赞 0 分享

js的表单操作 简单计算器

javascript写的简单的加减乘除计算器,里面涉及到一些方法还是很实用的哦,新手不要错过
收藏 0 赞 0 分享

Jquery中删除元素的实现代码

empty用来删除指定元素的子元素,remove用来删除元素,或者设定细化条件执行删除
收藏 0 赞 0 分享

javaScript 利用闭包模拟对象的私有属性

JavaScript缺少块级作用域,没有private修饰符,但它具有函数作用域。作用域的好处是内部函数可以访问它们的外部函数的参数和变量(除了this和argument
收藏 0 赞 0 分享

为JavaScript类型增加方法的实现代码(增加功能)

大家在js开发过程中有些功能已经满足不了我们的需求,或没有我们需要的功能,那么我们就可以自己扩展下,个性化js
收藏 0 赞 0 分享
查看更多