了解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 相关文章推荐
js中几种去掉字串左右空格的方法
Dec 25 Javascript
javascript 上下banner替换具体实现
Nov 14 Javascript
jQuery 复合选择器应用的几个例子
Sep 11 Javascript
jquery控制页面部分刷新的方法
Jun 24 Javascript
JS获取鼠标坐标位置实例分析
Jan 20 Javascript
Ionic如何创建APP项目
Jun 03 Javascript
JavaScript实现通过select标签跳转网页的方法
Sep 29 Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
Oct 31 Javascript
layui实现table加载的示例代码
Aug 14 Javascript
JavaScript高阶教程之“==”隐藏下的类型转换
Apr 11 Javascript
vue和iview实现Scroll 数据无限滚动功能
Oct 31 Javascript
JS实现移动端双指缩放和旋转方法
Dec 13 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应用提速面面观
2006/10/09 PHP
解析如何通过PHP函数获取当前运行的环境 来进行判断执行逻辑(小技巧)
2013/06/25 PHP
Laravel学习教程之路由模块
2017/08/18 PHP
PHP实现的数据对象映射模式详解
2019/03/20 PHP
Swoole实现异步投递task任务案例详解
2019/04/02 PHP
用JavaScript脚本实现Web页面信息交互
2006/10/11 Javascript
javascript中获取选中对象的类型
2007/04/02 Javascript
编写跨浏览器的javascript代码必备[js多浏览器兼容写法]
2008/10/29 Javascript
ModelDialog JavaScript模态对话框类代码
2011/04/17 Javascript
JS正则表达式大全(整理详细且实用)
2013/11/14 Javascript
jquery解析json格式数据的方法(对象、字符串)
2015/11/24 Javascript
JavaScript Promise 用法
2016/06/14 Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
2017/11/11 jQuery
深入研究React中setState源码
2017/11/17 Javascript
再谈Angular4 脏值检测(性能优化)
2018/04/23 Javascript
webpack的pitching loader详解
2019/09/23 Javascript
JavaScript生成随机验证码代码实例
2019/09/28 Javascript
基于python log取对数详解
2018/06/08 Python
Linux下python3.7.0安装教程
2018/07/30 Python
Python寻找两个有序数组的中位数实例详解
2018/12/05 Python
python selenium 弹出框处理的实现
2019/02/26 Python
Python创建字典的八种方式
2019/02/27 Python
对python3.4 字符串转16进制的实例详解
2019/06/12 Python
python argparse传入布尔参数false不生效的解决
2020/04/20 Python
python3.6使用SMTP协议发送邮件
2020/05/20 Python
python speech模块的使用方法
2020/09/09 Python
python BeautifulSoup库的安装与使用
2020/12/17 Python
详解基于 Canvas 手撸一个六边形能力图
2019/09/02 HTML / CSS
浅谈three.js中的needsUpdate的应用
2012/11/12 HTML / CSS
美国领先的低折扣旅行网站:Hotwire
2019/01/19 全球购物
综合素质的自我鉴定
2013/10/07 职场文书
施工资料员岗位职责
2014/01/06 职场文书
教师学习八项规定六项禁令思想汇报
2014/09/27 职场文书
北京颐和园导游词
2015/01/30 职场文书
导游词之无锡丝业博物馆
2019/11/12 职场文书
windows10 家庭版下FTP服务器搭建教程
2022/08/05 Servers