了解JavaScript函数中的默认参数


Posted in Javascript onMay 30, 2019

前言

JavaScript函数可以有默认参数值。通过默认函数参数,你可以初始化带有默认值的正式参数。如果不初始化具有某些值的参数,则该参数的默认值为undefined。

请看下列代码:

function foo(num1){
console.log(num1);
}
foo();

在调用函数foo时,你没有传递任何参数,因此变量num1的默认值设置为undefined。但是,有时你可能需要设置默认值而非undefined。过去,最好的策略是测试参数值undefined,然后分配一个值。所以,在上面的例子中,如果你想要将num1的默认值设置为9,那么你可以按照以下代码所示的方式做:

function foo(num1) {
if (num1 === undefined) {
num1 = 9;
}
console.log(num1);
}
foo();

ECMAScript 6引入了函数的默认参数。使用ECMA 2015的默认参数功能,你将不再需要检查未定义的参数值。现在,你可以将9设置为参数本身的默认值。你可以重写上述函数以使用默认值,如下所示:

function foo(num1 =9) {
console.log(num1);
}
foo();

对于函数foo,如果num1参数的值未被传递,那么JavaScript将设置9作为num1的默认值。

检查未定义的参数

即使你在调用函数时明确地传递undefined作为参数值,参数值也将设置为默认值。

function foo(num1 =9) {
console.log(num1);
}
foo(undefined);

在上面的代码中,你传递undefined为num1的值;因此,num1的值将被设置为默认值9。

运行时计算默认值

JavaScript函数默认值在运行时计算。为了更好地理解这一点,请看以下代码:

function foo(value = koo()) {
return value;
}
function koo() {
return "Ignite UI";
}
var a = foo();
console.log(a);

在函数foo中,参数值的默认值设置为函数koo。在运行时调用函数foo时,将计算函数koo。调用foo函数后,你会得到如下图所示的输出(在这个例子中,我们使用了Ignite UI框架)。

了解JavaScript函数中的默认参数

重用默认参数

默认参数可供之后的默认参数使用。请看下列代码:

function foo(num1 = 9, num2 = num1 + 8){
console.log(num2);
}
foo();

在上面的代码中,使用num1的默认值来计算num2的默认值。调用函数foo时将得到以下输出:

了解JavaScript函数中的默认参数

结论

JavaScript默认参数在编写函数时非常有用。在调用函数时,如果缺少参数,则默认参数功能允许你为函数参数分配默认值,而不是将其定义为undefined。

英文原文:Easy JavaScript Part 3: What Is a Default Parameter in a Function?

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

Javascript 相关文章推荐
极酷的javascirpt,让你随意编辑任何网页
Feb 25 Javascript
jquery cookie插件代码类
May 26 Javascript
浅谈javascript的原型继承
Jul 25 Javascript
javascript实现随时变化着的背景颜色
Apr 02 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
Nov 19 Javascript
jquery判断input值不为空的方法
Jun 05 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
Jun 14 Javascript
Bootstrap表格制作代码
Mar 17 Javascript
浅谈React中的元素、组件、实例和节点
Feb 27 Javascript
JS匿名函数和匿名自执行函数概念与用法分析
Mar 16 Javascript
javascript实现动态时钟的启动和停止
Jul 29 Javascript
vue+vant实现购物车全选和反选功能
Nov 17 Vue.js
Element-ui中元素滚动时el-option超出元素区域的问题
May 30 #Javascript
轻松学习JavaScript函数中的 Rest 参数
May 30 #Javascript
细说Vue组件的服务器端渲染的过程
May 30 #Javascript
了解JavaScript中let语句
May 30 #Javascript
koa+jwt实现token验证与刷新功能
May 30 #Javascript
深入理解JavaScript 箭头函数
May 30 #Javascript
socket在egg中的使用实例代码详解
May 30 #Javascript
You might like
利用php+mysql来做一个功能强大的在线计算器
2010/10/12 PHP
php中模拟POST传递数据的两种方法分享
2011/09/16 PHP
PHP正则替换函数preg_replace和preg_replace_callback使用总结
2014/09/22 PHP
php中mkdir函数用法实例分析
2014/11/15 PHP
JS批量修改PS中图层名称的方法
2014/01/26 Javascript
js登录弹出层特效
2014/03/07 Javascript
Node.js编程中客户端Session的使用详解
2015/06/23 Javascript
JavaScript实现简单获取当前网页网址的方法
2015/11/09 Javascript
js 转json格式的字符串为对象或数组(前后台)的方法
2016/11/02 Javascript
NodeJS处理Express中异步错误
2017/03/26 NodeJs
详解Angular 4.x NgTemplateOutlet
2017/05/24 Javascript
JS+canvas绘制的动态机械表动画效果
2017/09/12 Javascript
express+mockjs实现模拟后台数据发送功能
2018/01/07 Javascript
微信小程序实现自定义picker选择器弹窗内容
2020/05/26 Javascript
微信网页授权并获取用户信息的方法
2018/07/30 Javascript
微信小程序实现简单文字跑马灯
2020/05/26 Javascript
[16:14]教你分分钟做大人:米拉娜(HEROS)
2014/11/24 DOTA
[01:06]DOTA2隆重推出2016冬季勇士令状 内含上海特级锦标赛互动指南
2016/02/17 DOTA
python实现udp数据报传输的方法
2014/09/26 Python
Python函数的周期性执行实现方法
2016/08/13 Python
Sublime开发python程序的示例代码
2018/01/24 Python
python实现猜单词游戏
2020/05/22 Python
Python如何实现FTP功能
2020/05/28 Python
Python自带的IDE在哪里
2020/07/01 Python
Python extract及contains方法代码实例
2020/09/11 Python
用HTML5实现网站在windows8中贴靠的方法
2013/04/21 HTML / CSS
RetroStage德国:复古服装
2019/02/03 全球购物
大学生表扬信范文
2014/01/09 职场文书
民间借贷协议书范本
2014/10/01 职场文书
文言文辞职信
2015/02/28 职场文书
百家讲坛观后感
2015/06/12 职场文书
小爸爸观后感
2015/06/15 职场文书
母婴行业实体、电商模式全面解析
2019/08/01 职场文书
python某漫画app逆向
2021/03/31 Python
JavaScript继承的三种方法实例
2021/05/12 Javascript
mysql5.5中文乱码问题解决的有用方法
2022/05/30 MySQL