JavaScript - Rest 参数

Rest 参数

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

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

Rest 参数语法

JavaScript 中的 rest 参数涉及在函数声明中使用三个点（...）后跟参数名称。


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

这里 para1 和 para2 是普通参数，而 theArgs 是 rest 参数。rest 参数收集其余参数（此处为与参数对应的参数 – para1 和 para1 以外的参数）并分配给名为 theArgs 的数组。

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

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


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

函数定义只能有一个 rest 参数。


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

示例：可变长度参数列表

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


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

示例：查找最大数量

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

在此示例中，我们使用 rest 参数来收集传递给函数的所有参数。spread 运算符用于将各个值传递给 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 运算符和 Rest 参数

spread 运算符（...）与 rest 参数密切相关，并且经常与它们结合使用。rest 参数将函数参数收集到数组中，而展开运算符执行相反的操作，将数组的元素分散到单个参数中。

在上面查找最大数字的示例中，我们同时使用了 rest 参数和 spread 运算符。


function getMax(...args){ // 在这里。。。args作为rest参数
	 	 return Math.max(...args); // 在这里。。。工作 spread 运算符
}

例

在此示例中，Spread 运算符 ...用于将 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 参数与 Arguments 对象

与使用 arguments 对象相比，rest 参数的引入对我们如何处理可变长度参数列表有影响。让我们比较一下这两种方法：

Rest 参数


<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

虽然这两种方法都能获得相同的结果，但 rest 参数语法更加简洁易读。它的行为也与其他现代 JavaScript 功能更加一致。

使用 Rest 参数解构

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

例

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

打印本页