了解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浏览器打印的页眉页脚设置解决方法
Dec 08 Javascript
Javascript执行效率全面总结
Nov 04 Javascript
JS脚本defer的作用示例介绍
Jan 02 Javascript
简单的js图片轮换代码(js图片轮播)
May 06 Javascript
javascript去除字符串左右两端的空格
Feb 05 Javascript
javascript DIV实现跟随鼠标移动
Mar 19 Javascript
基于socket.io+express实现多房间聊天
Mar 17 Javascript
JavaScript简单获取系统当前时间完整示例
Aug 02 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
Aug 08 Javascript
浅谈angular4生命周期钩子
Sep 05 Javascript
vue 实现axios拦截、页面跳转和token 验证
Jul 17 Javascript
在vue项目中正确使用iconfont的方法
Sep 28 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 数组二分法查找函数代码
2010/02/16 PHP
php数字运算验证码的实现代码
2015/07/30 PHP
Thinkphp 框架扩展之驱动扩展实例分析
2020/04/27 PHP
Javascript-Mozilla和IE中的一个函数直接量的问题
2007/01/09 Javascript
JavaScript Title、alt提示(Tips)实现源码解读
2010/12/12 Javascript
open 动态修改img的onclick事件示例代码
2013/11/13 Javascript
js 去除字符串第一位逗号的方法
2014/06/07 Javascript
谷歌地图打不开的解决办法
2014/08/07 Javascript
微信小程序 引用其他js文件实现代码
2017/02/22 Javascript
js移动端事件基础及常用事件库详解
2017/08/15 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
2017/08/18 Javascript
vue-cli webpack 引入jquery的方法
2018/01/10 jQuery
vue项目实战总结篇
2018/02/11 Javascript
Django+Vue跨域环境配置详解
2018/07/06 Javascript
VeeValidate 的使用场景以及配置详解
2019/01/11 Javascript
jquery css实现流程进度条
2020/03/26 jQuery
Vue组件简易模拟实现购物车
2020/12/21 Vue.js
初学python数组的处理代码
2011/01/04 Python
基于Python实现的扫雷游戏实例代码
2014/08/01 Python
用Python给文本创立向量空间模型的教程
2015/04/23 Python
Python中注释(多行注释和单行注释)的用法实例
2019/08/28 Python
Python socket非阻塞模块应用示例
2019/09/12 Python
Python Django中间件,中间件函数,全局异常处理操作示例
2019/11/08 Python
Pycharm如何运行.py文件的方法步骤
2020/03/03 Python
tensorflow 2.0模式下训练的模型转成 tf1.x 版本的pb模型实例
2020/06/22 Python
Python实现树莓派摄像头持续录像并传送到主机的步骤
2020/11/30 Python
HTML5 Canvas玩转酷炫大波浪进度图效果实例(附demo)
2016/12/14 HTML / CSS
乌克兰香水和化妆品网站:Notino.ua
2018/03/26 全球购物
大学生撤销处分思想汇报
2014/09/12 职场文书
2014乡镇班子个人对照检查材料思想汇报
2014/09/26 职场文书
房屋租赁协议书
2014/10/18 职场文书
2015年度党风廉政建设工作情况汇报
2015/01/02 职场文书
2015年副班长工作总结
2015/05/15 职场文书
公司宣传语大全
2015/07/13 职场文书
SpringBoot系列之MongoDB Aggregations用法详解
2022/02/12 MongoDB
MySQL 自动填充 create_time 和 update_time
2022/05/20 MySQL