文章導讀：AI 輔助學習前端，包含入門、進階、高級部分前端系列內容，當前是 JavaScript?的部分，瑤琴會持續更新，適合零基礎的朋友，已有前端工作經驗的可以不看，也可以當作基礎知識回顧。

上篇文章中，瑤琴帶大家學習和使用了函數，看了上篇文章即使是小白的你也能自己創建簡單的函數，了解函數的基礎定義和使用，以及函數的作用，這篇文章瑤琴帶大家拆解 javascript 函數中重要的元素之一：函數的參數。本篇文章內容較干，建議配合熱水食用。

函數的參數是在函數定義和調用時用于傳遞信息的一種機制。JavaScript 中的函數可以接受零個或多個參數，這些參數可以用來定制函數的行為。

參數的本質是將實參傳給形參。

1.函數參數的定義

函數參數是在函數聲明或函數表達式中定義的變量，它們被包含在圓括號 () 內。參數的個數可以是零個或多個。

function exampleFunction(param1, param2, param3) {// 函數體
}

2.函數參數的類型

JavaScript 中的函數參數不需要聲明類型，可以接受任意類型的值，包括基本類型和對象。

function add(x, y) {return x + y;
}console.log(add(2, 3)); // 輸出 5
console.log(add("Hello", " World")); // 輸出 "Hello World"

3.默認參數

ES6 引入了默認參數，允許為函數參數指定默認值。

function greet(name = "Guest") {console.log(`Hello, ${name}!`);
}greet(); // 輸出 "Hello, Guest!"
greet("John"); // 輸出 "Hello, John!"

• 上面的例子給參數 name 設置了一個默認值 Guest，調用函數時沒有傳入參數時會使用默認值

4. 剩余參數

剩余參數允許將不確定數量的參數表示為一個數組。剩余參數使用三個點 ... 后跟一個參數名。這個參數會成為包含了所有傳遞給函數的多余參數的數組。

1.剩余參數提供了更靈活、易讀的方式來處理不定數量的參數。

2.剩余參數是真正的數組，可以直接使用數組的方法。

function sum(...numbers) {
// numbers 是一個包含了所有傳遞給函數的多余參數的數組return numbers.reduce((total, num) => total + num, 0);
}console.log(sum(1, 2, 3, 4, 5)); // 輸出 15

可以將剩余參數與普通參數一起使用，但要確保普通參數位于剩余參數之前。

例子：

function exampleFunction(arg1, arg2, ...rest) {console.log(arg1); // 第一個參數console.log(arg2); // 第二個參數console.log(rest); // 剩余的參數數組
}

剩余參數的使用場景：

• 處理不確定數量的參數：當函數需要接受任意數量的參數時，剩余參數非常有用。

• 替代 arguments 對象：在ES6之前，通常使用 arguments 對象處理不定數量的參數，而現在剩余參數提供了更靈活、易讀的替代方案。

5. arguments 對象

在函數內部，可以使用 arguments 對象訪問所有傳遞給函數的參數，即使在函數定義時沒有明確列出這些參數。

arguments是每一個函數中獨有的，arguments是不會跨函數的

function showArguments() {for (let i = 0; i < arguments.length; i++) {console.log(arguments[i]);}
}showArguments(1, "two", [3, 4]); // 輸出 1, "two", [3, 4]

注意：

arguments 不是一個真正的數組，它是一個對象。要使用數組方法，需要將其轉換為數組：Array.from(arguments) 或 Array.prototype.slice.call(arguments)。

6. 函數參數的順序

函數參數的順序很重要，調用函數時要按照函數定義的順序傳遞參數。

function fullName(firstName, lastName) {return `${firstName} ${lastName}`;
}console.log(fullName("John", "Doe")); // 輸出 "John Doe"

7.高階函數和回調函數

高階函數（Higher-Order Function）：?高階函數是指接受其他函數作為參數或者將函數作為返回值的函數。

JavaScript 中函數是一等公民，因此可以作為參數傳遞給其他函數，也可以從函數返回，所以高階函數在 JavaScript 中非常常見。

// 高階函數示例
function multiplyBy(factor) {return function (number) {return number * factor;};
}const double = multiplyBy(2);
const triple = multiplyBy(3);console.log(double(5)); // 輸出 10
console.log(triple(5)); // 輸出 15

• 在上面的例子中，multiplyBy 就是一個高階函數，它返回一個新的函數。

回調函數（Callback Function）：

回調函數是作為參數傳遞給其他函數的函數，它在異步操作完成或特定事件發生時被調用。在 JavaScript 中，回調函數通常用于處理異步操作，事件處理，或者實現某種延遲執行。

// 回調函數示例
function fetchData(url, callback) {// 模擬異步請求setTimeout(function () {const data = { name: 'John', age: 30 };callback(data);}, 1000);
}function displayData(data) {console.log(data);
}// 調用 fetchData，并傳遞 displayData 作為回調函數
fetchData('https://example.com/api/data', displayData);

• 在這個例子中，displayData 就是一個回調函數，它在 fetchData 異步操作完成后被調用。

總結：

高階函數 是一個函數，它可以接受函數作為參數，或者返回一個函數。

回調函數 是作為參數傳遞給其他函數的函數，用于在特定事件發生時被調用，通常用于異步編程。

這兩個概念經常一起使用，因為高階函數常常會接受回調函數作為參數。在 JavaScript 中，它們是實現許多復雜功能和處理異步代碼的重要工具。

8.arguments 和剩余參數的區別

• arguments 對象是一個類數組對象，包含了函數調用時傳遞的所有參數。

• 剩余參數是一個真正的數組，包含了函數調用時傳遞的多余的參數。

function example() {console.log(arguments); // 輸出類數組對象
}function example2(...rest) {console.log(rest); // 輸出數組
}

區別總結：

• arguments 是對象，剩余參數是數組。

• 剩余參數提供了更方便的語法和更好的可讀性。

• 剩余參數只能出現在函數參數的最后，而 arguments 對象中的參數順序和數量與調用時的參數一致。

這篇文章干活滿滿，對于初學者來說需要一定的時間消化，學習相關知識點時，一定要將文中的例子放在編輯器中執行，自己動手實踐能幫助你更好的理解。如果有什么不理解的地方，可以給我留言，瑤琴一定知無不言。

希望今天的內容對初學前端的朋友有所幫助。也希望每一個初學者都能成為一個優秀的前端開發工程師，加油。

最后啰嗦一句，好記性不如爛筆頭，希望大家在學習的過程中養成做筆記的習慣，形成自己的知識體系。