ES6语法新手教程：默认参数与剩余参数解析
从“防错”到“优雅”：用 ES6 默认参数与剩余参数重塑函数设计
你有没有写过这样的代码？
function greet(name, message) { if (typeof name === 'undefined') { name = 'Guest'; } if (typeof message === 'undefined') { message = 'Hello'; } return `${message}, ${name}!`; }或者，为了处理多个参数，不得不翻出arguments：
function sum() { let total = 0; for (let i = 0; i < arguments.length; i++) { total += arguments[i]; } return total; }这些写法在 ES5 时代司空见惯，但它们的问题也很明显：啰嗦、易错、语义模糊。直到 ES6 的到来，JavaScript 才真正为函数参数带来了现代化的解决方案——默认参数和剩余参数。
今天我们就来深入聊聊这两个看似简单、实则深刻改变编码方式的语言特性。它们不只是语法糖，而是一种思维方式的升级：从“我得防止出错”，转向“我天生就能应对变化”。
默认参数：让函数自己兜底
它解决了什么问题？
在没有默认参数之前，我们写函数时总得提心吊胆：“万一别人不传参数怎么办？”于是满屏都是if判断或三元表达式。这种“防御性编程”不仅拉低了代码可读性，也让函数的核心逻辑被淹没在一堆边界检查中。
而默认参数的出现，直接把“缺省值”的声明前置到了函数定义层面——声明即意图。
function greet(name = 'Guest', message = 'Hello') { return `${message}, ${name}!`; }就这么一行，清晰明了。调用者一眼就知道哪些参数是可选的，开发者也不再需要写一堆初始化逻辑。
关键细节你真的懂吗？
很多人知道可以写param = value，但以下几个行为才是决定你是否真正掌握的关键：
✅ 只有undefined才会触发默认值
greet(undefined, undefined); // 'Hello, Guest!' —— 触发默认 greet(null, false); // 'false, null!' —— 不触发，默认值被跳过 greet('', 0); // '0, !' —— 原样保留这一点非常重要！很多初学者误以为“falsy 值”都会走默认分支，其实不会。这意味着你可以明确区分“用户传了 null”和“用户根本没传”。
✅ 默认值支持表达式，且是惰性求值
function logWithTimestamp(msg, timestamp = Date.now()) { console.log(`[${new Date(timestamp)}] ${msg}`); }这里的Date.now()只在timestamp未传时才会执行，不会每次函数定义就运行。这是性能优化的关键点。
✅ 后面的参数可以依赖前面的
function createUrl(base = 'https://api.example.com', path = '/users', fullPath = `${base}${path}`) { return fullPath; }注意：只能引用前面的参数，不能反向依赖。比如path = base + '/users'是合法的；但如果base = path + '...'就会报错，因为path还没初始化。
和解构搭配使用：配置型函数的终极形态
现代前端开发中，配置对象无处不在。React 的 props、Axios 的请求选项……如何优雅地设置默认值？答案就是：解构 + 默认参数。
function connect({ host = 'localhost', port = 8080, ssl = false, timeout = 5000 } = {}) { const protocol = ssl ? 'https' : 'http'; console.log(`${protocol}://${host}:${port} (timeout: ${timeout}ms)`); }特别注意最后那个= {}—— 如果你不加它，当调用connect()时不传任何参数，就会尝试对undefined解构，直接报错！
这个模式已经成为库设计的标准实践。记住一句话：只要有解构，就要考虑外部对象是否可能为空。
剩余参数：告别arguments的黑暗时代
为什么arguments不再推荐使用？
在 ES6 之前，所有函数都能访问一个叫arguments的类数组对象。但它有几个致命缺陷：
- 不是真正的数组，不能直接调用
.map()、.filter()； - 没有
Symbol.iterator，无法用于for...of； - 在箭头函数中根本访问不到；
- 类型系统（如 TypeScript）难以推断其结构。
而剩余参数...rest彻底解决了这些问题。
基本用法：收集“剩下的”
function logAll(first, second, ...others) { console.log('前两个:', first, second); console.log('其余的:', others); // 真·数组！ } logAll('a', 'b', 'c', 'd', 'e'); // 输出: // 前两个: a b // 其余的: ['c', 'd', 'e']从此以后，你可以放心大胆地对others调用.forEach()、.reduce()，甚至解构成[head, ...tail]来做递归处理。
技术优势一览
| 能力 | 使用arguments | 使用...rest |
|---|---|---|
调用.map() | ❌ 必须Array.prototype.map.call(arguments) | ✅ 直接调用 |
| 在箭头函数中使用 | ❌ 报错 | ✅ 完全支持 |
| 参数位置控制 | ❌ 隐式存在，无法选择性捕获 | ✅ 明确指定从哪开始收集 |
| 类型推断（TS） | ⚠️ 难以准确描述 | ✅ 可标注为string[]或any[] |
尤其是在构建工具函数、中间件、装饰器等高阶场景下，剩余参数几乎是唯一合理的选择。
实战案例：实现一个通用代理函数
设想你要写一个日志代理，记录每次函数调用的参数数量和结果：
function withLogging(fn, fnName) { return function(...args) { console.log(`[LOG] Calling ${fnName} with ${args.length} args`); const result = fn(...args); console.log(`[LOG] Result:`, result); return result; }; } const add = (a, b) => a + b; const trackedAdd = withLogging(add, 'add'); trackedAdd(3, 7); // [LOG] Calling add with 2 args // [LOG] Result: 10这里的关键在于：
-...args收集所有传入参数；
-fn(...args)再通过展开运算符原样传回目标函数；
- 整个过程无需关心具体有几个参数，完全透明转发。
这种“参数透传”能力，在 AOP（面向切面编程）、缓存、重试机制中极为常见。
默契搭档：默认参数 + 剩余参数 = 更强的函数表达力
单独使用已经很强大，但两者结合时，才能真正释放威力。
经典组合：日志函数的设计哲学
来看一个真实项目中常见的需求：写一个灵活的日志函数，既能指定级别，又能接受任意数量的消息片段。
function logger(level = 'info', ...messages) { const time = new Date().toISOString(); const output = messages.map(m => typeof m === 'object' ? JSON.stringify(m) : String(m) ).join(' '); console.log(`[${time}] ${level.toUpperCase()}: ${output}`); }现在我们可以这样调用：
logger('error', 'File not found', { path: '/tmp' }); logger('warn', 'Retry attempt #1'); logger(undefined, 'App started'); // 自动降级为 'info' logger(); // 完全使用默认值你会发现，这个函数几乎没有做任何防御性判断，却异常健壮。这就是声明式设计的魅力：你不需要告诉它“怎么处理缺失”，而是直接说明“应该是什么样子”。
工程实践中的最佳建议
掌握了语法之后，更重要的是知道怎么用才不会踩坑。
✅ 推荐做法
优先使用剩余参数替代
arguments
即使是在普通函数中也应如此。统一风格有助于团队协作和静态分析。参数顺序要有逻辑
固定参数 → 可选参数（带默认值）→ 剩余参数。例如：js function formatList(separator, unit = 'px', ...values) { ... }避免副作用初始化
```js
// ❌ 危险：heavyInit() 可能在函数定义时就被调用
function cacheData(data, store = heavyInit()) { … }
// ✅ 更安全的做法放在函数体内
function cacheData(data, store) {
if (!store) store = heavyInit();
// …
}
```
配合 TypeScript 提升类型安全
ts function sendRequest(url: string, ...headers: string[]): Promise<Response> { // headers 类型自动推断为 string[] }注意兼容性问题
- IE 全系列不支持；
- Node.js 6+ 支持良好；
- 若需兼容旧环境，请使用 Babel 转译（推荐 preset-env）。
小功能，大影响：通往高级编程的桥梁
也许你会觉得：“这不就是个参数简化技巧吗？” 但实际上，默认参数和剩余参数是通向更高级编程范式的入口。
- 柯里化（Currying）：利用默认参数模拟部分应用；
- 函数组合（Function Composition）：通过剩余参数实现泛型包装；
- DSL 设计：构造更具表达力的 API，如测试框架中的
it(description, ...setupSteps)； - 命令行解析：CLI 工具中统一处理变长参数；
它们让你写的函数不再是“被动接收输入”，而是“主动定义契约”。
如果你正在学习 React，你会发现props的默认值处理几乎一模一样：
function UserCard({ name = 'Anonymous', avatar = 'default.png', size = 'medium' }) { return <div className={`card-${size}`}>...</div>; }Vue 3 的setup()函数、Express 的中间件、Node.js 的回调封装……处处都有这两项特性的影子。
所以，别再把它们当成“小技巧”。这是现代 JavaScript 开发者的语言直觉的一部分。
当你下次写函数时，不妨问自己一句：
“这个参数是不是总是必须的？有没有合理的默认状态？用户会不会传一堆类似的东西进来？”
如果答案是肯定的，那就该轮到=和...上场了。