JavaScript中在对象数组的forEach循环内使用switch是否属于不良实践？

原代码存在的可优化点 #

你写的代码可以正常实现功能，但确实存在不少可优化的空间：

• 语法小问题：你贴的代码中第三个tab对象末尾多了一个多余的闭合大括号，属于笔误，实际运行前需要修正。
• 效率问题：不管数组总长度多少都会全量遍历所有元素，如果你只需要修改固定的2个对象，全量遍历完全没有必要，当数组元素较多时会产生不必要的性能消耗。
• 可读性与维护性问题：switch分支写法冗余，后续如果新增需要修改的tab项，需要不断加case分支，规则散落在逻辑代码里，修改成本高。
• 耦合问题：函数直接修改外部的tabs变量，没有把tabs作为入参传入，复用性极低，只能作用于固定的这一个tabs数组。

更优实现方案 #

根据不同使用场景可以选择不同的优化方向：

场景1：常规场景，数组长度不大，想要兼顾可读性和复用性 #

优先把修改规则抽成独立的映射表，精准修改目标对象，无需全量遍历：

// 集中维护修改规则，后续调整直接修改这个对象即可，不用碰逻辑代码
const visibilityRules = {
  A: true,
  B: false
};

const changeTabsVisibility = (tabs) => {
  if (!validation()) return;
  // 只遍历需要修改的规则项，精准查找目标tab修改
  Object.entries(visibilityRules).forEach(([targetName, targetVisible]) => {
    const targetTab = tabs.find(tab => tab.name === targetName);
    if (targetTab) targetTab.visible = targetVisible;
  });
};

// 调用时传入要修改的数组，复用性更高
changeTabsVisibility(tabs);

场景2：数组元素多、修改操作频繁，追求极致效率 #

提前把数组转为以name为key的Map结构，查找复杂度为O(1)，性能最优：

// 初始化时一次性转成Map，后续所有修改操作都不用遍历数组
const tabsMap = new Map(tabs.map(tab => [tab.name, tab]));

const changeTabsVisibility = (tabsMap) => {
  if (!validation()) return;
  tabsMap.get('A') && (tabsMap.get('A').visible = true);
  tabsMap.get('B') && (tabsMap.get('B').visible = false);
};

场景3：需要遵循不可变规范，不修改原数组 #

使用map返回新数组，避免副作用，适合React/Vue等框架的状态更新场景：

const visibilityRules = {
  A: true,
  B: false
};

const changeTabsVisibility = (tabs) => {
  if (!validation()) return tabs;
  return tabs.map(tab => ({
    ...tab,
    visible: visibilityRules[tab.name] ?? tab.visible
  }));
};

// 调用后拿到新数组，原数组保持不变
const newTabs = changeTabsVisibility(tabs);

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