了解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 相关文章推荐
静态的动态续篇之来点XML
Aug 15 Javascript
JS 页面内容搜索,类似于 Ctrl+F功能的实现代码
Aug 13 Javascript
jquery struts 验证唯一标识(公用方法)
Mar 27 Javascript
jquery实现顶部向右伸缩的导航区域代码
Sep 02 Javascript
JS实现Select的option上下移动的方法
Mar 01 Javascript
让浏览器崩溃的12行JS代码(DoS攻击分析及防御)
Oct 10 Javascript
JS多物体实现缓冲运动效果示例
Dec 20 Javascript
详解用Node.js实现Restful风格webservice
Sep 29 Javascript
js实现图片粘贴上传到服务器并展示的实例
Nov 08 Javascript
Vue结合后台导入导出Excel问题详解
Feb 19 Javascript
Node.js HTTP服务器中的文件、图片上传的方法
Sep 23 Javascript
vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)
Jun 11 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基本语法总结
2014/09/06 PHP
Zend Framework教程之路由功能Zend_Controller_Router详解
2016/03/07 PHP
利用laravel搭建一个迷你博客实战教程
2017/08/13 PHP
Laravel使用模型实现like模糊查询的例子
2019/10/24 PHP
浅析Prototype的模板类 Template
2011/12/07 Javascript
JavaScript中如何通过arguments对象实现对象的重载
2014/05/12 Javascript
使用AngularJS创建单页应用的编程指引
2015/06/19 Javascript
ES6使用export和import实现模块化的方法
2018/09/10 Javascript
用node.js写一个jenkins发版脚本
2019/05/21 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
2020/07/20 Javascript
Python中的__SLOTS__属性使用示例
2015/02/18 Python
Python实现二叉搜索树
2016/02/03 Python
利用python生成一个导出数据库的bat脚本文件的方法
2016/12/30 Python
浅谈flask中的before_request与after_request
2018/01/20 Python
Python使用分布式锁的代码演示示例
2018/07/30 Python
python读取图片任意范围区域
2019/01/23 Python
使用python实现离散时间傅里叶变换的方法
2019/09/02 Python
python GUI库图形界面开发之PyQt5动态(可拖动控件大小)布局控件QSplitter详细使用方法与实例
2020/03/06 Python
python游戏开发的五个案例分享
2020/03/09 Python
详解Python的爬虫框架 Scrapy
2020/08/03 Python
Python爬取12306车次信息代码详解
2020/08/12 Python
浅谈h5自定义audio(问题及解决)
2016/08/19 HTML / CSS
努比亚手机官网:nubia
2016/10/06 全球购物
巴西最大的体育用品商城:Netshoes巴西
2016/11/29 全球购物
美国女士泳装店:Swimsuits For All
2017/03/02 全球购物
澳大利亚领先的优质葡萄酒拍卖会:Langton’s Fine Wines
2019/03/24 全球购物
志愿者活动总结
2014/04/28 职场文书
商务英语专业毕业生求职信
2014/07/06 职场文书
公司的门卫岗位职责
2014/09/09 职场文书
授权委托书(完整版)
2014/09/10 职场文书
上班时间打瞌睡检讨书
2014/09/26 职场文书
个人整改措施书面材料
2014/10/24 职场文书
职代会闭幕词
2015/01/28 职场文书
关于感恩的素材句子(38句)
2019/11/11 职场文书
Python自动化爬取天眼查数据的实现
2021/06/15 Python
正则表达式拆分url实例代码
2022/02/24 Java/Android