了解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 相关文章推荐
JavaScript实现页面滚动图片加载(仿lazyload效果)
Jul 22 Javascript
通过Javascript将数据导出到外部Excel文档的函数代码
Jun 15 Javascript
不到30行JS代码实现Excel表格的方法
Nov 15 Javascript
js与css实现弹出层覆盖整个页面的方法
Dec 13 Javascript
javascript实现简单的进度条
Jul 02 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
Jul 08 Javascript
Bootstrap table简单使用总结
Feb 15 Javascript
使用jQuery实现购物车结算功能
Aug 15 jQuery
浅谈angular.copy() 深拷贝
Sep 14 Javascript
AngularJS创建一个上传照片的指令实例代码
Feb 24 Javascript
vue 表单之通过v-model绑定单选按钮radio
May 13 Javascript
javascript中Set、Map、WeakSet、WeakMap区别
Dec 24 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
使用 eAccelerator加速PHP代码的目的
2007/03/16 PHP
使用PHP下载CSS文件中的图片的代码
2013/09/24 PHP
php解析xml提示Invalid byte 1 of 1-byte UTF-8 sequence错误的处理方法
2013/11/14 PHP
php微信开发之自定义菜单完整流程
2016/10/08 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
Js获取下拉框选定项的值和文本的实现代码
2014/02/26 Javascript
Bootstrap Fileinput文件上传组件用法详解
2016/05/10 Javascript
JS关闭窗口时产生的事件及用法示例
2016/08/20 Javascript
总结十个Angular.js由浅入深的面试问题
2016/08/26 Javascript
vue自定义指令之面板拖拽的实现
2019/04/14 Javascript
Vue注册组件命名时不能用大写的原因浅析
2019/04/25 Javascript
关于element-ui表单中限制输入纯数字的解决方式
2020/09/08 Javascript
vue实践---vue不依赖外部资源实现简单多语操作
2020/09/21 Javascript
Python代码的打包与发布详解
2014/07/30 Python
理解Python中的With语句
2015/02/02 Python
Python base64编码解码实例
2015/06/21 Python
在Windows系统上搭建Nginx+Python+MySQL环境的教程
2015/12/25 Python
Python可变参数用法实例分析
2017/04/02 Python
Python实现获取照片拍摄日期并重命名的方法
2017/09/30 Python
Python实现线程状态监测简单示例
2018/03/28 Python
Python3.5多进程原理与用法实例分析
2019/04/05 Python
pyqt 实现为长内容添加滑轮 scrollArea
2019/06/19 Python
详解Python3迁移接口变化采坑记
2019/10/11 Python
使用apiDoc实现python接口文档编写
2019/11/19 Python
Python调用scp向服务器上传文件示例
2019/12/22 Python
解决import tensorflow as tf 出错的原因
2020/04/16 Python
如何使用Cython对python代码进行加密
2020/07/08 Python
Currentbody德国站:健康与美容技术专家
2020/04/05 全球购物
EJB需直接实现它的业务接口或Home接口吗,请简述理由
2016/11/23 面试题
硕士研究生自我鉴定
2013/11/08 职场文书
会计毕业生自荐信
2013/11/21 职场文书
赢在执行观后感
2015/06/16 职场文书
你对自己的信用报告有过了解吗?
2019/07/09 职场文书
基于nginx实现上游服务器动态自动上下线无需reload的实现方法
2021/03/31 Servers
Unicode中的CJK(中日韩统一表意文字)字符小结
2021/12/06 HTML / CSS