了解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 相关文章推荐
Jsonp 跨域的原理以及Jquery的解决方案
May 18 Javascript
js读取本地excel文档数据的代码
Nov 11 Javascript
自定义jQuery选项卡插件实例
Mar 27 Javascript
jquery制作弹窗提示窗口代码分享
Mar 02 Javascript
Jquery Post处理后不进入回调的原因及解决方法
Jul 15 Javascript
浅谈使用MVC模式进行JavaScript程序开发
Nov 10 Javascript
Bootstrap入门书籍之(零)Bootstrap简介
Feb 17 Javascript
js 发布订阅模式的实例讲解
Sep 10 Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
Mar 05 Javascript
关于JavaScript中高阶函数的魅力详解
Sep 07 Javascript
jQuery cookie的公共方法封装和使用示例
Jun 01 jQuery
js实现带有动画的返回顶部
Aug 09 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正则preg_replace_callback函数用法实例
2015/06/01 PHP
header与缓冲区之间的深层次分析
2016/07/30 PHP
Javascript 篱式条件判断
2008/08/22 Javascript
JQuery与iframe交互实现代码
2009/12/24 Javascript
深入理解JavaScript系列(16) 闭包(Closures)
2012/04/12 Javascript
jquery实现对联广告的方法
2015/02/05 Javascript
js实现iframe框架取值的方法(兼容IE,firefox,chrome等)
2015/11/26 Javascript
JavaScript必知必会(三) String .的方法来自何方
2016/06/08 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
2016/11/26 Javascript
JavaScript之class继承_动力节点Java学院整理
2017/07/03 Javascript
浅谈Node异步编程的机制
2017/10/18 Javascript
Vue-cli@3.0 插件系统简析
2018/09/05 Javascript
vue.js+element-ui动态配置菜单的实例
2018/09/07 Javascript
详解如何用webpack4从零开始构建react开发环境
2019/01/27 Javascript
jQuery中DOM常见操作实例小结
2019/08/01 jQuery
vue的$http的get请求要加上params操作
2020/11/12 Javascript
vue自定义组件实现双向绑定
2021/01/13 Vue.js
[44:40]KG vs LGD 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python启动办公软件进程(word、excel、ppt、以及wps的et、wps、wpp)
2009/04/09 Python
python中的代码编码格式转换问题
2015/06/10 Python
python使用正则表达式替换匹配成功的组
2017/11/17 Python
Python将多个excel表格合并为一个表格
2021/02/22 Python
8种用Python实现线性回归的方法对比详解
2019/07/10 Python
python 根据字典的键值进行排序的方法
2019/07/24 Python
Django视图扩展类知识点详解
2019/10/25 Python
使用 Python 读取电子表格中的数据实例详解
2020/04/17 Python
Django正则URL匹配实现流程解析
2020/11/13 Python
pandas按照列的值排序(某一列或者多列)
2020/12/13 Python
一款恶搞头像特效的制作过程 利用css3和jquery
2014/11/21 HTML / CSS
html5菜单折纸效果
2014/04/22 HTML / CSS
使用canvas生成含有微信头像的邀请海报没有微信头像问题
2019/10/29 HTML / CSS
应用数学自荐书范文
2013/11/24 职场文书
班级活动策划书
2014/02/06 职场文书
公关活动策划方案
2014/05/25 职场文书
总账会计岗位职责
2015/04/02 职场文书
人生遥控器观后感
2015/06/11 职场文书