ES6函数对象参数：传入部分属性时如何保留未传参默认值？

这个问题其实挺典型的——ES6里给函数参数设对象默认值时，只有当你完全不传参数的时候，默认对象才会生效。一旦你传了哪怕是只有部分属性的对象，整个默认对象就被替换掉了，没传的属性自然就成了undefined。

用扩展运算符（...）来合并默认值和传入参数，就能轻松解决这个问题，给你两种实用的写法：

1. 函数内部合并默认值与传入参数 #

这种写法最直观，先给参数设一个空对象作为兜底默认值，然后在函数内部用扩展运算符把预设的默认对象和传入的参数合并——传入的属性会覆盖默认值，没传入的就保留默认值：

function exampleFunction(objParam = {}) {
  // 合并默认配置和传入参数，传入的属性优先级更高
  const mergedParams = { val1: 1, val2: 2, ...objParam };
  
  // 后续逻辑直接用 mergedParams 即可
  console.log(mergedParams.val1, mergedParams.val2);
}

// 测试一下：
exampleFunction(); // 输出 1 2（完全用默认值）
exampleFunction({ val1: 3 }); // 输出 3 2（val2保留默认）
exampleFunction({ val2: 4 }); // 输出 1 4（val1保留默认）
exampleFunction({ val1: 3, val2: 4 }); // 输出 3 4（完全用传入值）

2. 参数解构时结合扩展（进阶写法） #

如果你希望在参数层面就处理好合并，也可以结合对象解构和扩展运算符，不过这种写法更适合需要直接提取属性的场景：

function exampleFunction({ ...receivedParams } = {}) {
  const mergedParams = { val1: 1, val2: 2, ...receivedParams };
  // 后续操作和上面一致
}

原理说明 #

扩展运算符...会把传入对象的所有可枚举属性展开，然后和默认对象进行合并。当属性名重复时，后面的属性（也就是传入的参数）会覆盖前面的默认属性，这样就保证了所有属性始终有值——要么是你传入的，要么是预设的默认值。

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