JavaScript 剩余参数

在 JavaScript 中，剩余参数（rest parameter）允许一个函数接受不定数量的参数作为一个数组。当需要传递给函数的参数数量不是固定的，就可以使用剩余参数。

JavaScript 的剩余参数允许你将所有剩余的参数收集到一个单一的数组中。剩余参数用三个点（...）后跟一个参数名表示。这个参数名即为包含所有剩余参数的数组。

剩余参数语法

在 JavaScript 中，剩余参数涉及到在函数声明时使用三个点（...）后跟一个参数名。

function functionName(para1, para2, ...theArgs){
   // 函数体;
}

在这里 para1 和 para2 是普通参数，而 theArgs 是一个剩余参数。剩余参数收集其余的参数（这里指除了 para1 和 para2 对应的参数之外的参数），并赋值给名为 theArgs 的数组。

我们也可以在函数表达式中像在函数声明中一样写入剩余参数。

剩余参数必须总是作为函数定义中的最后一个参数。

function funcName(...para1, para2, para2){}
// SyntaxError: Invalid or unexpected token

函数定义只能有一个剩余参数。

function funcName(para1, ...para2, ...para3){}
// SyntaxError: Rest parameter must be last formal parameter

示例：可变长度的参数列表

当你要定义一个能处理不定数量参数的函数时，剩余参数非常有用。让我们看下面的例子：

<html>
<body>
  <div> 剩余参数允许函数接受任意数量的参数。</div>
  <div id = "demo"> </div>
  <script>
    function sum(...nums) {
      let totalSum = 0;
      for (let num of nums) {
        totalSum += num;
      }
      return totalSum;
    }
    document.getElementById("demo").innerHTML = 
  sum(10, 20, 30, 40) + "<br>" +
    sum(10, 20) + "<br>" +
    sum();
  </script>
</body>
</html>

输出

剩余参数允许函数接受任意数量的参数。
100
30
0

在这里，剩余参数 nums 允许函数接受任意数量的数值参数。

示例：查找最大数

JavaScript 的剩余参数简化了在一组给定的数字中查找最大数的过程。

在这个例子中，我们使用剩余参数 numbers 来收集传递给函数的所有参数。扩展运算符（spread operator）用来将单独的值传给 Math.max() 函数。

<html>
<body>
   <div> 查找最大数</div>
   <div id = "demo"> </div>
   <script>
      function getMax(...args){ 
         return Math.max(...args); 
      } 
      document.getElementById("demo").innerHTML = 
  getMax(10,20,30,40) + "<br>" +
      getMax(10,20,30);
  </script>
</body>
</html>

输出

查找最大数
40
30

在这里，剩余参数 args 允许函数 getMax 接受任意数量的参数。

扩展运算符与剩余参数

扩展运算符（spread operator）与剩余参数密切相关，并且经常与之结合使用。当剩余参数将函数参数收集到一个数组中时，扩展运算符则执行相反的操作，将数组的元素展开成单独的参数。

在上面查找最大数的例子中，我们同时使用了剩余参数和扩展运算符。

function getMax(...args){ // 这里 ...args 作为剩余参数
    return Math.max(...args); // 这里 ... 作为扩展运算符
}

示例

在这个例子中，扩展运算符 ... 用来将 numbers 数组的元素作为单独的参数传递给 multiply 函数。

<html>
<body>
   <div> JavaScript 中的扩展运算符</div>
   <div id="demo"></div>
   <script>
      function multiply(a, b, c) {
         return a * b * c;
      }
      const numbers = [2, 3, 4];
      document.getElementById("demo").innerHTML = multiply(...numbers);
   </script>
</body>
</html>

输出

JavaScript 中的扩展运算符
24

剩余参数 vs. 参数对象

剩余参数的引入对于处理可变长度参数列表的方法产生了影响，与使用参数对象相比。让我们比较这两种方法：

剩余参数

<html>
<body>
  <div> 使用 JavaScript 的剩余参数求和：</div>
  <div id = "demo"> </div>
  <script>
    function sum(...numbers) {
      return numbers.reduce((total, num) => total + num, 0);
    }
    document.getElementById("demo").innerHTML = sum(1, 2, 3, 4, 5);
  </script>
</body>
</html>

输出

使用 JavaScript 的剩余参数求和：
15

参数对象

<html>
<body>
  <div> 使用 JavaScript 的参数对象求和：</div>
  <div id = "demo"> </div>
  <script>
    function sum() {
      const argsArray = Array.from(arguments);
      return argsArray.reduce((total, num) => total + num, 0);
    }
    document.getElementById("demo").innerHTML = sum(1, 2, 3, 4, 5);
  </script>
</body>
</html>

输出

使用 JavaScript 的参数对象求和：
15

尽管两种方法都能达到相同的结果，但是剩余参数的语法更加简洁和易读。它也与其他现代 JavaScript 功能的行为更一致。

剩余参数与解构赋值

ES6 中引入了解构赋值，它允许我们在不使用数组索引的情况下访问数组中的各个值。我们可以使用解构赋值来从由剩余参数创建的数组中提取值。

示例

在下面的例子中，解构赋值从 numbers 数组中提取前两个元素。

<html>
<body>
  <div> 剩余参数与解构赋值</div>
  <div id = "demo"> </div>
  <script>
    function getFirstTwo(...numbers) {
      const [first, second] = numbers;
      return `First: ${first}, Second: ${second}`;
    } 
    document.getElementById("demo").innerHTML = getFirstTwo(1, 2, 3, 4, 5);
  </script>
</body>
</html>

输出

剩余参数与解构赋值
First: 1, Second: 2