JavaScript - 預設參數

你好啊，未來的JavaScript法師們！今天，我們將要探險進入JavaScript中神奇的預設參數世界。作為你們親切的鄰居計算機老師，我非常高興能夠引導你們走過這段旅程。所以，拿起你們的虛擬魔杖（鍵盤），讓我們施展一些代碼咒語！

預設參數語法

在JavaScript的古老時代（ES6之前），為函數參數設定預設值就像試著教一隻貓抓東西一樣 - 可能，但不是很雅觀。我們必須使用像這樣的技巧：

function greet(name) {
name = name || 'Anonymous';
console.log('Hello, ' + name + '!');
}

但現在，有了ES6及之後的版本，我們有了一種更好的方法來做這件事：

function greet(name = 'Anonymous') {
console.log(`Hello, ${name}!`);
}

greet(); // 輸出：Hello, Anonymous!
greet('Alice'); // 輸出：Hello, Alice!

在這個例子中，如果我們不傳遞參數給greet()，它會使用預設值'Anonymous'。這就像有一個有禮的門房，如果他不知道你的名字，就會使用一個通用問候！

將表達式作為預設參數值

預設參數不僅限於簡單值。它們也可以是表達式！讓我們看一個例子：

function calculateArea(length, width = length) {
return length * width;
}

console.log(calculateArea(5)); // 輸出：25
console.log(calculateArea(5, 3)); // 輸出：15

在這裡，如果我們不提供寬度，它會使用長度值。這就像一個懶惰的正方形製造者 - 如果你只給它一個邊，它假設你想要一個正方形！

我們甚至可以做得更複雜：

function getRandomGreeting(name, greeting = `Hello, ${name}! The lucky number is ${Math.floor(Math.random() * 100)}.`) {
console.log(greeting);
}

getRandomGreeting('Bob'); // 輸出：Hello, Bob! The lucky number is 42. (或其他隨機數字)

這個函數每次被調用而不帶有自定義問候語時，都會生成一個隨機的幸運數字。這就像一個賀卡，但更友好！

傳遞未定義參數

這裡有一個要注意的奇怪行為：

function showMessage(message = 'Default message') {
console.log(message);
}

showMessage(undefined); // 輸出：Default message
showMessage(null); // 輸出：null

傳遞undefined與根本不傳遞任何東西一樣，會觸發預設值。但null被視為一個有效的值，所以它會覆蓋預設值。這就像undefined在說“我不知道，你來決定”，而null則在說“我已經做了我的選擇，我的選擇是什麼都沒有！”

函數表達式作為預設參數

我們甚至可以使用函數表達式作為預設參數。看看這個：

function greet(name, getGreeting = () => 'Hello') {
console.log(`${getGreeting()} ${name}!`);
}

greet('Alice'); // 輸出：Hello Alice!
greet('Bob', () => 'Hi there'); // 輸出：Hi there Bob!

這讓我們可以定制不僅是預設值的值，還有我們預設參數的行為。這就像有一個可定制的問候機器人！

函數可選參數

現在，讓我們來談談可選參數。在JavaScript中，所有參數默認都是可選的。如果你不提供它們，它們會變成undefined。但有了預設參數，我們可以給它們提供後備值：

function createUser(name, age, country = 'Unknown') {
return {
name: name,
age: age,
country: country
};
}

console.log(createUser('Alice', 30)); // 輸出：{ name: 'Alice', age: 30, country: 'Unknown' }
console.log(createUser('Bob', 25, 'USA')); // 輸出：{ name: 'Bob', age: 25, country: 'USA' }

這樣，我們可以將某些參數設為必需（如名稱和年齡），而將其他參數設為可選（如國家）。這就像填寫一個表單，其中一些字段被標記為必填，而其他字段則是可選的！

這裡是一個總結我們討論過的方法的表格：

方法	描述	示例
基本預設參數	提供一個後備值，如果沒有傳遞參數	function greet(name = 'Anonymous')
表達式作為預設	使用一個表達式來計算預設值	function calcArea(length, width = length)
未定義行為	undefined觸發預設，null不觸發	showMessage(undefined) vs showMessage(null)
函數作為預設	使用一個函數來計算預設值	function greet(name, getGreeting = () => 'Hello')
可選參數	使某些參數可選並提供預設值	function createUser(name, age, country = 'Unknown')

記住，年輕的學徒們，預設參數就像是你代碼中的安全網。當你跌倒（或忘記傳遞參數）時，它們會接住你，確保你的函數總是有東西可以工作。明智地使用它們，並讓代碼與你同在！

Credits: Image by storyset