JavaScript - 邊界參數：初學者的全面指南

你好，未來的JavaScript大師！? 我很興奮能帶你走進現代JavaScript中最有用的特性之一：邊界參數。作為一個教導編程多年的老師，我可以向你保證，掌握這個概念會讓你的編碼生活變得更加輕鬆。那麼，我們一起來深入了解一下吧！

JavaScript - Rest Parameter

什麼是邊界參數？

想像一下，你正在舉辦一個派對，你不確定會有多少客人來。你準備了一些椅子，但你還有一個舒適的大沙發，可以讓任何額外的客人坐下。在JavaScript中，邊界參數就像那個沙發一樣——它可以處理你丟給它的任何數量的額外參數！

邊界參數讓函數可以接受不定數量的參數作為一個數組。它由三個點 (...) 跟著一個參數名來表示。

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

function gatherFriends(firstFriend, ...otherFriends) {
console.log("我最好的朋友是：" + firstFriend);
console.log("我的其他朋友是：" + otherFriends.join(", "));
}

gatherFriends("愛麗絲", "鮑伯", "查理", "大衛");

輸出會是：

我最好的朋友是：愛麗絲
我的其他朋友是：鮑伯, 查理, 大衛

為什麼使用邊界參數？

靈活性：你可以寫出接受任何數量參數的函數。
可讀性：你的代碼會變得更加直觀且容易理解。
數組方法：你可以對收集的參數使用數組方法。

邊界參數與參數對象的比較

在邊界參數之前，JavaScript有arguments對象。雖然它們有著相似的功能，但邊界參數有許多優勢。我們來比較一下：

特性	邊界參數	參數對象
類型	真正的數組	類似數組的對象
數組方法	支援	直接不支持
命名參數	可以與之一起使用	不能與之一起使用
清晰度	更明確	不夠清晰

以下是一個說明差異的例子：

// 使用參數對象
function sumOld() {
let total = 0;
for(let i = 0; i < arguments.length; i++) {
total += arguments[i];
}
return total;
}

// 使用邊界參數
function sumNew(...numbers) {
return numbers.reduce((total, num) => total + num, 0);
}

console.log(sumOld(1, 2, 3, 4)); // 10
console.log(sumNew(1, 2, 3, 4)); // 10

如你所見，邊界參數版本更加清晰，並允許我們使用像reduce這樣的數組方法。

擴展運算符與邊界參數

現在，讓我們來聊聊擴展運算符。它看起來與邊界參數（三個點 ...）一樣，但它有相反的作用。當邊界參數將多個元素收集到一個數組中時，擴展運算符將一個數組擴展為單個元素。

以下是一個有趣的例子：

function makeSandwich(bread, ...fillings) {
console.log("麵包：" + bread);
console.log("夾心料：" + fillings.join(", "));
}

const myFillings = ["起司", "番茄", "萵苣"];
makeSandwich("全麥", ...myFillings);

輸出會是：

麵包：全麥
夾心料：起司, 番茄, 萵苣

在這個例子中，我們使用擴展運算符將myFillings數組作為單個參數傳遞給makeSandwich函數。

使用邊界參數進行解構

解構就像打開一個旅行箱一樣——你取出你需要的物品，留下其餘的。當與邊界參數結合使用時，它成為了一個強大的工具。我們來看看：

const [first, second, ...others] = [1, 2, 3, 4, 5];

console.log(first);  // 1
console.log(second); // 2
console.log(others); // [3, 4, 5]

這也適用於對象：

const {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};

console.log(a);    // 10
console.log(b);    // 20
console.log(rest); // {c: 30, d: 40}

實際範例：函數參數

讓我們把所有這些東西結合起來，用一個更實際的例子。想像一下你正在寫一個函數來計算購物車中物品的總價：

function calculateTotal(discount, ...prices) {
const total = prices.reduce((sum, price) => sum + price, 0);
return total * (1 - discount);
}

const groceries = [5.99, 2.50, 3.75, 1.99];
console.log("打九折後的總價：$" + calculateTotal(0.1, ...groceries).toFixed(2));

在這個例子中，我們使用邊界參數來收集所有的價格，然後使用擴展運算符將那些價格傳遞給函數。輸出會是：

打九折後的總價：$12.81

結論

就是这样，各位！我們一起穿越了邊界參數的土地，將其與它的老亲戚參數對象進行了比較，探索了與擴展運算符的關係，甚至還與解構混合使用。

記住，邊界參數就像那個總是準備伸出援手的朋友——它在那裡，讓你的編碼生活更加輕鬆，並使你的函數更加靈活。所以，勇往直前，安心使用你在JavaScript工具包中的這個強大工具！

快樂編碼，願你的函數總是靈活，代碼總是易讀！??‍??‍?

Credits: Image by storyset