Javascript 简明教程

JavaScript - Rest Parameter

Rest Parameter

JavaScript 中的 rest parameter 使函数可以接受一个可变数量的参数作为数组。当需要传递给函数的参数数量不固定时，可以使用剩余参数。

JavaScript 剩余参数允许你在单个数组中收集所有剩余的参数。剩余参数用三个点（…）加上一个参数名表示。此参数名是包含所有剩余参数的数组。

Rest Parameter Syntax

JavaScript 中的剩余参数涉及在函数声明中使用三个点（…）加上一个参数名。

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

其中，para1 和 para2 是普通参数，而 theArgs 是剩余参数。剩余参数会收集剩余的参数（此处为不对应于参数（para1 和 para1）的其他参数），并将其分配给名为 theArgs 的数组。

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

rest parameter 应该始终是函数定义中的最后一个参数。

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

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

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

Example: Variable Length Parameter List

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

<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 允许函数接受任意数量的数字参数。

Example: Finding the Maximum Number

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

在这个示例中，我们使用 rest 参数 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

这里的 rest 参数 args 允许函数 getMax 接受任意数量的参数。

Spread Operator and Rest Parameters

展开运算符（…）与 rest 参数密切相关，并且常常与它们一起使用。虽然 rest 参数将函数参数收集到一个数组中，但展开运算符执行相反的操作，将数组的元素展开到独立的参数中。

在上述找到最大值的示例中，我们同时使用了 rest 参数和展开运算符。

function getMax(...args){ // here ...args as rest parameter
    return Math.max(...args); // here ... works as spread operator
}

Example

在这个示例中，展开运算符 … 被用来将 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

Rest Parameter vs. Arguments Object

rest 参数的引入对我们如何处理可变长度参数列表的方式产生了影响，与使用 arguments 对象相比。我们来比较两种方法：

Rest Parameters

<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 Object

<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

两种方法得到的结果相同，但 rest 参数的语法更加简洁易读。它还与其他现代 JavaScript 特征更保持一致性。

Destructuring with Rest Parameter

解构赋值是在 ES6 中引入的。它让我们访问数组的独立值，无需使用数组索引。我们可以使用解构赋值来从由 rest 参数创建的数组中提取值。

Example

在下面的示例中，解构赋值从 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