如何避免JavaScript函数未赋值属性输出Undefined？

你的原始函数如下：

function person(settings) {
  console.log(settings.name);
  console.log(settings.age);
}

调用时仅传入name属性：

person({
  name: `Nana`,
});

执行后会输出Nana和undefined，要实现只输出传入的属性、跳过未赋值的属性，有以下几种实用方法：

• 方法一：判断属性存在后再输出
  直接在打印前添加判断，仅当属性存在时才执行打印操作。如果要避免age为0这类假值被误判，用!== undefined更严谨：

  function person(settings) {
    if (settings.name) {
      console.log(settings.name);
    }
    if (settings.age !== undefined) {
      console.log(settings.age);
    }
  }
  

• 方法二：解构赋值+默认值
  先对参数做解构赋值，同时给参数设置默认空对象，再按需打印：

  function person({ name, age } = {}) {
    name && console.log(name);
    age !== undefined && console.log(age);
  }
  

  这种写法更简洁，同时避免了直接访问settings对象可能出现的报错（比如调用时不传参数的情况）。

• 方法三：遍历对象自有属性输出
  如果后续可能扩展更多属性，不想逐个加判断，可以遍历对象的自有属性，只打印传入的内容：

  function person(settings) {
    Object.keys(settings).forEach(key => {
      console.log(settings[key]);
    });
  }
  

  这样不管你传入多少个属性，只会打印那些实际传入的，完全不会出现undefined。

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