了解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 相关文章推荐
JSON 客户端和服务器端的格式转换
Aug 27 Javascript
JQ获取动态加载的图片大小的正确方法分享
Nov 08 Javascript
js在IE与firefox的差异集锦
Nov 11 Javascript
Jquery 全选反选实例代码
Nov 19 Javascript
javascript瀑布流式图片懒加载实例解析与优化
Feb 23 Javascript
百度地图给map添加右键菜单(判断是否为marker)
Mar 04 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
Dec 22 Javascript
微信小程序 MINA文件结构
Oct 17 Javascript
对存在JavaScript隐式类型转换的四种情况的总结(必看篇)
Aug 31 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 jQuery
vue vantUI实现文件(图片、文档、视频、音频)上传(多文件)
Oct 15 Javascript
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
全国FM电台频率大全 - 5 内蒙古自治区
2020/03/11 无线电
PHP5.0对象模型探索之抽象方法和抽象类
2006/09/05 PHP
特转载一高手总结PHP学习资源和链接.
2006/12/05 PHP
PHP得到某段时间区间的时间戳 php定时任务
2012/04/12 PHP
laravel 数据验证规则详解
2019/10/23 PHP
JQUERY THICKBOX弹出层插件
2008/08/30 Javascript
jQuery cdn使用介绍
2013/05/08 Javascript
javascript常见数字进制转换实例分析
2016/04/21 Javascript
artDialog+plupload实现多文件上传
2016/07/19 Javascript
Bootstrap Table使用方法详解
2016/08/01 Javascript
vue双向绑定简要分析
2017/03/23 Javascript
layer弹出层 iframe层去掉滚动条的实例代码
2018/08/17 Javascript
Vue中的v-for指令不起效果的解决方法
2018/09/27 Javascript
微信小程序修改数组长度的问题的解决
2019/12/17 Javascript
python paramiko实现ssh远程访问的方法
2013/12/03 Python
Python基于回溯法子集树模板实现图的遍历功能示例
2017/09/05 Python
Python2.7基于笛卡尔积算法实现N个数组的排列组合运算示例
2017/11/23 Python
python flask中静态文件的管理方法
2018/03/20 Python
python使用epoll实现服务端的方法
2018/10/16 Python
Django CSRF跨站请求伪造防护过程解析
2019/07/31 Python
wxPython窗体拆分布局基础组件
2019/11/19 Python
Python Numpy库常见用法入门教程
2020/01/16 Python
django之从html页面表单获取输入的数据实例
2020/03/16 Python
Python如何通过百度翻译API实现翻译功能
2020/04/02 Python
Tensorflow中k.gradients()和tf.stop_gradient()用法说明
2020/06/10 Python
HTML5中canvas中的beginPath()和closePath()的重要性
2018/08/24 HTML / CSS
canvas版人体时钟的实现示例
2021/01/29 HTML / CSS
ghd澳大利亚官方网站:英国最受欢迎的美发工具品牌
2018/05/21 全球购物
外贸采购员岗位职责
2014/03/08 职场文书
2014年五一促销活动方案
2014/03/09 职场文书
《蚕姑娘》教学反思
2014/04/15 职场文书
银行竞聘演讲稿范文
2014/04/23 职场文书
2014年巴西世界杯口号
2014/06/05 职场文书
大学推普周活动总结
2015/05/07 职场文书
干部考核工作总结2015
2015/07/24 职场文书
用Python创建简易网站图文教程
2021/06/11 Python