脚本宝典收集整理的这篇文章主要介绍了默认参数如何在JavaScript ES6中工作,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
使用默认参数,您可以为任何参数设置默认值。然后,当调用函数并且未定义那些参数时,您的默认值将代表它们。
在本文中,我将向您展示如何使用默认参数来使某些参数成为必需。
我还录制了这篇文章的7分钟视频版本: 视频是YouTube上的,要翻墙哦! 什么?不会翻墙?你还是程序猿么?
下面我们有一个叫做的函数calculatePayment
。该功能将在三个参数:PRice
,salesTax
和discount
。此功能的目标是在考虑销售税和任何折扣后,接收这三个项目并返回最终价格。
这个函数有趣的是唯一真正需要的参数是price
。当我们定义时calculatePayment
,我们应该为两者设置默认值salesTax
,discount
因此如果在调用函数时未指定它们,它们仍将使用这些值进行初始化。
使用ES5,我们通常会这样做:
function calculatePayment (price, salesTax, discount) {
salesTax = salesTax || 0.047
discount = discount || 0
// math
}
如果您以前从未见过这样的||
操作员,那么这就是正在发生的事情。当calculatePayment
被调用时,salesTax
将被设置为salesTax
is,除非它是假的,然后它将被设置为0.047
。同样的事情正在发生discount
。
如果你观察,你可能已经注意到当前实现的一些问题。会发生什么,如果当我们调用calculatePayment传递100
,0
和0
?
calculatePayment(100,0,0)
您可能希望既salesTax
和discount
被设置为0
,因为这是我们指定的被调用函数时。但是,在JavaScript中,0
是假的。因此,而不是salesTax
被0
像我们指定的,它不是设置为我们的默认值0.047
。要解决这个问题,我们可以使用tyPEof
运算符而不是依赖||
运算符。
function calculatePayment (price, salesTax, discount) {
salesTax = typeof salesTax === 'undefined' ? 0.047 : salesTax
discount = typeof discount === 'undefined' ? 0 : discount
// math
}
好多了。现在,salesTax
将是0
就像我们所期待。如果您还在我身边,那么您现在可以理解ES6默认参数的增值,因为它们解决了同样的问题。但是,我们不是使用typeof
运算符来检查值是否未定义,而是可以执行类似的操作,
function calculatePayment(price, salesTax = 0.047, discount = 0) {
console.LOG('tax', salesTax)
console.log('discount', discount)
// math
}
请注意我们所做的就是将逻辑移到我们定义函数参数的位置。更清洁。
现在通常这是关于默认参数的帖子结束的地方。但是,我认为默认参数还有一个很酷的方面值得一提。
回顾一下这个calculatePayment
函数,我提到函数唯一真正需要的参数是price
。其他所有我们都可以设置默认值,但如果price
没有传入,函数将会中断。如果有一种方法,使用默认参数,让我们的函数抛出错误,如果price
是undefined
在调用函数时怎么办?正如你可能猜到的那样。
首先,让我们创建一个函数,称为isRequired
who的唯一目的是抛出错误。
function isRequired (name) {
throw new Error(name + 'is required')
}
现在,类似于我们之前使用的salesTax
和discount
,让我们设置price
等于isRequired
函数在函数内部的函数调用calculatePayment
。
function isRequired (name) {
throw new Error(name + 'is required')
}
function calculatePayment(
price = isRequired('price'),
salesTax = 0.047,
discount = 0
) {
// math
}
现在,如果我们调用calculatePayment
并且没有传入price
,我们将收到错误。
觉得可用,就经常来吧!Javascript技巧 脚本宝典 欢迎评论哦! js技巧,巧夺天工,精雕玉琢。小宝典献丑了!以上是脚本宝典为你收集整理的默认参数如何在JavaScript ES6中工作全部内容,希望文章能够帮你解决默认参数如何在JavaScript ES6中工作所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。