JavaScript 函数参数默认值|极客笔记

JavaScript 函数参数默认值

在 JavaScript 中，使用函数参数默认值可以使函数在调用时如果未提供某个参数，则使用预先定义的默认值。这在编写复杂的函数或者库时非常有用，可以有效地防止由于缺少参数而导致的错误。

基本语法

使用函数参数默认值非常简单，只需在定义函数时为参数赋上默认值即可。例如：

function greet(name = 'Guest') {
    console.log(`Hello, ${name}!`);
}

greet('Alice'); // 输出："Hello, Alice!"
greet(); // 输出："Hello, Guest!"

在上面的示例中，greet 函数定义了一个参数 name，并为其设置了默认值 'Guest'。当调用 greet 函数并提供参数时，会使用提供的参数值，如果不提供参数，则会使用默认值。

默认值的位置

当函数存在多个参数时，可以为其中任意一个或多个参数设置默认值，但需要注意的是，默认值只能出现在参数列表的末尾。例如：

function showMessage(text, from = 'Anonymous', to) {
    console.log(` ${from} says '$ {text}' to ${to}`);
}

showMessage('Hi!'); // 输出："Anonymous says 'Hi!' to undefined"
showMessage('Hello!', 'Alice', 'Bob'); // 输出："Alice says 'Hello!' to Bob"

在上面的示例中，showMessage 函数定义了两个参数 text 和 from，其中 from 参数设置了默认值 'Anonymous'。当调用 showMessage 函数时，如果只提供一个参数，则会使用默认值 'Anonymous'。

默认值和解构赋值

在使用对象或数组作为函数参数时，可以通过对象解构或数组解构赋值的方式设置默认值。例如：

function getUserInfo({name = 'Unknown', age = 0}) {
    console.log(`Name:  ${name}, Age:$ {age}`);
}

getUserInfo({name: 'Alice', age: 30}); // 输出："Name: Alice, Age: 30"
getUserInfo({name: 'Bob'}); // 输出："Name: Bob, Age: 0"

在上面的示例中，getUserInfo 函数接收一个对象参数，并通过对象解构赋值的方式获取 name 和 age 属性的值，并为它们设置了默认值。当调用 getUserInfo 函数并提供一个对象时，会根据对象的属性值或默认值输出用户信息。

默认值的注意事项

在使用函数参数默认值时，需要注意以下几点：

默认值在函数声明时计算，并且在调用函数且不提供参数时才生效。
默认值是惰性求值的，即只有在没有提供对应参数时才会计算默认值表达式。
默认值不会影响函数的 length 属性，即函数的参数个数不包括设置了默认值的参数。

示例代码

下面是一个使用函数参数默认值的示例代码：

function greet(name = 'Guest', message = 'Hello') {
    console.log(` ${message},$ {name}!`);
}

greet(); // 输出："Hello, Guest!"
greet('Alice'); // 输出："Hello, Alice!"
greet(undefined, 'Hi'); // 输出："Hi, Guest!"

在上面的示例中，greet 函数定义了两个参数 name 和 message，并分别设置了默认值 'Guest' 和 'Hello'。通过不同的调用方式，可以看到函数参数默认值的作用。