JavaScript 默认参数入门指南

概要：在本教程中，您将学习如何在 ES6 中处理 JavaScript 默认参数。

TL;DR

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

say(); // 'Hi'
say('Hello') // 'Hello'Code language: JavaScript (javascript)

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

在 JavaScript 中，默认函数参数允许您在没有值或 undefined 传递到函数时，将命名参数初始化为默认值。

参数与实参

有时，您可以互换使用参数和实参这两个术语。但是，根据定义，参数是您在函数声明中指定的，而实参是您传递给函数的值。

考虑以下 add() 函数

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

add(100,200);Code language: JavaScript (javascript)

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

为函数设置 JavaScript 默认参数

在 JavaScript 中，参数的默认值为 undefined。这意味着如果您没有将实参传递到函数中，其参数将具有 undefined 的默认值。

请参见以下示例

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

say(); // undefinedCode language: JavaScript (javascript)

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

假设您希望将 message 参数赋予默认值 10。

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

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

在此示例中，我们没有将任何值传递到 say() 函数中。因此，message 实参的默认值为 undefined。在函数内部，我们将 message 变量重新分配为 Hi 字符串。

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

function fn(param1=default1, param2=default2,..) {
}Code language: JavaScript (javascript)

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

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

say(); // 'Hi'
say(undefined); // 'Hi'
say('Hello'); // 'Hello'Code language: JavaScript (javascript)

工作原理。

在第一次函数调用中，我们没有将任何实参传递到 say() 函数中，因此 message 参数采用了默认值 'Hi'。
在第二次函数调用中，我们将 undefined 传递到了 say() 函数中，因此 message 参数也采用了默认值 'Hi'。
在第三次函数调用中，我们将 'Hello' 字符串传递到 say() 函数中，因此 message 参数采用了字符串 'Hello' 作为默认值。

更多 JavaScript 默认参数示例

让我们看几个更详细的示例，以了解设置函数参数默认值的一些可用选项。

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.body.appendChild(div);
    return div;
}Code language: JavaScript (javascript)

以下示例没有将任何实参传递到函数中，因此 createDiv() 函数使用参数的默认值。

createDiv();

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

createDiv(undefined,undefined,'solid 5px blue');Code language: JavaScript (javascript)

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']Code language: JavaScript (javascript)

参数可以取一个默认值，该值是函数的返回值。

考虑以下示例

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

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); // OKCode language: JavaScript (javascript)

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

您可以将参数分配一个默认值，该值引用其他默认参数，如以下示例所示

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

console.log(add()); // 4Code language: JavaScript (javascript)

在 add() 函数中

y 的默认值设置为 x 参数。
z 的默认值是 x 和 y 的总和
add() 函数返回 x、y 和 z 的总和。

参数列表似乎具有自己的作用域。如果您引用尚未初始化的参数，您将收到错误。例如

function subtract( x = y, y = 1 ) {
    return x - y;
}
subtract(10);Code language: JavaScript (javascript)

错误消息

Uncaught ReferenceError: Cannot access 'y' before initializationCode language: JavaScript (javascript)

使用函数

您可以使用函数的返回值作为参数的默认值。例如

let taxRate = () => 0.1;
let getPrice = function( price, tax = price * taxRate() ) {
    return price + tax;
}

let fullPrice = getPrice(100);
console.log(fullPrice); // 110Code language: JavaScript (javascript)

在 getPrice() 函数中，我们调用了 taxRate() 函数以获取税率，并使用此税率从价格中计算税额。

arguments 对象

函数内部 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); // 3Code language: JavaScript (javascript)

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

本教程是否有帮助？