ES6函数扩展：手把手教你使用默认参数

ES6 函数默认参数：从避坑到精通的实战指南

你有没有写过这样的代码？

function createUser(name, age, role) { name = name || 'Anonymous'; age = age || 18; role = role || 'user'; // ... }

或者更“严谨”一点的：

if (typeof age === 'undefined') age = 18;

这些冗长又容易出错的防御性判断，在 ES6 之前几乎是 JavaScript 开发者的日常。直到默认参数（Default Parameters）的出现，才真正让函数参数管理变得优雅而直观。

今天我们就来彻底搞懂这个现代 JS 中几乎无处不在的特性——不讲虚的，只聊实战中你会遇到的真实场景、常见陷阱和最佳实践。

什么是默认参数？它解决了什么问题？

简单来说，默认参数允许你在定义函数时直接为形参指定一个“后备值”。当调用函数时没有传对应实参，或传的是undefined，就会自动使用这个默认值。

function greet(name = 'Guest') { console.log(`Hello, ${name}!`); } greet(); // Hello, Guest! greet('Alice'); // Hello, Alice! greet(undefined); // Hello, Guest!（触发默认） greet(null); // Hello, null!（⚠️ 注意！null 不触发默认）

看到最后一行了吗？这是新手最容易踩的坑之一：只有undefined才会触发默认参数，null是一个有效值。

这意味着如果你希望同时处理null和undefined，就不能完全依赖语法层面的默认值，还得手动干预：

function safeGreet(name = 'Guest') { if (name == null) name = 'Guest'; // 同时覆盖 null 和 undefined console.log(`Hello, ${name}!`); }

所以别被“语法糖”迷惑了——理解它的边界条件才是写出健壮代码的关键。

深入机制：默认参数到底是怎么工作的？

✅ 惰性求值：每次调用都重新计算

很多人误以为默认值是在函数定义时就计算好了，其实不然。ES6 的设计非常聪明：默认值表达式是惰性求值的，也就是在每次函数调用时才执行。

来看个经典例子：

function log(msg, timestamp = Date.now()) { console.log(`[${timestamp}] ${msg}`); } setTimeout(() => log('First'), 1000); setTimeout(() => log('Second'), 2000); // 输出两个不同的时间戳

如果默认值是预计算的，那两次输出的时间应该一样。但实际结果证明：每一次调用都会重新运行Date.now()，确保获取最新时间。

这带来了极大的灵活性，但也意味着你要小心副作用：

// ❌ 危险！有副作用 let count = 0; function badExample(value = console.log(count++)) { // 每次未传参都会打印并改变外部状态 }

这类写法会让函数行为变得不可预测，调试困难，应尽量避免。

✅ 参数之间可以互相引用（但顺序很重要）

后续参数可以引用前面已经声明的参数，这种能力在构造配置类函数时特别有用。

function createVector(x, y = x * 2) { return { x, y }; } createVector(5); // { x: 5, y: 10 }

但是注意：不能反向引用！

function wrong(x = y, y = 10) {} // ❌ ReferenceError: Cannot access 'y' before initialization

原因很简单：变量提升规则在这里依然生效。x在初始化时试图读取尚未初始化的y，自然报错。

不过你可以这样绕过去（虽然不推荐）：

function tricky(x = getValue(), y = 10) { function getValue() { return y; } // 利用函数声明提升 return [x, y]; } tricky(); // [10, 10]

但这属于奇技淫巧，可读性差，建议还是老老实实按顺序来。

✅ 解构 + 默认参数：对象参数的安全打开方式

前端开发中最常见的模式之一就是“配置对象传参”，比如：

function connect(options) { const { host, port } = options; // 如果没传 options，这里直接炸了 }

一旦调用方忘记传参，就会抛出：

Cannot destructure property ‘host’ of ‘options’ as it is undefined.

解决办法？组合拳登场：解构 + 默认参数 + 对象默认值。

function connect({ host = 'localhost', port = 8080 } = {}) { console.log(`Connecting to ${host}:${port}`); }

拆开看三层防护：
-{ ... }：对参数进行解构；
-= {}：给整个参数设置默认值，防止undefined导致解构失败；
-host = '...'：给具体属性设默认值。

这样一来，无论你是connect()、connect({})还是connect({ port: 3000 })，都能安全运行。

这也是为什么你在 React 的props处理、Vue 的setup函数、Axios 的请求封装里总能看到这种写法——它是经过实战检验的最佳实践。

实战应用：这些场景你一定会遇到

场景一：工具函数封装 —— 让 API 更友好

假设你要写一个通用的fetch包装器：

async function request(url, { method = 'GET', headers = {}, timeout = 5000, credentials = 'same-origin' } = {}) { const controller = new AbortController(); const id = setTimeout(() => controller.abort(), timeout); try { const res = await fetch(url, { method, headers: { 'Content-Type': 'application/json', ...headers }, credentials, signal: controller.signal }); clearTimeout(id); return await res.json(); } catch (err) { if (err.name === 'AbortError') { throw new Error(`Request timed out after ${timeout}ms`); } throw err; } }

调用时只需要关心差异部分：

request('/api/users'); request('/api/admin', { method: 'POST', timeout: 10000 });

用户无需记忆所有选项，默认值帮你兜底，大幅降低使用成本。

场景二：日志系统设计 —— 提升容错与可追踪性

日志函数往往需要灵活支持多种输入：

function log(level = 'info', message = '', context = {}) { const time = new Date().toISOString(); const entry = `[${time}] ${level.toUpperCase()}: ${message}`; console[level in console ? level : 'log'](entry, context); // 错误日志上报 if (level === 'error' && navigator.sendBeacon) { navigator.sendBeacon('/logs', JSON.stringify({ level, message, context, time })); } }

调用方式极其自由：

log(); // info: log('warn', 'Disk space low'); // 警告提示 log('error', 'Network failed', { url }); // 自动上报 + 上下文

通过合理设置默认值，既保证了最小可用性，又不失扩展空间。

场景三：组件初始化配置 —— 防止运行时崩溃

在构建 SDK 或 UI 组件库时，初始化配置常以对象形式传入：

function initPlayer(config = {}) { const { autoplay = false, volume = 0.7, src, onPlay = () => {}, onPause = () => {} } = config; // 初始化逻辑... }

即使用户只传了个空对象甚至什么都不传，也不会导致程序崩溃。这就是默认参数带来的“软性约束”。

常见误区与调试技巧

❌ 误区一：认为null会触发默认值

再强调一遍：

function test(val = 'default') { console.log(val); } test(null); // null ← 不会替换！ test(); // 'default' test(undefined); // 'default'

如果你希望null也走默认逻辑，必须显式处理：

function normalize(val = 'default') { return val == null ? 'default' : val; }

或者使用双问号操作符（ES2020）：

function better(val) { val ??= 'default'; // 相当于 val = val ?? 'default' console.log(val); }

❌ 误区二：在默认值里调用函数产生意外副作用

function dangerous(data = heavyComputation()) { // 如果 heavyComputation 很慢或修改全局状态…… }

虽然惰性求值是优点，但如果这个函数本身很重，会影响性能。更糟的是，如果它修改了外部变量，会导致函数非纯。

✅ 正确做法：保持默认值轻量、无副作用。

❌ 误区三：嵌套解构层级太深，难以维护

function deep({ a: { b: { c = 10 } = {} } = {} } = {}) { // 天书级代码，没人看得懂 }

虽然语法上合法，但严重牺牲可读性。建议在这种情况下改用函数体内合并配置的方式：

function withDefaults(options = {}) { const defaults = { a: { b: { c: 10 } } }; return Object.assign({}, defaults, options); }

清晰、易测、好维护。

最佳实践清单

举个 TS 示例：

function greet(name: string = 'Guest'): void { console.log(`Hello, ${name}`); } // TypeScript 能正确推断 name 永远不会是 undefined

类型安全 + 语法便利，双重保障。

写在最后

默认参数看似只是一个小小的语法改进，但它背后体现的是 JavaScript 向更现代化、更工程化语言演进的趋势。

它不只是省了几行||判断，更重要的是：
- 把“意图”写进了函数签名；
- 让调用者不必查阅文档就能猜出合理用法；
- 让错误更早暴露，而不是运行到一半才崩。

当你开始习惯用默认参数去思考函数设计时，你会发现自己的 API 变得越来越干净、越来越可靠。

下次写函数前，不妨问问自己：

“哪些参数其实是可选的？它们的合理默认值是什么？”

答案可能就是一段更优雅代码的起点。

如果你在项目中用到了有趣的默认参数技巧，欢迎在评论区分享交流！