Skip to main content
 首页 » 编程设计

JavaScript函数参数缺省值

2022年07月19日158arxive

JavaScript函数参数缺省值

本文介绍Es6中如何处理函数的缺省参数。

1. 实参与形参(Argument vs. Parameter)

通常我们不区分实参与形参(Argument vs. Parameter),形参(Parameter)是函数定义时声明的参数,而实参(Argument)是调用函数时传入的参数。

请看下面add()函数:

function add(x,y) { 
   return x + y; 
} 
  
add(100,200); 

x,y是形参,100,200是实参。

2. 函数形式参数缺省值

JavaScript中,形式参数默认缺省值为undefined,即如果不传入实参给函数,则取缺省值为undefined。请看示例:

function foo(bar) { 
    console.log(bar); 
} 
  
foo(); // undefined 

foo()函数带bar形式参数。因调用时没有传入任何实际参数,故bar的实际值为undefined
假设给bar参数设置缺省值为10,为了测试缺省值可以传入undefined

function foo(bar) { 
    bar = typeof bar !== 'undefined' ? bar : 10; 
    console.log(bar); 
} 
foo(); // 10 

上面示例没有给bar任何值,因此值为undefined。然而在函数内部检测如果值为undefined则赋值为10,因此输出10.

ES6提供更简单方法设置参数缺省值,语法如下:

function function_name(param1=value1,param2=value2,..) { 
} 

我们看到,使用=给参数设置缺省值。请看示例:

function foo(bar = 10) { 
    console.log(bar); 
} 
  
foo(); // 10 
foo(undefined); // 10 
foo(20); //20 

说明如下:

  1. 第一次函数调用,给函数 foo()的参数任何值 , 因此bar的缺省值为 10.
  2. 第二次调用, 给 foo() 函数传入undefined, 因此bar的缺省值仍为 10.
  3. 第三次调用, 给函数 foo()的参数值设置为20 , 因此bar的缺省值为 20.

3. 示例说明参数缺省值

本节通过几个示例看看设置缺省值的不同方式。

  1. 传入 undefined

下面 createDiv() 函数在文档中创建div元素,参数都带默认值:

function createDiv(height = '100px', width = '100px', border = 'solid 1px red') { 
    let div = document.createElement('div'); 
    div.style.height = height; 
    div.style.width = width; 
    div.style.border = border; 
    document.getElementsByTagName('body')[0].appendChild(div); 
    return div; 
} 

下面调用使用缺省参数:

createDiv(); 

如果想使用height和width的缺省参数,仅传入border参数。这时你需要传入undefined值给height和width:

createDiv(undefined,undefined,'solid 5px blue'); 
  1. 评估缺省值

JavaScript引擎在函数调用时评估缺省值,请看示例:

function put(toy, toyBox = []) { 
    toyBox.push(toy); 
    return toyBox; 
} 
  
console.log(put('Toy Car')); 
// -> ['Toy Car'] 
console.log(put('Teddy Bear')); 
// -> ['Teddy Bear'], not ['Toy Car','Teddy Bear'] 

该函数参数带缺省值,即函数返回结果值。

再看另一个示例:

function date(d = today()) { 
    console.log(d); 
} 
  
function today() { 
    return (new Date()).toLocaleDateString("en-US"); 
} 
  
date(); 

date() 函数带一个参数,其缺省值是today()函数的返回值。today()函数返回今天日期的字符串表示。
当声明date()函数时,today()函数还没有执行评估直到我们调用date()函数。

我们可以使用这个特性使得参数为必传参数。如果没有传入参数则抛错误:

function requiredArg() { 
   throw new Error('The argument is required'); 
} 
function add(x = requiredArg(), y = requiredArg()){ 
   return x + y; 
} 
  
add(10); // error 
add(10,20); // OK 
  1. 缺省值中使用其他形式参数

参数缺省值可以引用其他缺省参数:

function bar(x = 1, y = x, z = x + y) { 
    return x + y + z; 
} 
  
console.log(bar()); // 4 

bar函数解释:

  • y缺省值为x参数.
  • z缺省值为x和y参数之和.
  • bar() 函数返回 x, y, 和 z之和.

参数列表有其自己范围。如果引用参数没有初始化会报错:

function bar( x = y, y = 1 ) { 
    return x - y; 
} 
  
bar(10); 

错误信息:

Uncaught ReferenceError: Cannot access 'y' before initialization 
  1. 使用函数作为缺省值

我们可以使用函数返回值作为参数缺省值:

let taxRate = () => 0.1; 
let getPrice = function( price, tax = price * taxRate() ) { 
    return price + tax; 
} 
  
let fullPrice = getPrice(100); 
console.log(fullPrice); // 110 

在getPrice()函数中通过调用 taxRate() 函数获得税率作为tax参数值并计算价格。

  1. 实参(arguments)对象

arguments对象值在函数内部是实际传入参数的数量:

function foo(x, y = 1, z = 2) { 
    console.log( arguments.length ); 
    return x + y + z; 
} 
  
foo(10); // 1 
foo(10, 20); // 2 
foo(10, 20, 30); // 3 

4. 总结

本文首先介绍形参与实参,然后介绍Es6函数缺省值用法并通过几个示例说明缺省值的深入用法。希望这些知识能让你开发更加灵活的函数。


本文参考链接:https://blog.csdn.net/neweastsun/article/details/104108497