JavaScript 默认函数参数

Mehvish Ashiq 2022年5月10日
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 的值将是 1typeof 允许你传递任何内容,包括 nullfalse

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.firstnameperson.lastnameperson.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 将被使用。

Mehvish Ashiq avatar Mehvish Ashiq avatar

Mehvish Ashiq is a former Java Programmer and a Data Science enthusiast who leverages her expertise to help others to learn and grow by creating interesting, useful, and reader-friendly content in Computer Programming, Data Science, and Technology.

LinkedIn GitHub Facebook

相关文章 - JavaScript Function