为什么说 ES6 的参数默认值，是每个 JS 开发者都该掌握的“基本功”？
你有没有写过这样的代码？
function greet(name) { name = name || 'Guest'; console.log('Hello, ' + name); }或者更复杂的：
function connect(options) { options = options || {}; var host = options.host || 'localhost'; var port = options.port || 8080; var protocol = options.protocol || 'http'; // ... }这类“防御性编程”在 ES5 时代司空见惯。但问题也显而易见：啰嗦、重复、容易出错——比如当name被传入false或空字符串时，也会被误判为“无值”，从而错误地使用默认值。
直到ES6带着参数默认值（Default Parameters）登场，这一切才真正被改写。
这不仅仅是一个语法糖，而是一种思维方式的升级：把默认行为从函数体里“提升”到函数签名中，让意图一目了然。
参数默认值，到底怎么工作的？
我们先看一个最简单的例子：
function greet(name = 'Guest') { console.log(`Hello, ${name}`); } greet(); // Hello, Guest greet('Alice'); // Hello, Alice greet(undefined); // Hello, Guest greet(null); // Hello, null greet(''); // Hello,看出门道了吗？只有undefined会触发默认值。
这意味着：
-null是一种明确的“空值”意图，JS 尊重它；
- 空字符串""和false也是有效值，不会被替换；
- 只有“缺失”或“未定义”才会启用后备方案。
这个设计非常精准——它区分了“用户没给”和“用户给了个空”的语义差异。
惰性求值：每次调用都重新计算
很多人以为默认值是在函数定义时就确定的。错。
ES6 的默认值是惰性求值（Lazy Evaluation）：每次函数被调用且需要时，才执行表达式。
let count = 0; function nextId() { return ++count; } function createUser(id = nextId()) { return { id }; } console.log(createUser()); // { id: 1 } console.log(createUser()); // { id: 2 } console.log(createUser(100)); // { id: 100 } —— 不触发默认值这个特性太实用了。你可以安全地用函数生成默认值，比如时间戳、随机数、唯一 ID……不用担心它们提前执行或被缓存。
参数之间能互相引用吗？可以，但有顺序！
后面的参数可以引用前面的参数作为默认值：
function rectangleArea(width, height = width) { return width * height; } rectangleArea(5); // 25 → height 使用了 width rectangleArea(4, 6); // 24但反过来不行：
function badExample(a = b, b = 2) { // ❌ ReferenceError: Cannot access 'b' before initialization }为什么？因为参数列表有自己的作用域，而且遵循类似let的“临时死区（Temporal Dead Zone）”规则：你不能在变量初始化前访问它。
所以记住：想被别人依赖的参数，必须放前面。
高阶玩法：解构 + 默认值 = 现代 JS 函数接口范式
真正让参数默认值大放异彩的，是它与解构赋值的组合拳。
场景1：配置对象的优雅处理
我们经常写这种函数：
function drawChart(options) { const size = options.size || 'large'; const x = options.coords?.x ?? 0; const y = options.coords?.y ?? 0; // ... }现在可以这样写：
function drawChart({ size = 'large', coords = { x: 0, y: 0 }, radius = 5 } = {}) { console.log(size, coords, radius); }关键点在于最后那个= {}：它给整个参数对象设了个默认值。否则当你调用drawChart()时，会因为尝试对undefined解构而报错。
这个模式几乎成了现代 JS 库的标准做法。比如你在用 React 的自定义 Hook、Vue 的 Composable、或是封装一个 SDK API 时，都会看到它的身影。
场景2：模拟“命名参数”
JavaScript 没有原生的命名参数，但我们可以通过对象解构来模拟：
function connect({ host = 'localhost', port = 8080, protocol = 'https', timeout = 3000 } = {}) { return `${protocol}://${host}:${port}`; }调用时清晰又灵活：
connect(); // 使用全部默认值 connect({ host: 'api.example.com' }); // 只改 host connect({ port: 3000, timeout: 5000 }); // 改多个相比传统的位置参数，这种方式可读性强得多，也不怕参数顺序搞混。
实战案例：构建一个健壮的用户注册函数
来看一个真实开发中常见的需求：注册用户。
function registerUser( email, { password, username = email.split('@')[0], // 默认取邮箱前缀 role = 'user', // 默认普通用户 active = true, // 默认激活状态 createdAt = new Date() // 默认当前时间 } = {} ) { if (!email) throw new Error('Email is required'); return { email, username, role, active, createdAt }; }调用方式极其灵活：
registerUser('alice@example.com'); // → 自动生成用户名 alice，其他默认 registerUser('bob@example.com', { password: '123456', role: 'admin' }); // → 自定义密码和角色，用户名仍为 bob这里有几个精妙之处：
-email是必填项，放在前面；
- 配置对象整体有默认值{}，防止解构失败；
-username动态依赖email，体现数据关联；
-createdAt利用惰性求值，每次都是新时间。
这套设计既保证了必要字段的安全性，又提供了极高的扩展自由度。
常见坑点与避坑指南
坑1：忘了给解构参数设整体默认值
function bad({ a, b }) { // 如果不传参数，直接报错：Cannot destructure property 'a' of 'undefined' } // 正确做法 function good({ a, b } = {}) { // 安全 }这是新手最容易犯的错误之一。只要参数是解构的，就必须考虑“不传”的情况。
坑2：在默认值里做副作用操作，却不理解后果
function log(msg, timestamp = console.log('logged!') && Date.now()) { // 每次调用都会打印一次 }虽然技术上可行，但如果副作用是发请求、改全局状态等，就会导致难以预料的行为。除非你明确需要（比如生成唯一 ID），否则避免在默认值中引入副作用。
坑3：误以为null会触发默认值
再强调一遍：
只有
undefined触发默认值，null不会！
function test(x = 'default') { return x; } test(null); // null test(false); // false test(''); // '' test(); // 'default' test(undefined); // 'default'如果你希望null也被视为“无值”，可以在函数体内用??运算符处理：
function handle(value = 'fallback') { value = value ?? 'fallback'; // 同时处理 null 和 undefined return value; }最佳实践清单
✅优先为可选参数设置默认值
特别是布尔、数字、字符串类型，减少条件判断。✅解构参数时，务必加上
= {}
这是防错的基本素养。✅将常被依赖的参数放在前面
以便后续参数能引用它。✅复杂逻辑放函数体，简单表达式放默认值
默认值适合写true、[]、{}、简单函数调用；复杂的业务逻辑还是留在函数内部更清晰。✅配合 JSDoc 注释，提升团队协作效率
/** * 发送邮件 * @param {string} to - 收件人地址 * @param {string} [subject='Notification'] - 主题，默认为 "Notification" * @param {boolean} [urgent=false] - 是否紧急 */ function sendEmail(to, subject = 'Notification', urgent = false) { // ... }工具如 VS Code、TypeScript、JSDoc 解析器都能自动识别这些注释，极大提升开发体验。
写在最后
参数默认值看似只是一个小小的语法改进，但它背后反映的是 JavaScript 向更声明式、更安全、更可维护语言演进的趋势。
它让我们能把“这个参数如果没有，就用什么”的逻辑，从杂乱的if和||中解放出来，直接写在函数头上——就像写数学公式一样自然。
如今，在 React、Vue、Node.js、各种工具库中，这种模式无处不在。可以说，不懂参数默认值 + 解构赋值的组合，就等于不会写现代 JavaScript 函数。
所以，别再写arg = arg || default了。升级你的思维模型，从下一个函数开始，就用 ES6 的方式去定义接口吧。
如果你在项目中遇到过更复杂的默认值场景，欢迎在评论区分享讨论。
