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