了解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 相关文章推荐
跨浏览器开发经验总结(三)   警惕“IE依赖综合症”
May 13 Javascript
ajax上传时参数提交不更新等相关问题
Dec 11 Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
Jun 16 Javascript
JavaScript中的关联数组问题
Mar 04 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
May 18 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
May 28 Javascript
基于JavaScript实现鼠标向下滑动加载div的代码
Aug 31 Javascript
浏览器事件循环与vue nextTicket的实现
Apr 16 Javascript
详解JS深拷贝与浅拷贝
Aug 04 Javascript
Vant 中的Toast设置全局的延迟时间操作
Nov 04 Javascript
vue+Element-ui实现登录注册表单
Nov 17 Javascript
ant design pro中可控的筛选和排序实例
Nov 17 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
对盗链说再见...
2006/10/09 PHP
PHP 生成的XML以FLASH获取为乱码终极解决
2009/08/07 PHP
php实现的替换敏感字符串类实例
2014/09/22 PHP
php生成验证码,缩略图及水印图的类分享
2016/04/07 PHP
Prototype RegExp对象 学习
2009/07/19 Javascript
JQuery 弹出框定位实现方法
2010/12/02 Javascript
JS字符串拼接在ie中都报错的解决方法
2014/03/27 Javascript
详解JavaScript操作HTML DOM的基本方式
2015/10/21 Javascript
javascript检测flash插件是否被禁用的方法
2016/01/14 Javascript
详解JavaScript中Hash Map映射结构的实现
2016/05/21 Javascript
基于BootStrap环境写jQuery tabs插件
2016/07/12 Javascript
微信小程序(六):列表上拉加载下拉刷新示例
2017/01/13 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
2017/02/19 Javascript
基于Bootstrap的标签页组件及bootstrap-tab使用说明
2017/07/25 Javascript
angularJs-$http实现百度搜索时的动态下拉框示例
2018/02/27 Javascript
通过webpack引入第三方库的方法
2018/07/20 Javascript
微信小程序实现卡片左右滑动效果的示例代码
2019/05/01 Javascript
JavaScript enum枚举类型定义及使用方法
2020/05/15 Javascript
JavaScript 常见的继承方式汇总
2020/09/17 Javascript
[01:27:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第一场 1月24日
2021/03/11 DOTA
python处理文本文件并生成指定格式的文件
2014/07/31 Python
python实现2048小游戏
2015/03/30 Python
Django中对通过测试的用户进行限制访问的方法
2015/07/23 Python
python中input()与raw_input()的区别分析
2016/02/27 Python
python snownlp情感分析简易demo(分享)
2017/06/04 Python
Numpy中矩阵matrix读取一列的方法及数组和矩阵的相互转换实例
2018/07/02 Python
详解python:time模块用法
2019/03/25 Python
我用Python抓取了7000 多本电子书案例详解
2019/03/25 Python
Python正则表达式实现简易计算器功能示例
2019/05/07 Python
django2.2 和 PyMySQL版本兼容问题
2020/02/17 Python
使用CSS3制作版头动画效果
2020/12/24 HTML / CSS
城野医生官方海外旗舰店:风靡亚洲毛孔收敛水
2018/04/26 全球购物
Pedro官网:新加坡时尚品牌
2019/08/27 全球购物
工厂会计员职责
2014/02/06 职场文书
技术比武方案
2014/05/19 职场文书
高中生军训感言
2015/08/01 职场文书