了解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 相关文章推荐
纯Javascript实现Windows 8 Metro风格实现
Oct 15 Javascript
javascript实现确定和取消提示框效果
Jul 10 Javascript
基于JQuery实现分隔条的功能
Jun 17 Javascript
jquery-mobile表单的创建方法详解
Nov 23 Javascript
vue项目总结之文件夹结构配置详解
Dec 13 Javascript
JavaScript实现汉字转换为拼音及缩写的方法示例
Mar 28 Javascript
通过js给网页加上水印背景实例
Jun 17 Javascript
Vue实现push数组并删除的例子
Nov 01 Javascript
react实现移动端下拉菜单的示例代码
Jan 16 Javascript
如何优雅地取消 JavaScript 异步任务
Mar 22 Javascript
微信小程序实现文件预览
Oct 22 Javascript
小程序中手机号识别的示例
Dec 14 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
Snoopy类使用小例子
2008/04/15 PHP
PHP删除非空目录的函数代码小结
2013/02/28 PHP
php读取flash文件高宽帧数背景颜色的方法
2015/01/06 PHP
php正则替换处理HTML页面的方法
2015/06/17 PHP
封装好的省市地区联动控件附下载
2007/08/13 Javascript
js控制的回到页面顶端goTop的代码实现
2013/03/20 Javascript
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
2013/03/22 Javascript
Node调试工具JSHint的安装及配置教程
2014/05/27 Javascript
JQuery动画与特效实例分析
2015/02/02 Javascript
jQuery简单实现禁用右键菜单
2015/03/10 Javascript
angularjs自定义ng-model标签的属性
2016/01/21 Javascript
JavaScript面试题大全(推荐)
2016/09/22 Javascript
关于Javascript中document.cookie的使用
2017/03/08 Javascript
微信小程序使用checkbox显示多项选择框功能【附源码下载】
2017/12/11 Javascript
基于JavaScript 实现拖放功能
2019/09/12 Javascript
JS正则表达式常见函数与用法小结
2020/04/13 Javascript
Django1.3添加app提示模块不存在的解决方法
2014/08/26 Python
python学习之编写查询ip程序
2016/02/27 Python
Python读取一个目录下所有目录和文件的方法
2016/07/15 Python
Python内置模块hashlib、hmac与uuid用法分析
2018/02/12 Python
python3实现域名查询和whois查询功能
2018/06/21 Python
Python从使用线程到使用async/await的深入讲解
2018/09/16 Python
CSS3中Color的一些特性介绍
2012/05/27 HTML / CSS
html5是什么_动力节点Java学院整理
2017/07/07 HTML / CSS
独特的礼品和创新的科技产品:The Grommet
2018/02/24 全球购物
TCP/IP模型的分界线
2012/12/01 面试题
C#软件工程师英语面试题
2015/06/07 面试题
servlet面试题
2012/08/20 面试题
软件毕业生个人鉴定
2014/03/03 职场文书
文案策划专业自荐信
2014/07/07 职场文书
购房公证委托书(2014版)
2014/09/12 职场文书
北京故宫的导游词
2015/01/31 职场文书
首都博物馆观后感
2015/06/05 职场文书
聘任书格式及范文
2015/09/21 职场文书
大学生奶茶店创业计划书
2019/06/25 职场文书
JavaScript实现班级抽签小程序
2021/05/19 Javascript