JavaScript - 函数參數

歡迎，有抱負的程序员們！今天，我們將深入探索JavaScript函數參數的精彩世界。作為你們友好的鄰居計算機老師，我在這裡指導你們了解這個重要的主題。所以，拿起你們最喜歡的飲料，放鬆一下，讓我們一起踏上這次編程冒險吧！

JavaScript - Function Parameters

函數參數和引數

讓我們從基礎開始。在JavaScript中，函數就像是一台執行特定任務的小機器。有時候，這些機器需要輸入才能正確地完成工作。這就是參數的用處！

參數是什麼？

參數是在函數聲明中列出的變量。它們作為將要被傳遞給函數的值的占位符。

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

function greet(name) {
console.log("Hello, " + name + "!");
}

greet("Alice");

在這個例子中，name 是參數。當我們用 greet("Alice") 调用函數時，"Alice" 是引數。然後函數使用這個引數來個性化問候。

多個參數

函數可以有多個參數。讓我們擴展我們的問候函數：

function greet(name, time) {
console.log("Good " + time + ", " + name + "!");
}

greet("Bob", "morning");

在這裡，我們有两个參數：name 和 time。當調用函數時，我們按照參數定義的順序提供两个引數。

預設參數

有時候，你可能想要為參數設置一個預設值。這在你希望函數即使沒有提供引數也能工作時很有用：

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

greet(); // 輸出：Hello, friend!
greet("Charlie"); // 輸出：Hello, Charlie!

在這種情況下，如果沒有為 name 提供引數，它會默認為 "friend"。

引數對象

現在，讓我們來討論一些更先進的概念：arguments 對象。這是在所有函數中都可用的局部變量。它包含了一個類似數組的對象，包含了傳遞給函數的引數。

function sumAll() {
let total = 0;
for (let i = 0; i < arguments.length; i++) {
total += arguments[i];
}
return total;
}

console.log(sumAll(1, 2, 3, 4)); // 輸出：10

這個函數可以接受任何數量的引數並將它們全部加起來。很酷，對吧？

值傳遞

在JavaScript中，當你將原始數據類型（如數字、字符串或布爾值）傳遞給函數時，它們是按值傳遞的。這意味著函數接收的是值的副本，而不是原始變量。

function changeValue(x) {
x = 5;
console.log("在函數內部: " + x);
}

let num = 10;
console.log("調用函數前: " + num);
changeValue(num);
console.log("調用函數後: " + num);

輸出：

調用函數前: 10
在函數內部: 5
調用函數後: 10

正如你所看到的，在函數內部改變 x 並不會影響原始的 num 變量。

引用傳遞

另一方面，對象是按引用傳遞的。這意味著如果你在函數內部改變對象，原始對象也會被改變。

function changeName(person) {
person.name = "Jane";
console.log("在函數內部: " + person.name);
}

let myPerson = {name: "John"};
console.log("調用函數前: " + myPerson.name);
changeName(myPerson);
console.log("調用函數後: " + myPerson.name);

輸出：

調用函數前: John
在函數內部: Jane
調用函數後: Jane

在這裡，改變 name 屬性會影響原始的 myPerson 對象。

警告

這種行為既可以非常強大，也可能非常危險。它允許你有效地修改变量的复杂数據結構，但如果不小心，也可能導致意想不到的副作用。總是要注意你正在處理的是原始數據類型還是對象！

結合所有知識

讓我們用一個有趣的例子來總結我們學到的知識：

function createSuperHero(name, power = "flying", weaknesses) {
let hero = {
name: name,
power: power,
weaknesses: []
};

for (let i = 2; i < arguments.length; i++) {
hero.weaknesses.push(arguments[i]);
}

return hero;
}

let myHero = createSuperHero("Captain Awesome", "super strength", "kryptonite", "public speaking");
console.log(myHero);

這個函數創建一個超級英雄對象。它使用了預設參數、引數對象，並且同時处理原始數據類型和對象。嘗試運行它看看你會得到什麼！

結論

恭喜你！你剛剛通過掌握函數參數將你的JavaScript技能提升到了新的水平。記住，熟練才能精通，所以不要害怕在你自己的代碼中實驗這些概念。

這裡是一個我們所學方法的快速參考表：

方法	描述
基本參數	`function name(param1, param2) {...}`
預設參數	`function name(param = defaultValue) {...}`
引數對象	`arguments[i]` 用於訪問引數
值傳遞	適用於原始類型（數字、字符串、布爾值）
引用傳遞	適用於對象和數組

開心編程，願你的函數總是能無bug運行！

Credits: Image by storyset