JavaScript - 智能函數參數

你好，未來的 JavaScript 巫師們！今天，我們將踏上一段令人興奮的旅程，進入智能函數參數的世界。作為你們親切鄰居的電腦老師，我在這裡用清晰易懂的解釋和大量的範例來引導你們。所以，拿起你們的虛擬魔杖（鍵盤），我們一起來探索吧！

預設函數參數

預設參數是什麼？

想像一下你正在訂購披薩。你可能會說，“我想要一個大型的辣腸披薩。”但如果你沒有指定大小呢？如果披薩店假設你想要一個中型的會不會很棒？這正是 JavaScript 函數中的預設參數的作用！

預設參數讓我們能夠為函數參數指定預設值。如果沒有提供參數或者參數是 undefined，則會使用預設值。

我們來看一個簡單的例子：

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

greet(); // 輸出: Hello, friend!
greet("Alice"); // 輸出: Hello, Alice!

在這個例子中，如果沒有提供名稱，函數會使用 "friend" 作為預設。就像有一個友好的機器人在不知道你的名字時會說 "Hello, friend!"！

更複雜的預設參數

預設參數可以不僅僅是簡單的值。它們可以是表達式，甚至是函數調用。我們來看一個更進階的例子：

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

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

在這裡，如果沒有提供寬度，它會使用長度作為預設。這對於計算正方形（長度等於寬度）或矩形的面積來說非常完美！

JavaScript 剩餘參數

剩餘參數是什麼？

剩餘參數就像一個神奇的袋子，可以裝任何數量的物品。在 JavaScript 中，它讓函數能夠接受不定數量的參數作為一個數組。

我們來看看它是如何工作的：

function sum(...numbers) {
return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3)); // 輸出: 6
console.log(sum(1, 2, 3, 4, 5)); // 輸出: 15

在這個例子中，...numbers 是我們的神奇袋子。它可以裝任何數量的參數，我們可以在函數內將其作為數組來使用。

結合剩餘參數與常規參數

我們也可以將剩餘參數與常規參數一起使用：

function introduce(greeting, ...names) {
names.forEach(name => console.log(`${greeting}, ${name}!`));
}

introduce("Hello", "Alice", "Bob", "Charlie");
// 輸出：
// Hello, Alice!
// Hello, Bob!
// Hello, Charlie!

在這裡，greeting 是一個常規參數，而 ...names 捕獲其餘的參數。

JavaScript 解構或命名參數

解構是什麼？

解構就像打開一個行李箱。我們不必一個一個地取出物品，而是一次性取出多個物品並給它們命名。

我們來看一個對象解構的例子：

function printUserInfo({ name, age, city = "Unknown" }) {
console.log(`Name: ${name}, Age: ${age}, City: ${city}`);
}

const user = { name: "Alice", age: 30 };
printUserInfo(user); // 輸出: Name: Alice, Age: 30, City: Unknown

const anotherUser = { name: "Bob", age: 25, city: "New York" };
printUserInfo(anotherUser); // 輸出: Name: Bob, Age: 25, City: New York

在這個例子中，我們正在解構傳遞給函數的對象，提取 name、age 和 city（有一個預設值）。

數組解構

我們也可以使用數組解構：

function getFirstAndLast([first, ...rest]) {
return { first, last: rest.pop() };
}

const result = getFirstAndLast(["Apple", "Banana", "Cherry", "Date"]);
console.log(result); // 輸出: { first: "Apple", last: "Date" }

這個函數接受一個數組，提取第一個元素，並使用剩餘參數來獲取最後一個元素。

結合解構與預設和剩餘參數

現在，讓我們把我們學到的所有概念結合到一個超級智能的函數中：

function createTeam({ leader, members = [], maxSize = 5 } = {}) {
const team = [leader, ...members].slice(0, maxSize);
console.log(`Team created with ${team.length} members.`);
console.log(`Leader: ${leader}`);
console.log(`Other members: ${members.join(", ") || "None"}`);
}

createTeam({ leader: "Alice", members: ["Bob", "Charlie"] });
// 輸出：
// Team created with 3 members.
// Leader: Alice
// Other members: Bob, Charlie

createTeam({ leader: "David" });
// 輸出：
// Team created with 1 members.
// Leader: David
// Other members: None

createTeam();
// 輸出：
// Team created with 0 members.
// Leader: undefined
// Other members: None

這個函數使用對象解構並有預設值，甚至在一個參數都沒有傳遞時還有一個預設的空對象！

方法總結

這裡是一個我們已經涵蓋的方法總結表：

方法	描述	範例
預設參數	為函數參數提供預設值	function greet(name = "friend")
剩餘參數	捕獲不定數量的參數作為數組	function sum(...numbers)
對象解構	從傳遞的對象中提取屬性	function printUserInfo({ name, age })
數組解構	從傳遞的數組中提取元素	function getFirstAndLast([first, ...rest])

親愛的學生們，這就是 JavaScript 中智能函數參數的神奇世界。記住，這些技巧就像是你的編程工具箱中的工具。你越多練習使用它們，它們就會變得越自然。所以，勇往直前，創造一些智能、靈活且強大的函數吧！快樂編程！??

Credits: Image by storyset