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