迹忆客 专注技术分享

本文介绍了 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 将被使用。