TypeScript数组条件添加元素：两种实现方案哪个更优？

问题 #

现有一个Tabs类型的数组定义如下：

const tabs: Tabs[] = [
    {
      title: getTitle("generalSettings.getTileA"),
      content: useContentA(),
      type: TYPE.A,
    },
    {
      title: getTitle("generalSettings.getTileC"),
      content: useContentC(),
      type: TYPE.C,
    },
    [...more items...]
]

需要在满足条件时向数组中添加一个特定元素，目前有两种可行实现方案：

方案1：数组内通过扩展语法+三元运算符插入 #

const bTab = {
    title: getTitle("generalSettings.getTileB"),
    content: useContentB(),
    type: TYPE.B,
}

// 其他代码...
const tabs: Tabs[] = [
    {
      title: getTitle("generalSettings.getTileA"),
      content: useContentA(),
      type: TYPE.A,
    },
    
    ...(isAvailable("titleB") ? [bTab] : []),

    {
      title: getTitle("generalSettings.getTileC"),
      content: useContentC(),
      type: TYPE.C,
    },
    [...more items...]
]

方案2：先定义数组，再通过push添加元素 #

// 原数组定义...
const tabs: Tabs[] = [
    {
      title: getTitle("generalSettings.getTileA"),
      content: useContentA(),
      type: TYPE.A,
    },
    {
      title: getTitle("generalSettings.getTileC"),
      content: useContentC(),
      type: TYPE.C,
    },
    [...more items...]
]

const bContent = useContentB()
if (isEnabled("titleB"))
   tabs.push({
    title: getTitle("generalSettings.getTileB"),
    content: bContent,
    type: TYPE.B,
})

两种方案测试均有效，本人更倾向方案1，但担心else分支返回空数组的写法是否存在问题，想了解哪种方案更优及原因。

方案对比与结论 #

方案1的优势与注意点 #

• 结构直观：数组的元素顺序和结构一目了然，能直接看到新增元素插在A和C标签之间，符合声明式代码的风格，维护时更容易定位元素位置。
• 不可变性保障：tabs用const声明，数组引用不可修改，避免了后续代码意外篡改数组引用的风险，契合React等现代框架的最佳实践。
• 空数组写法无问题：...([])是TypeScript/JavaScript中完全合法的语法，扩展空数组不会对原数组产生任何影响，是条件插入元素的常用技巧，性能损耗可以忽略。
• 潜在小缺陷：无论条件是否满足，bTab对象和useContentB()都会提前执行。如果useContentB()是开销较大的操作（比如复杂计算、API请求），即使不需要显示这个标签，也会产生不必要的资源消耗。

方案2的优势与注意点 #

• 延迟执行优化：只有当条件满足时，才会调用useContentB()并创建标签对象，避免了不必要的资源浪费，适合useContentB()开销较大的场景。
• 逻辑直白：写法简单易懂，新手也能快速理解逻辑。
• 潜在问题：tabs的const仅限制了数组引用不可变，但数组内容仍可修改（push操作修改的是数组内部元素），不符合不可变性原则，后续代码若不小心对数组做其他修改，可能引入难以追踪的bug；另外push只能把元素加到数组末尾，无法灵活插入到指定位置（比如A和C之间），如果后续需要调整位置，还要修改代码结构。

最终建议 #

如果useContentB()是轻量操作，或者你需要严格保证数组的不可变性、明确元素位置，方案1是更优选择，空数组的写法完全没问题。

如果useContentB()开销较大，或者你希望只有在条件满足时才初始化相关资源，方案2更合适；如果需要把元素插入到指定位置而非末尾，可以改用splice方法（比如tabs.splice(1, 0, bTab)插入到A之后），但同样要注意数组可变的问题。

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