详解javascript函数的参数

下面就详细讲解“详解JavaScript函数的参数”的完整攻略。

1. 简介

在 JavaScript 函数定义中，可以传递任意数量的参数，包括数字、字符串、对象等，这些参数可以在函数体中使用。函数的参数可以被看做是可以传递给函数的变量，它们是函数体内部的局部变量。

2. 基本用法

JavaScript 函数定义中可以传递任意数量的参数，这些参数通过逗号隔开，例如：

function add(a, b) {
  return a + b;
}

在这个例子中，add 函数有两个参数，分别是 a 和 b。函数体中使用了这两个参数来求和并返回结果。

调用 add 函数时，需要传入两个参数，例如：

let result = add(1, 2);
console.log(result);  // 3

我们将 1 和 2 传递给 add 函数，它会返回它们的和 3。

3. 默认值参数

JavaScript 函数可以设置参数的默认值，当调用函数时没有传入对应的参数时，使用默认值来代替。例如：

function getName(firstName, lastName = 'Doe') {
  return firstName + ' ' + lastName;
}

在这个例子中，getName 函数有两个参数，firstName 和 lastName，其中 lastName 设置了默认值 'Doe'。如果调用函数时只传入一个参数，那么 lastName 将使用默认值 'Doe'，例如：

let result = getName('John');
console.log(result);  // John Doe

在这个例子中，我们只传递了一个参数 'John' 给 getName 函数，它自动使用默认值 'Doe' 来作为 lastName 参数的值，返回结果为 'John Doe'。

4. 剩余参数

JavaScript 函数可以使用剩余参数，它们用于接收任意数量的参数，包装成一个数组。例如：

function showNames(first, ...others) {
  console.log(first);
  console.log(others);
}

showNames('John', 'Jane', 'Michael', 'David');

在这个例子中，showNames 函数有一个必选参数 first 和一个剩余参数 ...others。当调用函数时，将传递多个参数给 ...others，它们会按顺序封装成一个数组：

John
[ 'Jane', 'Michael', 'David' ]

我们可以在函数体中使用 ...others 数组中的参数，例如：

function showNames(first, ...others) {
  console.log(first + ' and ' + others.length + ' others:');
  for (let i = 0; i < others.length; i++) {
    console.log(others[i]);
  }
}

showNames('John', 'Jane', 'Michael', 'David');

在这个例子中，我们使用了剩余参数 ...others 来循环输出其他参数，得到结果：

John and 3 others:
Jane
Michael
David

5. 示例说明

下面是两个使用示例说明。

示例一

我们在一个页面中定义了三个按钮，当用户单击一个按钮时，执行对应的函数，并传递一个参数。下面是代码：

<button onclick="showMessage('Hello')">Say Hello</button>
<button onclick="showMessage('JavaScript')">Say JavaScript</button>
<button onclick="showMessage('World')">Say World</button>
<script>
function showMessage(text) {
  alert('You said: ' + text);
}
</script>

在这个示例中，我们使用 onclick 属性来绑定函数，在用户单击对应的按钮时，会执行 showMessage(text) 函数并传递一个字符串参数。函数内部会在这个字符串前面增加一些文本内容，然后使用 alert 函数弹出提示框。

示例二

我们需要编写一个函数 sum，它可以接收任意数量的数字参数，并返回它们的总和。下面是代码：

function sum(...numbers) {
  let total = 0;
  for (let i = 0; i < numbers.length; i++) {
    total += numbers[i];
  }
  return total;
}

console.log(sum(1, 2, 3));         // 6
console.log(sum(1, 2, 3, 4, 5));   // 15
console.log(sum(10, 20));          // 30

在这个示例中，我们使用剩余参数 ...numbers 来接收任意数量的数字参数，然后在函数体中对它们进行求和并返回结果。我们调用 sum 函数时，可以传递任意数量的参数，例如 sum(1, 2, 3)、sum(1, 2, 3, 4, 5) 和 sum(10, 20)，得到的结果分别为 6、15 和 30。