非常靈活,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. 重要提示

  1. 參數傳遞方式:JavaScript中參數是按值傳遞的,但如果是對象或數組,傳遞的是引用,對內部屬性的修改在函數外部可見。
  2. 避免使用arguments:在ES6中推薦使用剩餘參數(...)替代arguments對象。
  3. 函數提升:函數聲明會被提升到作用域頂部,但函數表達式不會。
  4. 參數順序:調用時參數的順序必須與定義時一致,第一個實參對應第一個形參。