ES6函数扩展中的默认参数用法：新手教程

ES6函数默认参数实战指南：告别冗余判断，写出更聪明的函数

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

function greet(name) { name = name || 'Guest'; return `Hello, ${name}!`; }

看似没问题，但一旦传入'0'、false或空字符串，结果就会出人意料。这种“防御性编程”在早期 JavaScript 中司空见惯，直到ES6带来了真正的解法——函数参数默认值。

这不只是语法糖，而是一种让函数接口更清晰、调用更灵活的核心能力。作为现代 JavaScript 开发者，掌握它不是加分项，而是基本功。

从“手动补丁”到“原生支持”：为什么我们需要默认参数？

在 ES6 之前，为函数参数设默认值只能靠运行时判断：

function createModal(title, size, backdrop) { title = title === undefined ? '提示' : title; size = size || 'medium'; // ❌ 会把 '0'、false 当成无效值 backdrop = (backdrop !== undefined) ? backdrop : true; console.log({ title, size, backdrop }); }

三行初始化代码，逻辑还容易出错。尤其是用||判断时，任何“falsy”值（如0,'',false）都会被替换，这不是我们想要的。

ES6 的默认参数直接在语法层面解决了这个问题：

function createModal( title = '提示', size = 'medium', backdrop = true ) { console.log({ title, size, backdrop }); }

简洁、安全、意图明确。只有当参数是undefined或未传时，才会使用默认值。这意味着你可以放心传入false、0、空字符串，它们都会被正常保留。

✅ 核心规则：只有undefined和参数缺失会触发默认值，null不会。

createModal('登录', 'small', false); // 正常：关闭遮罩 createModal('登录', 'small', null); // size='small', backdrop=null —— null 被保留 createModal(); // 全部使用默认值

这一条看似简单，却是避免 bug 的关键。

默认参数的三大高阶特性，你知道几个？

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

默认参数的表达式是在每次函数调用时才执行的，而不是定义时一次性确定。

function log(msg, timestamp = Date.now()) { console.log(`[${timestamp}] ${msg}`); } // 两次调用时间不同 log('启动'); // [1712345678901] 启动 log('就绪'); // [1712345678905] 就绪

这个特性非常有用。比如生成唯一 ID、记录日志时间戳、创建新数组等场景，都能保证每次都是“新鲜”的值。

⚠️ 对比陷阱：

```js
// 错误示范：共享同一个数组引用
function badExample(arr = []) {
arr.push(1);
return arr;
}

badExample(); // [1]
badExample(); // [1, 1] —— 糟糕！
```

正确做法是确保每次返回新实例：

js function goodExample(arr = []) { return [...arr, 1]; // 返回新数组 }

2. 支持复杂表达式，甚至依赖前面的参数

默认值可以是函数调用、数学运算，甚至引用前面已定义的参数。

function multiply(a, b = a * 2) { return a * b; } multiply(3); // a=3, b=6 → 18

但注意：不能引用后面的参数，因为它们还未定义。

// ❌ 报错：Cannot access 'b' before initialization function wrong(a = b, b = 5) { }

不过你可以反过来写：

function correct(b = 5, a = b * 2) { return { a, b }; } correct(); // { a: 10, b: 5 }

顺序很重要。

3. 解构 + 默认参数：配置对象的最佳拍档

这是现代 JS 中最实用的组合之一。尤其在封装 API、初始化设置时，几乎成了标配。

function connect({ host, port, ssl } = {}) { const finalHost = host || 'localhost'; const finalPort = port || 8080; const finalSsl = ssl !== undefined ? ssl : true; console.log(`连接 ${finalHost}:${finalPort} via ${finalSsl ? 'HTTPS' : 'HTTP'}`); }

等等，这样写还是回到了“手动判断”的老路。如何真正发挥默认参数的优势？

正确姿势如下：

function connect({ host = 'localhost', port = 8080, ssl = true } = {}) { console.log(`连接 ${host}:${port} via ${ssl ? 'HTTPS' : 'HTTP'}`); }

这里有两个层级的默认值：
- 外层{}：防止调用connect()时报错（解构undefined）
- 内层各字段：提供具体默认配置

调用方式自然又灵活：

connect(); // 使用全部默认 connect({ host: 'api.example.com' }); // 只改 host connect({ ssl: false }); // 关闭 HTTPS

🔍 为什么必须给整个对象设默认值？

如果没有= {}，当你调用connect()且不传参数时，相当于尝试解构undefined，会抛出错误：

TypeError: Cannot destructure property 'host' of 'undefined'

实战案例：打造一个智能 HTTP 客户端

让我们用默认参数重构一个常见的fetch包装器。

需求分析

• 支持 GET/POST
• 自动设置 JSON header
• 默认 5s 超时
• 可自定义 body、headers
• 调用简单，省略参数也能工作

最终实现

async function request(url, { method = 'GET', headers = { 'Content-Type': 'application/json' }, timeout = 5000, body = null } = {}) { const config = { method, headers, body }; // 添加超时控制 const controller = new AbortController(); const id = setTimeout(() => controller.abort(), timeout); try { const res = await fetch(url, { ...config, signal: controller.signal }); clearTimeout(id); return await res.json(); } catch (err) { if (err.name === 'AbortError') { console.warn(`请求 ${url} 超时`); } else { console.error('网络错误:', err); } throw err; } }

使用示例

// 1. 最简调用 request('/users'); // 2. 自定义方法和数据 request('/login', { method: 'POST', body: JSON.stringify({ user: 'admin' }) }); // 3. 修改超时时间 request('/slow-api', { timeout: 10000 });

设计亮点

• 参数对象模式：多个可选参数合并为一个对象，避免参数顺序困扰
• 双层默认机制：外层= {}防崩溃，内层字段设合理初值
• 动态配置合并：用户传什么就用什么，没传的自动补全
• 接口自文档化：看一眼函数签名就知道有哪些选项可用

常见误区与最佳实践

❌ 误区一：滥用||替代默认参数

// 错误 function render(text, color) { color = color || 'black'; // 如果 color='red' 以外的 falsy 值？不行！ } // 正确 function render(text, color = 'black') { // ... }

||会在color为''、0、false时误判；而默认参数只对undefined生效，精准得多。

❌ 误区二：忽略外层默认对象

// 危险！ function setup({ port, env }) { // ... } setup(); // 报错！

必须加上= {}才安全。

✅ 推荐实践

1. 优先使用默认参数替代运行时判断
2. 多个可选参数建议合并为配置对象
3. 布尔类参数尽量用命名对象代替位置参数

```js
// 不推荐
createUser(‘Alice’, true, false);

// 推荐
createUser(‘Alice’, { isAdmin: true, notify: false });
```

4. 避免副作用强的默认表达式（如修改全局变量）

写在最后

ES6 的默认参数看似只是一个小小的语法改进，实则深刻改变了我们设计函数的方式。它让我们能写出：
- 更健壮的接口（无需担心undefined）
- 更清晰的代码（默认行为一目了然）
- 更灵活的调用（按需传参）

更重要的是，它是通往现代 JavaScript 的入口之一。后续的剩余参数（...args）、展开语法（...obj）、箭头函数等特性，都在构建同一种理念：让函数更纯粹、更易组合、更具表达力。

当你下次写函数时，不妨问自己一句：
“这个参数有没有合理的默认行为？”
如果有，别犹豫，直接写上= defaultValue。

这才是真正属于 2025 年的 JavaScript。

如果你正在学习 ES6 函数扩展，欢迎在评论区分享你的使用心得或遇到的坑。我们一起进步。