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