JavaScript中return语句配合Spread Operator的具体用法疑问

1. 作用对象 #

这里扩展运算符...的作用对象是后面三元表达式的返回值：

• 当userCanDecline为true时，作用对象是包含「拒绝和棋」按钮配置项的数组
• 当userCanDecline为false时，作用对象是空数组[]

2. 具体使用逻辑 #

这是数组扩展运算符的常见条件注入用法：在声明外层数组的同时，把三元表达式返回的子数组的所有元素展开平铺到外层数组的对应位置。
如果你的外层数组还有其他固定的按钮配置项（比如同意和棋、申请重开这类固定展示的操作），可以直接写在这个展开逻辑的前后，不需要额外做数组操作。

3. 实现效果 #

核心效果是根据权限动态生成操作按钮列表：

• 用户有拒绝权限（userCanDecline = true）时，最终返回的数组会包含「拒绝和棋」的按钮配置
• 用户无权限时，三元返回空数组，展开后不会往外层数组添加任何元素，不影响其他固定按钮的展示

等价实现参考 #

你完全可以把这段写法转换成更容易理解的普通条件判断写法，二者效果完全一致：

// 初始化按钮列表，可先推入其他固定展示的按钮
const actionButtons = []

if (userCanDecline) {
  // 有权限时追加拒绝按钮
  actionButtons.push({
    label: 'Decline Draw',
    icon: 'ban',
    action: () => (el, ev) => {
      Service.decline(this.onCloseView);
    },
  })
}

return actionButtons

内容的提问来源于stack exchange，提问作者Max Taylor-Hayden