JavaScript - 函数參數
歡迎,有抱負的程序员們!今天,我們將深入探索JavaScript函數參數的精彩世界。作為你們友好的鄰居計算機老師,我在這裡指導你們了解這個重要的主題。所以,拿起你們最喜歡的飲料,放鬆一下,讓我們一起踏上這次編程冒險吧!
函數參數和引數
讓我們從基礎開始。在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