参数的本质：详解 JavaScript 函数的参数

文章导读：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 对象中的参数顺序和数量与调用时的参数一致。

这篇文章干活满满，对于初学者来说需要一定的时间消化，学习相关知识点时，一定要将文中的例子放在编辑器中执行，自己动手实践能帮助你更好的理解。如果有什么不理解的地方，可以给我留言，瑶琴一定知无不言。

希望今天的内容对初学前端的朋友有所帮助。也希望每一个初学者都能成为一个优秀的前端开发工程师，加油。

最后啰嗦一句，好记性不如烂笔头，希望大家在学习的过程中养成做笔记的习惯，形成自己的知识体系。