javascript中利用函数参数默认值合并配置对象的核心是将默认配置设为形参默认值,再用展开运算符(...)或object.assign()进行浅层覆盖合并,顺序决定覆盖关系,既简洁又避免污染原对象。

JavaScript 中利用函数参数默认值合并配置对象,核心在于把默认配置作为形参的默认值,再用展开运算符(...)或 Object.assign() 与传入配置合并——既简洁又避免污染原对象,还能天然支持深层默认值逻辑。
用默认参数 + 展开运算符合并顶层配置
最常见也最直观的方式:把默认配置对象设为参数默认值,再用 {...defaults, ...options} 覆盖。注意顺序——后者属性会覆盖前者。
function createButton(options = {}) {
const defaults = {
type: 'button',
size: 'medium',
disabled: false,
className: 'btn'
};
return { ...defaults, ...options };
}
createButton({ size: 'large', className: 'btn-primary' });
// → { type: 'button', size: 'large', disabled: false, className: 'btn-primary' }
- 默认值写在参数位置,调用时可省略整个参数,语义清晰
- 展开合并是浅拷贝,适合扁平配置;若传入
null或undefined,仍会走默认值 - 不推荐直接修改
defaults对象,防止意外副作用
用解构赋值 + 默认值精细控制字段级默认行为
当只关心部分字段、且希望某些字段有独立默认逻辑(比如依赖其他字段),可用解构默认值,更灵活:
function fetchUser({ id, timeout = 5000, retry = id ? 2 : 0, headers = {} } = {}) {
return { id, timeout, retry, headers: { 'Content-Type': 'application/json', ...headers } };
}
fetchUser({ id: 123 });
// → { id: 123, timeout: 5000, retry: 2, headers: { 'Content-Type': 'application/json' } }
fetchUser({});
// → { id: undefined, timeout: 5000, retry: 0, headers: { 'Content-Type': 'application/json' } }
- 每个字段可设独立默认值,甚至带简单表达式(如
retry = id ? 2 : 0) - 解构默认值对
undefined生效,但对null不生效(需额外判断) - 嵌套解构也能用,默认值可继续解构,适合固定结构的配置
结合 Object.assign 实现可复用的默认合并工具
若多个函数共用同一套默认配置,可封装一个工厂函数,返回带默认值的配置合并器:
const withDefaults = (defaults) => (options = {}) =>
Object.assign({}, defaults, options);
const createModal = withDefaults({
backdrop: true,
keyboard: true,
centered: false
});
createModal({ centered: true });
// → { backdrop: true, keyboard: true, centered: true }
-
Object.assign和展开语法效果类似,但兼容性更好(支持 IE11) - 工厂模式让默认配置集中管理,避免重复定义
- 返回的是新对象,原始
defaults和options均不受影响
注意:浅合并不解决嵌套配置,需要时用深合并库或递归处理
上述方法都是浅合并。如果配置含嵌套对象(如 style: { color: 'red' }),直接展开会整块替换,无法“融合”子属性:
const defaults = { style: { color: 'black', fontSize: '14px' } };
const options = { style: { color: 'blue' } };
{ ...defaults, ...options } // → { style: { color: 'blue' } } ❌ 丢失 fontSize
此时应改用 lodash.merge、structuredClone + 递归合并,或明确约定嵌套字段单独传入(如 styleColor, styleFontSize)。
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











