了解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 相关文章推荐
jQuery AnythingSlider滑动效果插件
Feb 07 Javascript
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
Oct 28 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
Nov 18 Javascript
浅析js绑定事件的常用方法
May 15 Javascript
web.js.字符串与正则表达式操作
May 13 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
Nov 27 Javascript
JS实现生成由字母与数字组合的随机字符串功能详解
May 25 Javascript
基于Bootstrap下拉框插件bootstrap-select使用方法详解
Aug 07 Javascript
webpack 静态资源集中输出的方法示例
Nov 09 Javascript
vue实现简单图片上传
Jun 30 Javascript
在Vue中使用Viser说明(基于AntV-G2可视化引擎)
Oct 28 Javascript
JavaScript实现滑块验证解锁
Jan 07 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读取文件内容的三种可行方法示例介绍
2014/02/08 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
权威JavaScript 中的内存泄露模式
2007/08/13 Javascript
在IE和VB中支持png图片透明效果的实现方法(vb源码打包)
2011/04/01 Javascript
js图片延迟加载的实现方法及思路
2013/07/22 Javascript
jQuery焦点图切换特效插件封装实例
2013/08/18 Javascript
jquery如何实现锚点链接之间的平滑滚动
2013/12/02 Javascript
jquery判断元素的子元素是否存在的示例代码
2014/02/04 Javascript
使用jquery实现IE下按backspace相当于返回操作
2014/03/18 Javascript
基于javascript代码实现通过点击图片显示原图片
2015/11/29 Javascript
JavaScript为事件句柄绑定监听函数实例详解
2015/12/15 Javascript
基于jquery实现瀑布流布局
2020/06/28 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
2016/02/19 Javascript
Bootstrap每天必学之按钮(Button)插件
2016/04/25 Javascript
Javascript的比较汇总
2016/07/25 Javascript
js转html实体的方法
2016/09/27 Javascript
JavaScript闭包和范围实例详解
2016/12/19 Javascript
JavaScript函数式编程(Functional Programming)纯函数用法分析
2019/05/22 Javascript
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
2019/07/22 Javascript
vue项目强制清除页面缓存的例子
2019/11/06 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
2020/06/04 Javascript
vue3.0实现点击切换验证码(组件)及校验
2020/11/18 Vue.js
[00:32]2018DOTA2亚洲邀请赛Secret出场
2018/04/03 DOTA
python基于phantomjs实现导入图片
2016/05/13 Python
Python中set与frozenset方法和区别详解
2016/05/23 Python
Python对列表中的各项进行关联详解
2017/08/15 Python
Python编程实现蚁群算法详解
2017/11/13 Python
阿里云ECS服务器部署django的方法
2019/08/29 Python
Pycharm 2020年最新激活码(亲测有效)
2020/09/18 Python
施华洛世奇韩国官网:SWAROVSKI韩国
2018/06/05 全球购物
高中生自我鉴定范文
2013/10/30 职场文书
《会变的花树叶》教学反思
2014/02/10 职场文书
2014年学校教学工作总结
2014/12/06 职场文书
检讨书怎么写?
2019/06/21 职场文书
读《皮囊》有感:理解是对他人的最大的善举
2019/11/14 职场文书
mysql序号rownum行号实现方式
2022/12/24 MySQL