JavaScript - 剩余参数 (Rest Parameter)

剩余参数

JavaScript 中的 剩余参数 允许函数以数组形式接受可变数量的参数。当需要传递给函数的参数数量不固定时，可以使用剩余参数。

JavaScript 剩余参数允许您将所有剩余参数收集到一个数组中。剩余参数用三个点 (...) 加参数名称表示。此参数名称是包含所有剩余参数的数组。

剩余参数语法

JavaScript 中的剩余参数需要在函数声明中使用三个点 (...) 加参数名称。

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

这里的 para1 和 para2 是普通参数，而 theArgs 是剩余参数。剩余参数 (rest parameter) 收集剩余的参数(此处指除 para1 和 para1 对应参数之外的参数)，并将其赋值给名为 theArgs 的数组。

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

剩余参数 应始终是函数定义中的最后一个参数。

function funcName(...para1, para2, para2){}
// SyntaxError: 无效或意外的标记

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

function funcName(para1, ...para2, ...para3){}
//SyntaxError: 剩余参数必须是最后一个形式参数

示例:可变长度参数列表

当您想要定义一个可以处理可变数量参数的函数时，剩余参数非常有用。让我们来看以下示例 -

<html>
<body>
  <div> Rest parameter allows function to accept nay number of arguments.</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>

输出

Rest parameter allows function to accept nay number of arguments.
100
30
0

此处，剩余参数 nums 允许函数接受任意数量的数字参数。

示例:查找最大值

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

在此示例中，我们使用剩余参数 nums 来收集传递给函数的所有参数。扩展运算符用于将各个值传递给 Math.max() 函数。

<html>
<body>
   <div> Finding the maximum number</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>

输出

Finding the maximum number
40
30

此处，剩余参数 args 允许函数 getMax 接受任意数量的参数。

展开运算符和剩余参数

展开运算符 (...) 与剩余参数密切相关，并且经常与它们结合使用。剩余参数将函数参数收集到数组中，而展开运算符则执行相反的操作，将数组的元素展开为单独的参数。

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

function getMax(...args){ // 此处 ...args 作为剩余参数
    return Math.max(...args); // 此处 ... 用作展开运算符
}

示例

在此示例中，展开运算符 ... 用于将 numbers 数组的元素作为单独的参数传递给乘法函数。

<html>
<body>
   <div> Spread operator in 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>

输出

Spread operator in JavaScript
24

剩余参数 vs. 参数对象

与使用参数对象相比，剩余参数的引入对我们处理变长参数列表的方式有所影响。让我们比较一下这两种方法:

剩余参数

<html>
<body>
  <div> Sum using rest parameter in 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>

输出

Sum using rest parameter in JavaScript:
15

参数对象

<html>
<body>
  <div> Sum using arguments object in 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>

输出

Sum using arguments object in JavaScript:
15

虽然两种方法的结果相同，但剩余参数的语法更简洁易读。它的行为也与其他现代 JavaScript 特性更加一致。

使用剩余参数进行解构

ES6 中引入了解构赋值。它允许我们无需使用数组索引即可访问数组中的各个值。我们可以使用解构赋值从剩余参数创建的数组中提取值。

示例

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

<html>
<body>
  <div> Destructuring assignment with rest parameter</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>

输出

Destructuring assignment with rest parameter
First: 1, Second: 2