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
说明如下：
- 第一次函数调用,给函数 foo()的参数任何值 , 因此bar的缺省值为 10.
- 第二次调用, 给 foo() 函数传入
undefined, 因此bar的缺省值仍为 10. - 第三次调用, 给函数 foo()的参数值设置为20 , 因此bar的缺省值为 20.
3. 示例说明参数缺省值
本节通过几个示例看看设置缺省值的不同方式。
- 传入 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');
- 评估缺省值
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
- 缺省值中使用其他形式参数
参数缺省值可以引用其他缺省参数：
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
- 使用函数作为缺省值
我们可以使用函数返回值作为参数缺省值：
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参数值并计算价格。
- 实参(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函数缺省值用法并通过几个示例说明缺省值的深入用法。希望这些知识能让你开发更加灵活的函数。
