交流群:462197261站长百科站长论坛热门标签收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
点击这里给我发消息
  • 当前位置:
  • 了解JavaScript函数中的默认参数

    前言

    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框架)。

    重用默认参数

    默认参数可供之后的默认参数使用。请看下列代码:

    function foo(num1 = 9, num2 = num1 + 8){
    console.log(num2);
    }
    foo();

    在上面的代码中,使用num1的默认值来计算num2的默认值。调用函数foo时将得到以下输出:

    结论

    JavaScript默认参数在编写函数时非常有用。在调用函数时,如果缺少参数,则默认参数功能允许你为函数参数分配默认值,而不是将其定义为undefined。

    英文原文:Easy JavaScript Part 3: What Is a Default Parameter in a Function?

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持北冥有鱼。

    您可能感兴趣的文章:

    • js中对函数设置默认参数值的3种方法
    • Javascript中的默认参数详解
    • Javascript中设置默认参数值示例

    广而告之:
    热门推荐:
    JS获取父节点方法

    如何获取要更新的元素,是首先要解决的问题。令人欣慰的是,使用JavaScript获取节点的方法有很多种,这里简单做一下总结(以下方法在IE7和Firefox2.0.0.11测试通过):        1. 通过顶层document节点获取:    ···

    在smatr原则的指导下,制定可行性sep优化目标

    搜索引擎优化是一项从浅到深的工作。进入这个行业很容易。另一件事是真正的目标是获得潜在的关键字流量。考虑到成熟的SEO项目,我们通常需要使用智能原则来设定相关的团队目标。  什么是智能原则?智能SEO如何设定目标?  简单理解:SMART原则主要用于衡···

    Bootstrap标签页(Tab)插件切换echarts不显示问题的解决

    问题: 1.  在echarts跟bootstrap选项卡整合的时候,默认第一个选中选项卡可以正常加载echarts图表,但是切换其他选项的时候不能渲染出其他选项卡echarts图表。 2.  echarts自适应怎么实现? 解决办法: //解决tab切换不显示问题 在加载窗口后重新渲染。 $('a[data···

    使用jQuery实现的网页版的个人简历(可换肤)

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style typ···

    JavaScript两个变量交换值的实现方法

    概要 本文主要描述,如何不使用中间值,将两个变量的值进行交换。 一、普通做法 var a = 1, b = 2, tmp; tmp = a; a = b; b = tmp; 普通的做法就是声明多一个临时变量tmp,进行数据交换过程中的缓存。这样的做法直观,易懂。但是,会增加内存的使用。 二、算术运算 var a ···

    JavaScript 学习笔记(十六) js事件

    回顾 事件对象里包含三个方面的信息····回看上一篇内容! 事件对象里的属性和方法,主要是鼠标和键盘的信息。 1. 获取事件类型 事件对象属性type 2. 获取按键代码 事件对象属性keyCode:回车为13,空格为32,后退键为8 3. 检测Shift、Alt、Ctrl键 事件对象属性是···

    浏览器常用高宽的jquery插件

    复制代码 代码如下: (function($) { /** * 取得浏览器视图的宽度 */ $.viewWidth=function(){ var w = 0, D=document; if( D.documentElement && D.documentElement.clientWidth ) { w = D.documentElement.clientWidth; } else if( D.body && D.body.cl···

    apache php模块整合操作指南

    apache的版本: httpd-2.2.21-win32-x86-no_ssl php的版本: php-5[1].3.8-Win32-VC9-x86 (一) 准备工作 1.先找在D:/amp/php中找到php.ini-development这个文件,然后把它改成php.ini这个文件名 2.用记事本,或editplus将其打开 (二)操作步骤: 1.告诉php所用的扩展模块···

    详解利用Angular实现多团队模块化SPA开发框架

    0、前言 当一个公司有多个开发团队时,我们可能会遇到这样一些问题: 1.技术选项杂乱,大家各玩各 2.业务重复度高,各种通用api,登录注销,权限管理都需要重复实现(甚至一个团队都需要重复实现) 3.业务壁垒,业务之间的互通变得比较麻烦 4.部署方式复杂,多个域名(或IP地···

    Discuz!插件:自动隐藏帖子第1/2页

    前言   应一位网友要求开卷工作室制作了这个自动隐藏帖子的插件,主要用途是无需手动添加 [hide] 代码,则自动隐藏所有发布的帖子内容,会员需要回复后才可以浏览该帖。这想法相当不错,要实现这一功能也不很难,所以就帮忙做了一个出来。插件提供两种自动隐···