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