【ES6 教程】第一章 新的ES6语法04—如何设置函数参数的默认值

英文 | https://www.javascripttutorial.net

翻译 | 杨小爱

在本节教程中，我们将学习如何在 ES6 中处理 JavaScript 默认参数。

TL;DR

function say(message='Hi') {
    console.log(message);
}


say(); // 'Hi'
say('Hello') // 'Hello'

say() 函数中消息参数的默认值为'Hi'。

在 JavaScript 中，默认函数参数允许我们在没有值或undefined传递给函数的情况下，使用默认值初始化命名参数。

Arguments vs. Parameters

有时，我们可以互换使用术语Arguments和Parameters。但是，根据定义，Parameters是我们在函数声明中指定的内容，而Arguments是我们传递给函数的内容。

考虑以下 add() 函数：

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


add(100,200);

在本例中，x 和 y 是 add() 函数的参数，传递给 add() 函数的值 100 和 200 是参数。

为函数设置 JavaScript 默认参数

在 JavaScript 中，参数的默认值为 undefined。这意味着如果我们不将参数传递给函数，它的参数将具有 undefined 的默认值。

请参见以下示例：

function say(message) {
    console.log(message);
}


say(); // undefined

say() 函数接受 message 参数。因为我们没有将任何参数传递给 say() 函数，所以 message 参数的值是undefined。

假设我们想给 message 参数一个默认值 10。

实现此目的的典型方法是测试参数值并在undefined时，使用三元运算符分配默认值：

function say(message) {
    message = typeof message !== 'undefined' ? message : 'Hi';
    console.log(message);
}
say(); // 'Hi'

在这个例子中，我们没有将任何值传递给 say() 函数。因此，消息参数的默认值是undefined。在函数内部，我们为message变量重新分配了 Hi 字符串。

ES6 为我们提供了一种更简单的方法来设置函数参数的默认值，如下所示：

function fn(param1=default1, param2=default2,..) {
}

在上面的语法中，我们使用赋值运算符 (=) 和参数名称后的默认值来设置该参数的默认值。例如：

function say(message='Hi') {
    console.log(message);
}


say(); // 'Hi'
say(undefined); // 'Hi'
say('Hello'); // 'Hello'

程序怎么运作

• 在第一个函数调用中，我们没有将任何参数传递给 say() 函数，因此，message参数采用默认值“Hi”。

• 在第二个函数调用中，我们将 undefined 传递给 say() 函数，因此 message 参数也采用了默认值“Hi”。

• 在第三个函数调用中，我们将 'Hello' 字符串传递给 say() 函数，因此 message 参数将字符串 'Hello' 作为默认值。

更多 JavaScript 默认参数示例

让我们看一些更多的例子来了解一些用于设置函数参数默认值的可用选项。

1) 传递未定义的参数

以下 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.body.appendChild(div);
    return div;
}

以下不向函数传递任何参数，因此 createDiv() 函数使用参数的默认值。

createDiv();

假设我们要使用默认值作为高度和宽度参数以及特定的边框样式。在这种情况下，我们需要将undefined值传递给前两个参数，如下所示：

createDiv(undefined,undefined,'solid 5px blue');

2) 评估默认参数

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

3) 在默认值中使用其他参数

我们可以为参数分配一个引用其他默认参数的默认值，如以下示例所示：

function add(x = 1, y = x, z = x + y) {
    return x + y + z;
}


console.log(add()); // 4

在 add() 函数中：

• y 的默认值设置为 x 参数。

• z 的默认值是 x 和 y 的和

• add() 函数返回 x、y 和 z 的总和。

参数列表似乎有自己的范围。如果引用尚未初始化的参数，则会报错。例如：

function subtract( x = y, y = 1 ) {
    return x - y;
}
subtract(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() 函数来获取税率，并使用这个税率从价格中计算出税额。

参数对象

函数内部参数对象的值arguments是我们传递给函数的实际参数的数量。例如：

function add(x, y = 1, z = 2) {
    console.log( arguments.length );
    return x + y + z;
}


add(10); // 1
add(10, 20); // 2
add(10, 20, 30); // 3

现在，我们应该了解了 JavaScript 默认函数参数以及如何有效地使用它们了。

总结

以上就是本节的全部内容，通过这节的学习，我们知道了如何设置函数参数的默认值，如果还有不了解的朋友，请再认真阅读一遍。

推荐阅读

【ES6 教程】第一章 新的ES6语法01—let：使用let关键字声明块范围的变量

【ES6 教程】第一章 新的ES6语法02—var 和 let 的区别

学习更多技能

请点击下方公众号