JavaScript – 其余参数

其余参数

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

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

其余参数语法

JavaScript 中的其余参数涉及在函数声明中使用三个点 (...) 后跟参数名称。

function functionName(para1, para2, ...theArgs){
   // function body;
}

这里para1 和 para2 是普通参数，而 theArgs 是其余参数。其余参数收集其余参数（此处，除对应于参数 para1 和 para1 的参数之外的参数），并将其赋值给名为 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> 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 其余参数简化了在给定的一组数字中查找最大数的过程。

在这个例子中，我们使用其余参数 numbers 来收集传递给函数的所有参数。展开运算符用于将各个值传递给 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){ // here ...args as rest parameter
    return Math.max(...args); // here ... works as spread operator
}

示例

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

<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

其余参数与 arguments 对象

其余参数的引入对我们如何处理可变长度参数列表（与使用 arguments 对象相比）具有影响。让我们比较这两种方法

其余参数

<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

arguments 对象

<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

打印页面