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");

在這裡,我們有两个參數:nametime。當調用函數時,我們按照參數定義的順序提供两个引數。

預設參數

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

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