扩展运算符 vs 剩余运算符——函数调用的应用场景

2023-10-30 03:31:33







## 扩展运算符

扩展运算符（...）用于将数组或可迭代对象展开为函数参数。它的工作原理是将数组或对象中的每个元素作为单独的参数传递给函数。这使得您可以轻松地将数组或对象中的数据传递给函数，而无需手动展开它们。

```javascript
const numbers = [1, 2, 3, 4, 5];

function sum(a, b, c, d, e) {
  return a + b + c + d + e;
}

console.log(sum(...numbers)); // 输出：15

在上面的示例中，扩展运算符将 numbers 数组展开为函数 sum 的参数。这相当于以下代码：

console.log(sum(1, 2, 3, 4, 5));

剩余运算符

剩余运算符（...）用于将函数剩余的参数收集到一个数组中。它的工作原理是将函数中除已命名的参数之外的所有参数收集到一个数组中。这使得您可以轻松地处理不定数量的参数。

function sum(...numbers) {
  let total = 0;

  for (const number of numbers) {
    total += number;
  }

  return total;
}

console.log(sum(1, 2, 3, 4, 5)); // 输出：15

在上面的示例中，剩余运算符将函数 sum 中除已命名的参数之外的所有参数收集到 numbers 数组中。这相当于以下代码：

function sum() {
  const numbers = [];

  for (let i = 0; i < arguments.length; i++) {
    numbers.push(arguments[i]);
  }

  let total = 0;

  for (const number of numbers) {
    total += number;
  }

  return total;
}

console.log(sum(1, 2, 3, 4, 5));

应用场景

扩展运算符和剩余运算符在函数调用中都有广泛的应用场景。以下是一些常见的应用场景：

将数组或对象中的数据传递给函数：扩展运算符可以轻松地将数组或对象中的数据传递给函数，而无需手动展开它们。
处理不定数量的参数：剩余运算符可以轻松地处理不定数量的参数，这使得您可以编写更灵活的函数。
创建新的数组或对象：扩展运算符和剩余运算符可以用来创建新的数组或对象。例如，您可以使用扩展运算符来创建数组的副本，或者使用剩余运算符来创建包含函数剩余参数的对象。
调用其他函数：扩展运算符和剩余运算符可以用来调用其他函数。例如，您可以使用扩展运算符来将一个数组作为参数传递给另一个函数，或者使用剩余运算符来将函数的剩余参数传递给另一个函数。