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>
输出
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>
输出
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>
输出
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>
输出
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>
输出
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>
输出
First: 1, Second: 2
