非常靈活,ES6引入了許多新特性讓參數處理更加方便。
1. 基本參數傳遞
函數定義時聲明的參數稱為形參,調用函數時傳遞的值稱為實參。
function greet(name, message) {
return `${name}, ${message}!`;
}
console.log(greet("Alice", "Good morning")); // "Alice, Good morning!"
注意:如果調用時實參不足,對應形參會是
undefined,可能導致計算結果為NaN。
2. 默認參數(ES6+)
當調用函數時沒有傳遞該參數或傳遞undefined時,使用默認值。
function createUser(name, role = "user", isActive = true) {
return { name, role, isActive };
}
console.log(createUser("Bob")); // { name: 'Bob', role: 'user', isActive: true }
console.log(createUser("Carol", "admin")); // { name: 'Carol', role: 'admin', isActive: true }
3. 剩餘參數(Rest Parameters)
使用...收集剩餘參數為數組,替代傳統的arguments對象。
function sum(prefix, ...numbers) {
const total = numbers.reduce((acc, val) => acc + val, 0);
return `${prefix}: ${total}`;
}
console.log(sum("結果", 1, 2, 3, 4)); // "結果: 10"
console.log(sum("總和", 5)); // "總和: 5"
4. 解構參數
通過對象或數組解構直接提取參數,提高可讀性。
// 對象參數解構
function displayUser({ name, age, email = "N/A" }) {
console.log(`名稱: ${name}`);
console.log(`年齡: ${age}`);
console.log(`郵箱: ${email}`);
}
const user = { name: "Dave", age: 30 };
displayUser(user); // 名稱: Dave, 年齡: 30, 郵箱: N/A
// 數組參數解構
function getFirstAndLast([first, , , last]) {
return { first, last };
}
const colors = ["red", "green", "blue", "yellow"];
console.log(getFirstAndLast(colors)); // { first: 'red', last: 'yellow' }
5. 函數調用
// 基礎函數調用
function add(a, b) {
return a + b;
}
console.log(add(3, 5)); // 8
// 未傳遞足夠參數
console.log(add(10)); // NaN(因為b為undefined)
// 有返回值的函數調用
function multiply(a, b) {
return a * b;
}
const result = multiply(4, 5);
console.log(result); // 20
6. 重要提示
- 參數傳遞方式:JavaScript中參數是按值傳遞的,但如果是對象或數組,傳遞的是引用,對內部屬性的修改在函數外部可見。
- 避免使用arguments:在ES6中推薦使用剩餘參數(
...)替代arguments對象。 - 函數提升:函數聲明會被提升到作用域頂部,但函數表達式不會。
- 參數順序:調用時參數的順序必須與定義時一致,第一個實參對應第一個形參。