JavaScript中为addAlert函数的对象参数设置默认值问询

嘿，这问题我熟！给这个函数的第二个参数属性设置默认值，用ES6的对象解构语法最优雅简洁，当然也给你准备了ES5的兼容方案，看你的项目环境来选～

ES6 优雅方案 #

直接在函数参数里做解构+默认值处理，代码干净利落，不用在函数体内写一堆判断：

function addAlert(stringValue, { 
  status = 'info', 
  position = 'top-right', 
  align = 'center' 
} = {}) {
  // 这里可以直接使用带默认值的三个属性了
  console.log('提示内容:', stringValue);
  console.log('状态:', status);
  console.log('位置:', position);
  console.log('对齐方式:', align);
}

关键细节解释 #

• 对第二个参数进行解构时，给每个属性直接指定默认值，比如status = 'info'，如果传入的对象里没有这个属性，就会自动用默认值。
• 末尾的= {}非常重要！如果调用函数时只传第一个参数（完全不传第二个对象），解构操作会因为没有对象可拆而报错，给整个第二个参数设一个空对象默认值，就能避免这个问题。

调用示例 #

• 只传第一个参数：

  addAlert('操作成功！');
  // 输出会使用所有默认值：status=info，position=top-right，align=center
  

• 传部分属性：

  addAlert('请注意！', { status: 'warning', align: 'left' });
  // position会使用默认值top-right，其他用传入的
  

• 传全部属性：

  addAlert('发生错误！', { status: 'error', position: 'bottom-left', align: 'right' });
  // 所有属性都用传入的值
  

ES5 兼容方案 #

如果你的项目还需要兼容不支持ES6的环境，可以在函数体内手动处理默认值：

function addAlert(stringValue, valueObject) {
  // 先确保valueObject是对象，没传的话设为空对象
  valueObject = valueObject || {};
  
  // 严谨地给每个属性设置默认值（避免 falsy 值被错误覆盖）
  var status = typeof valueObject.status !== 'undefined' ? valueObject.status : 'info';
  var position = typeof valueObject.position !== 'undefined' ? valueObject.position : 'top-right';
  var align = typeof valueObject.align !== 'undefined' ? valueObject.align : 'center';
  
  // 后续业务逻辑
  console.log('提示内容:', stringValue);
  console.log('状态:', status);
  console.log('位置:', position);
  console.log('对齐方式:', align);
}

注意点 #

这里没有用valueObject.status || 'info'的写法，因为如果你的业务场景允许status传入空字符串、0这类 falsy 值，||会把它们替换成默认值，用typeof判断是否未定义会更严谨。

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