了解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 核心函数以及jQuery对象
Mar 23 Javascript
js动态创建标签示例代码
Jun 09 Javascript
javascript数组操作方法小结和3个属性详细介绍
Jul 05 Javascript
JavaScript中发布/订阅模式的简单实例
Nov 05 Javascript
JavaScript生成SQL查询表单的方法
Aug 13 Javascript
一个例子轻松学会Vue.js
Jan 02 Javascript
微信小程序 MD5加密登录密码详解及实例代码
Jan 12 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
Mar 02 Javascript
基于jQuery实现一个marquee无缝滚动的插件
Mar 09 Javascript
详解AngularJs HTTP响应拦截器实现登陆、权限校验
Apr 11 Javascript
JS闭包经典实例详解
Dec 20 Javascript
vue 使用lodash实现对象数组深拷贝操作
Sep 10 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
国王的咖啡这么大来头,名字的由来是什么
2021/03/03 咖啡文化
php获取地址栏信息的代码
2008/10/08 PHP
php获取bing每日壁纸示例分享
2014/02/25 PHP
PHP使用mkdir创建多级目录的方法
2015/12/22 PHP
JQuery下关于$.Ready()的分析
2009/12/13 Javascript
jQuery.each()用法分享
2012/07/31 Javascript
javascript级联下拉列表实例代码(自写)
2013/05/10 Javascript
JS 实现列表与多选框选择附预览动画
2014/10/29 Javascript
IE8 内存泄露(内存一直增长 )的原因及解决办法
2016/04/06 Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
2016/05/03 Javascript
深入浅析JavaScript函数前面的加号和叹号
2016/07/09 Javascript
JavaScript中数据类型转换总结
2016/12/25 Javascript
JavaScript canvas实现围绕旋转动画
2017/11/18 Javascript
利用js实现前后台传送Json的示例代码
2018/03/29 Javascript
详解小程序原生使用ES7 async/await语法
2018/08/06 Javascript
VUE实现移动端列表筛选功能
2019/08/23 Javascript
[07:55]2014DOTA2 TI正赛第三日 VG上演推进荣耀DKEG告别
2014/07/21 DOTA
python 简易计算器程序,代码就几行
2009/08/29 Python
python通过文件头判断文件类型
2015/10/30 Python
python的Crypto模块实现AES加密实例代码
2018/01/22 Python
Python多线程扫描端口代码示例
2018/02/09 Python
Python中跳台阶、变态跳台阶与矩形覆盖问题的解决方法
2018/05/19 Python
对python中的 os.mkdir和os.mkdirs详解
2018/10/16 Python
对Python的zip函数妙用,旋转矩阵详解
2018/12/13 Python
python实现一个简单的ping工具方法
2019/01/31 Python
python的slice notation的特殊用法详解
2019/12/27 Python
selenium自动化测试入门实战
2020/12/21 Python
柯基袜:Corgi Socks
2017/01/26 全球购物
俄罗斯第一家篮球店:StreetBall
2020/07/30 全球购物
若干个Java基础面试题
2015/05/19 面试题
连锁酒店店长职责范本
2014/02/13 职场文书
办公设备采购方案
2014/03/16 职场文书
乡村文明行动实施方案
2014/03/29 职场文书
幼儿教师师德演讲稿
2014/05/06 职场文书
大学生暑期社会实践证明范本
2014/10/24 职场文书
毕业赠语大全
2015/06/23 职场文书