如何基于特定条件在JavaScript数组中条件性定义对象元素

问题原因 #

你原先的写法在权限校验不通过时会往数组内插入空对象{}，而非直接排除该项，因此会出现多余的无效菜单项，无法达到预期效果。

最优实现方案 #

使用扩展运算符搭配条件返回数组的语法，可以直接在数组字面量中完成条件过滤，不会产生多余项：

myMenu: [   
  ...(hasAccess(user) ? [{ id: 'New Job', active: false, href: '/new-job' }] : []),
  { id: 'Delete Jobs', active: false, href: '/delete-job' },
  { id: 'All Jobs', active: false, href: '/all-jobs' }
]

实现逻辑：当hasAccess(user)返回true时，扩展运算符会把临时数组内的菜单对象展开插入到原数组中；返回false时扩展的是空数组，相当于没有插入任何内容，不会产生多余项。

备选实现方案 #

如果需要判断的权限项较多，也可以先定义基础菜单，再通过条件判断追加对应项，可读性更高：

// 先定义无需权限判断的默认菜单
const defaultMenus = [
  { id: 'Delete Jobs', active: false, href: '/delete-job' },
  { id: 'All Jobs', active: false, href: '/all-jobs' }
]
// 权限校验通过时，向前插入新任务菜单
if (hasAccess(user)) {
  defaultMenus.unshift({ id: 'New Job', active: false, href: '/new-job' })
}
// 最终赋值
myMenu: defaultMenus

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