JavaScript 默认函数参数
本文介绍了 JavaScript 默认函数参数，允许使用默认值初始化命名参数（如果未传递实际参数或传递 undefined）。我们将学习命名参数和实际参数之间的区别以及它们的使用。
实际参数是调用者传递给函数的实际值。命名参数使用实际参数的名称。这些名称与函数定义中的形式参数相关联。
实际参数在函数体内标记。命名参数的顺序无关紧要，只要它们被正确标记即可。
JavaScript 默认函数参数
在下面的代码中，如果在调用 sum() 函数时没有传递任何值（或传递了 undefined），num2 的值将是二 (2)。
function sum(num1, num2 = 2) {
return num1 + num2;
}
console.log(sum(10, 3)); // expected output: 13
console.log(sum(3)); // expected output: 5
console.log(sum(3, undefined)); // expected output: 5
现在，如果我们不使用 JavaScript 默认函数参数会怎样。请参见下面给出的示例。
function sum(num1, num2) {
return num1 + num2;
}
console.log(sum(10, 3)); // expected output: 13
console.log(sum(3)); // expected output: NaN
console.log(sum(3, undefined)); // expected output: NaN
我们可以使用以下技术来避免 NaN（非数字）。typeof 检查 num2 的值或类型是否为 undefined，然后 num2 的值将是 1。typeof 允许你传递任何内容，包括 null 和 false。
function sum(num1, num2) {
num2 = (typeof num2 !== 'undefined') ? num2 : 1
return num1 + num2;
}
console.log(sum(5, 2)); // expected output: 7
console.log(sum(5)); // expected output: 6
使用 ES2015，不需要在函数体中告诉默认参数。现在，我们可以在函数定义中分配默认值。检查以下示例代码。
function sum(num1, num2 = 1) {
return num1 + num2;
}
console.log(sum(5, 2)); // expected output: 7
console.log(sum(5)); // expected output: 6
console.log(sum(5, undefined)); // expected output: 6
我们也可以调用另一个函数作为默认值。看看下面的例子。
function multiply(num1 = 2, num2 = 3) {
return num1 * num2;
}
function sum(num1, num2 = multiply()) {
return num1 + num2;
}
console.log(sum(5, 2)); // expected output: 7
console.log(sum(5)); // expected output: 11
console.log(sum(5, undefined)); // expected output: 11
让我们通过使用字符串类型的数据来练习。
function greetings(
name, greeting, message = greeting + ' ' + name + ', How are you?') {
return message;
}
console.log(greetings('Mehvish', 'Hello'));
// expected output: "Hello Mehvish, How are you?"
console.log(greetings('Mehvish', 'Hello', 'What\'s up'));
// expected output: "What's up"
我们已经使用数字、字符串和函数研究了默认函数参数。让我们了解如何使用解构赋值设置默认值。但在此之前，先看看解构赋值到底是什么？
const person = {
firstname: 'Mehvish',
lastname: 'Ashiq',
age: 30,
email: 'delfstack@example.com'
};
const {firstname, lastname, age, email} = person
console.log(firstname);
console.log(lastname);
console.log(email);
输出：
"Mehvish"
"Ashiq"
"delfstack@example.com"
你可能已经注意到，我们直接在 console.log 中使用对象的属性，而不是 objectname.propertyname。如果你评论 const {firstname,lastname,age,email} = person 行，你必须对所有 console.log 语句使用 person.firstname、person.lastname、person.email。
那么，下面这行代码在做什么呢？这是一个解构赋值，意味着解包对象。现在，我们在 person 对象中拥有最少的属性。
试想一下，我们在一个对象中有数百个属性，并且每次都使用 objectname.propertyname。它会看起来很乱。在这里，解包对象很有用。
这样，我们就摆脱了 objectname. 部分并仅使用 propertyname。
const {firstname, lastname, age, email} = person;
让我们将这个解构赋值用于 JavaScript 默认函数参数。
function displayPerson(lastname, firstname, email = 'mehvish.ashiq@gmail.com') {
if (typeof email !== 'undefined') {
console.log('not using default value of email');
console.log(firstname, lastname, email);
} else {
console.log('using default value of email');
console.log(firstname, lastname, email);
}
}
const person = {
firstname: 'Mehvish',
lastname: 'Ashiq',
age: 30,
email: 'delfstack@example.com'
};
const {firstname, lastname, age, email} =
person // destructure assignment (unpack the object)
displayPerson(age, firstname, email);
displayPerson(
age,
firstname); // default value of email will be used in this function call
输出：
"not using default value of email"
"Mehvish", 30, "delfstack@example.com"
"not using default value of email"
"Mehvish", 30, "mehvish.ashiq@gmail.com"
在这个例子中，如果调用者没有传递默认值 email 将被使用。
