JavaScript函数参数的对象可选字段如何设置默认值避免丢失？

问题原因 #

你当前的写法是给options整个参数设置默认对象，只要调用时传入了自定义options参数（哪怕仅包含单个字段），整个默认对象就会被完全替换，不会自动合并未显式传入的字段，因此会出现默认值丢失的问题。

方案1：参数解构赋默认值（最推荐） #

在参数位置直接对options进行解构，单独给每个可选字段设置默认值，同时给整个options参数设置空对象的兜底默认值，兼容不传options的场景：

function myFunction(data, { merge = true, cache = false } = {}) {
   console.log({ merge });
   console.log({ cache });
   console.log("----------------------");
}

// 测试调用
myFunction({}, { cache: true }); // merge: true, cache: true
myFunction({}, { merge: false }); // merge: false, cache: false
myFunction({}); // merge: true, cache: false

方案2：内部合并配置对象 #

如果需要保留原参数写法，可在函数内部合并默认配置和传入的配置，传入配置的同名字段会覆盖默认值，未传入的字段自动保留默认值：

function myFunction(data, options = {}) {
   const defaultOptions = { merge: true, cache: false };
   // 方法1：用Object.assign合并
   const finalOptions = Object.assign({}, defaultOptions, options);
   // 方法2：用对象展开运算符合并，效果和上面一致
   // const finalOptions = {...defaultOptions, ...options};
   
   console.log({ merge: finalOptions.merge });
   console.log({ cache: finalOptions.cache });
   console.log("----------------------");
}

内容的提问来源于stack exchange，提问作者Raul