JavaScript - Rest Parameter
Rest Parameter
JavaScript 中的 rest parameter 允许函数接受可变数量的参数，并将其作为数组。当需要传递给函数的参数数量不固定时，可以使用 rest parameters。
JavaScript rest parameters 允许你将所有剩余参数收集到一个数组中。rest parameter 使用三个点（...）后跟一个参数名来表示。这个参数名就是包含所有剩余参数的数组。
Rest Parameter 语法
JavaScript 中的 rest parameter 在函数声明中使用三个点（...）后跟一个参数名。
function functionName(para1, para2, ...theArgs){
// 函数体;
}
这里 para1 和 para2 是普通参数，而 theArgs 是 rest parameter。rest parameter 收集剩余的参数（这里，是除对应 para1 和 para2 的参数外的其他参数），并将其赋值给名为 theArgs 的数组。
我们也可以在 function expression 中以与 function declaration 相同的方式编写 rest parameter。
rest parameter 应该始终是函数定义中的最后一个参数。
function funcName(...para1, para2, para2){}
// SyntaxError: Invalid or unexpected token
函数定义只能有一个 rest parameter。
function funcName(para1, ...para2, ...para3){}
//SyntaxError: Rest parameter must be last formal parameter
示例：可变长度参数列表
当你想定义一个能够处理可变数量参数的函数时，rest parameters 非常有用。让我们看下面的示例 —
<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
这里，rest parameter nums 允许函数接受任意数量的数字参数。
示例：查找最大数
JavaScript rest parameter 简化了在给定数字集合中查找最大数的过程。
在这个示例中，我们使用 rest parameter 来收集传递给函数的所有参数。spread operator 用于将单个值传递给 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 parameter args 允许函数 getMax 接受任意数量的参数。
展开运算符和剩余参数
展开运算符（...）与剩余参数密切相关，并且经常与它们一起使用。剩余参数将函数参数收集到一个数组中，而展开运算符执行相反的操作，将数组的元素展开为单个参数。
在上例中寻找最大数的例子中，我们同时使用了剩余参数和展开运算符。
function getMax(...args){ // 这里 ...args 作为剩余参数
return Math.max(...args); // 这里 ... 作为展开运算符
}
示例
在这个示例中，展开运算符 ... 用于将 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
剩余参数 vs. 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