了解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 相关文章推荐
如果文字过长,则将过长的部分变成省略号显示
Jun 26 Javascript
jquery中append()与appendto()用法分析
Nov 14 Javascript
在Javascript中处理数组之toSource()方法的使用
Jun 09 Javascript
基于jQuery实现左右图片轮播(原理通用)
Dec 24 Javascript
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
Feb 18 Javascript
php基于redis处理session的方法
Mar 14 Javascript
jQuery实现鼠标滑过图片移动特效
Dec 08 Javascript
vue2.0实现导航菜单切换效果
May 08 Javascript
React Native AsyncStorage本地存储工具类
Oct 24 Javascript
详述 Sublime Text 打开 GBK 格式中文乱码的解决方法
Oct 26 Javascript
微信小程序实现笑脸评分功能
Nov 03 Javascript
js、jquery实现列表模糊搜索功能过程解析
Mar 27 jQuery
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 xml文件操作代码(一)
2009/03/20 PHP
PHP下escape解码函数的实现方法
2010/08/08 PHP
php验证session无效的解决方法
2014/11/04 PHP
PHP中使用OpenSSL生成证书及加密解密
2017/02/05 PHP
php7 新增功能实例总结
2020/05/25 PHP
javascript 播放器 控制
2007/01/22 Javascript
js 使用form表单select类实现级联菜单效果
2012/12/19 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
2014/06/22 Javascript
javascript中setTimeout使用指南
2015/07/26 Javascript
Javascript实现网络监测的方法
2015/07/31 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
2016/04/19 Javascript
Three.js学习之Lamber材质和Phong材质
2016/08/04 Javascript
浅析$(function) ready和onload 的区别
2016/09/03 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
2016/10/10 Javascript
JS批量替换内容中关键词为超链接
2017/02/20 Javascript
移动设备手势事件库Touch.js使用详解
2017/08/18 Javascript
深入理解Angular4订阅(Subscribe)与取消
2017/11/22 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
2018/06/20 Javascript
javascript实现简单打字游戏
2019/10/29 Javascript
JS实现动态无缝轮播
2020/01/11 Javascript
JQuery复选框全选效果如何实现
2020/05/08 jQuery
python 判断一个进程是否存在
2009/04/09 Python
python对象及面向对象技术详解
2016/07/19 Python
利用python实现简单的邮件发送客户端示例
2017/12/23 Python
Python将二维列表list的数据输出(TXT,Excel)
2020/04/23 Python
Java多线程实现四种方式原理详解
2020/06/02 Python
灵活运用CSS3特性绘制简易版围棋效果
2016/09/28 HTML / CSS
英国专业美容产品在线:Mylee(从指甲到脱毛)
2020/07/06 全球购物
户外婚礼策划方案
2014/02/08 职场文书
信息管理与信息系统专业求职信
2014/06/21 职场文书
2015年暑期实践报告范文
2015/07/13 职场文书
小学班主任心得体会
2016/01/07 职场文书
教师外出学习心得体会
2016/01/18 职场文书
MySQL如何构建数据表索引
2021/05/13 MySQL
详解SpringBoot异常处理流程及原理
2021/06/21 Java/Android
不负正版帝国之名 《重返帝国》引领SLG手游制作新的标杆
2022/04/07 其他游戏