了解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 相关文章推荐
判断多个input type=file是否有已经选择好文件的代码
May 23 Javascript
jquery ready(fn)事件使用介绍
Aug 21 Javascript
使用简洁的jQuery方法实现隔行换色功能
Jan 02 Javascript
jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
Oct 23 Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
Jan 21 Javascript
自动完成的搜索框javascript实现
Feb 26 Javascript
详解jQuery事件
Jan 13 Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
Mar 15 Javascript
mui框架 页面无法滚动的解决方法(推荐)
Jan 25 Javascript
实例讲解JavaScript 计时事件
Jul 04 Javascript
vue实现简单数据双向绑定
Apr 28 Vue.js
JavaScript实现队列结构过程
Dec 06 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
PHP实现获取文件后缀名的几种常用方法
2015/08/08 PHP
windows平台中配置nginx+php环境
2015/12/06 PHP
CodeIgniter钩子用法实例详解
2016/01/20 PHP
浅析return false的正确使用
2013/11/04 Javascript
JS计算网页停留时间代码
2014/04/28 Javascript
jQuery插件expander实现图片翻转特效
2015/05/21 Javascript
JavaScript中getUTCSeconds()方法的使用详解
2015/06/11 Javascript
JS实现换肤功能的方法实例详解
2019/01/30 Javascript
mpvue全局引入sass文件的方法步骤
2019/03/06 Javascript
深入了解响应式React Native Echarts组件
2019/05/29 Javascript
基于JavaScript获取base64图片大小
2019/10/18 Javascript
微信小程序点击view动态添加样式过程解析
2020/01/21 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
2020/02/06 Javascript
Vue+tracking.js 实现前端人脸检测功能
2020/04/16 Javascript
[01:00:13]完美世界DOTA2联赛 LBZS vs Forest 第一场 11.07
2020/11/09 DOTA
Python中urllib2模块的8个使用细节分享
2015/01/01 Python
Python最基本的数据类型以及对元组的介绍
2015/04/14 Python
Django 路由控制的实现
2019/07/17 Python
Python使用Tkinter实现转盘抽奖器的步骤详解
2020/01/06 Python
celery在python爬虫中定时操作实例讲解
2020/11/27 Python
css3通过scale()、rotate()实现放大、旋转
2020/03/19 HTML / CSS
优秀大学生的自我评价
2014/01/16 职场文书
蛋糕店的商业计划书范文
2014/01/27 职场文书
乡镇消防工作实施方案
2014/03/27 职场文书
禁毒宣传活动总结
2014/08/26 职场文书
最美家庭活动方案
2014/08/31 职场文书
医院护士见习期自我鉴定
2014/09/15 职场文书
2014年体检中心工作总结
2014/12/23 职场文书
好媳妇事迹材料
2014/12/24 职场文书
教师师德表现自我评价
2015/03/05 职场文书
幼儿园班级工作总结2015
2015/05/25 职场文书
新教师教学工作总结
2015/08/12 职场文书
商业计划书范文
2019/04/24 职场文书
vue backtop组件的实现完整代码
2021/04/07 Vue.js
Python基本的内置数据类型及使用方法
2022/04/13 Python
IDEA中sout快捷键无效问题的解决方法
2022/07/23 Java/Android