TypeScript标签切换优化：能否合并选中状态切换的两步操作？

你可以通过一次数组遍历完成这两个操作，不用两次调用find，既简化代码又提升效率（只遍历数组一次）。

原数组定义 #

const navTabs: ITab[] = [
    { Name: allTab, Icon: 'gs-all', Selected: true },
    { Name: sources.corporateResources, Icon: 'gs-resources', Selected: false },
    { Name: sources.employee, Icon: 'gs-people', Selected: false },
    { Name: sources.services, Icon: 'gs-services', Selected: false },
    { Name: sources.information, Icon: 'gs-docs', Selected: false },
    { Name: sources.tableau, Icon: 'gs-tableau', Selected: false },
];

修改后的activateTab方法 #

public activateTab(name: TabName): void {
    this.activeTab = name;
    // 一次遍历完成状态切换
    this.navTabs.forEach(tab => {
        tab.Selected = tab.Name === name;
    });
}

说明 #

这种写法会遍历数组中的每一个标签，直接将标签的Selected属性设置为tab.Name === name的结果：

• 名称匹配目标name的标签会被设为true
• 其余所有标签（包括之前选中的）都会被设为false

相比两次find调用，这种方式只遍历数组一次，逻辑更简洁，同时还能兼容数组中没有预选中标签的场景。

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