当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript剩余参数详解教程

JavaScript剩余参数详解教程

2025-11-25 15:49:52 0浏览收藏

欢迎各位小伙伴来到golang学习网，相聚于此都是缘哈哈哈！今天我给大家带来《JavaScript 剩余参数使用教程》，这篇文章主要讲到等等知识，如果你对文章相关的知识非常感兴趣或者正在自学，都可以关注我，我会持续更新相关文章！当然，有什么建议也欢迎在评论留言提出！一起学习！

剩余参数是JavaScript中用于收集函数多余参数的数组，语法为...parameterName，必须位于参数末尾，可直接调用数组方法，区别于非数组的arguments对象，且支持与固定参数共存，提升代码可读性与安全性。

JavaScript 剩余参数：如何处理不定数量的函数参数

JavaScript 中的剩余参数（Rest Parameters）提供了一种简洁的方式处理函数中不确定数量的参数。通过使用三个点 (...) 加上一个形参名，可以把调用时传入的多个实参收集为一个数组，便于后续操作。

什么是剩余参数

剩余参数语法允许我们将一个不定数量的参数表示为一个数组。它出现在函数定义的最后一个参数前，格式为 ...parameterName。

例如：

function sum(...numbers) {
return numbers.reduce((total, num) => total + num, 0);
}

sum(1, 2, 3); // 返回 6
sum(4, 5); // 返回 9
sum(); // 返回 0

在这个例子中，...numbers 将所有传入的参数收集为一个数组，然后使用 reduce() 方法计算总和。

与 arguments 对象的区别

在剩余参数出现之前，开发者通常使用函数内部的 arguments 对象来访问所有参数。但 arguments 不是真正的数组，不能直接调用如 map、filter 等数组方法。

剩余参数的优势在于：

它是真正的数组，可以直接使用数组方法
语法更清晰，意图更明确
可以和其他形参共存，只收集未命名的参数

示例对比：

// 使用 arguments
function concatWithArgs() {
return Array.prototype.slice.call(arguments).join(' ');
}

// 使用剩余参数
function concat(...parts) {
return parts.join(' ');
}

结合其他参数使用

剩余参数必须是函数的最后一个参数，前面可以有其他固定参数。

比如，你想让第一个参数作为分隔符，后面的是要连接的内容：

function joinStrings(separator, ...words) {
return words.join(separator);
}

joinStrings('-', 'a', 'b', 'c'); // 返回 'a-b-c'
joinStrings(' ', 'Hello', 'world'); // 返回 'Hello world'

这里 separator 接收第一个参数，其余的都被 ...words 收集。