首页 > 文章 > 前端

JavaScript剩余参数与默认值怎么用

时间：2025-11-22 10:03:36 183浏览收藏

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《JavaScript剩余参数与默认值详解》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

剩余参数和默认参数提升JavaScript函数灵活性：剩余参数（...args）收集多余参数为数组，必须位于参数列表末尾；默认参数为形参提供备用值，调用时未传参或为undefined则使用默认值，可依赖前置参数；二者可结合使用，适用于日志、配置等场景，减少冗余判断，增强代码可读性与健壮性。

JavaScript参数处理_剩余参数与默认值

JavaScript中处理函数参数的方式在ES6之后变得更加灵活，尤其是剩余参数和默认参数的引入，极大提升了开发效率和代码可读性。它们让函数能更自然地应对不确定的参数数量或缺失的参数值。

剩余参数：接收多余的函数参数

剩余参数允许我们将一个函数中“剩余”的参数收集到一个数组中，方便统一处理。

语法是在参数名前加三个点 ...，例如 ...args。

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

sum(1, 2, 3, 4); // 返回 10
sum(5, 10); // 返回 15

上面的例子中，第一个参数传给 a，其余所有参数都被收集进 numbers 数组。注意：剩余参数必须是函数参数列表中的最后一个。

默认参数：为参数设置默认值

当调用函数时未传入某个参数，或传入了 undefined，默认参数会生效。

默认参数可以是原始值、表达式，甚至是其他参数的引用（只要顺序正确）：

function createId(prefix = "item", count = prefix.length) {
　return prefix + "-" + count;
}

createId(); // "item-4"
createId("user"); // "user-4"

结合使用：更强大的参数控制

剩余参数和默认参数可以同时出现在一个函数中，实现更灵活的逻辑设计。

function log(level = "info", ...messages) {
　const timestamp = new Date().toISOString();
　console[level](timestamp, ...messages);
}

log("error", "文件未找到", 404);
log(); // info 级别，无消息也安全执行

这种组合适合构建日志、配置初始化、工具函数等场景，既保证了必要参数的兜底，又能处理任意数量的附加输入。

基本上就这些。合理使用剩余参数和默认值，能让函数接口更清晰，减少防御性判断，提升代码健壮性。不复杂但容易忽略细节，比如默认参数的求值时机和剩余参数的位置限制。掌握它们，写现代JavaScript更顺手。

终于介绍完啦！小伙伴们，这篇关于《JavaScript剩余参数与默认值怎么用》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！