如何避免Undefined覆盖默认值？基于ES6/ES7实现姓名打印需求

你的需求很清晰：当传入的first或last为undefined时，用预设的默认值替代，而不是输出undefined。咱们先拆解原代码里的几个问题，再一步步修正：

原代码的问题点 #

• 解构未设置单个属性默认值：你给整个name参数设置了默认对象，但当传入部分属性的对象（比如{first: 'A', last: undefined}）时，解构出来的last会直接取传入的undefined，不会自动 fallback 到默认对象的last值。
• 拼写错误：seprator应该是separator，还有fullname和fullName大小写不一致，会导致变量未定义报错。
• 变量未声明：fullname没有用let/const声明，会变成全局变量，这是不符合规范的写法。

修正后的实现（ES6+） #

这里提供两种简洁的实现方式，都能完美满足你的需求：

方式1：解构时为单个属性指定默认值

直接在解构赋值时，给first、last、separator分别绑定默认值，这样不管传入的对象里哪个属性是undefined，都会自动用预设值：

const printName = (name = {}) => {
  // 解构时单独设置每个属性的默认值
  const { 
    first = 'K', 
    last = 'M', 
    separator = ' ' 
  } = name;
  const fullName = `${first}${separator}${last}`;
  console.log(fullName);
  return fullName;
};

// 测试用例
let param = {first: 'A', last: undefined}; 
printName(param); // 输出 "A M"
printName(); // 输出 "K M"
printName({last: 'B'}); // 输出 "K B"

方式2：合并传入参数与默认对象

用对象展开运算符...把传入的参数和默认对象合并，这样传入的属性会覆盖默认值，未传入或为undefined的属性会保留默认值：

const printName = (name = {}) => {
  // 合并默认配置与传入参数
  const defaultName = { first: 'K', last: 'M', separator: ' ' };
  const { first, last, separator } = {...defaultName, ...name};
  const fullName = `${first}${separator}${last}`;
  console.log(fullName);
  return fullName;
};

// 测试效果和方式1一致
printName({first: 'A', last: undefined}); // "A M"

为什么原代码没生效？ #

原代码里的默认值是给整个name参数的，只有当你完全不传参数的时候，name才会使用那个默认对象。但当你传入了一个对象（哪怕里面有属性是undefined），解构就会从你传入的对象里取值，而不会去用默认对象的属性。上面两种方式都是针对单个属性做的默认值处理，所以能解决你的问题。

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