如何在JavaScript中简化多重if else分支条件判断逻辑

开发者阿泽

2026-10-5

JavaScript分支逻辑简化方案

原逻辑的核心是统计选中的数据类型总条数，提取公共判断逻辑就能大幅简化代码，以下是两种常用的兼容原逻辑的简化写法：

方案1：提前统计总数+三元表达式

先做空值兜底，再计算总选中项，用三元表达式直接赋值，可读性最高：

// 空值兜底兼容ES2020+运行环境，统计所有选中的数据类型总数量
const totalSelected = selectedDataTypes?.reduce((sum, item) => sum + (item.dataTypes?.length || 0), 0) || 0;

this.dropdownName = totalSelected === 1 
  ? selectedDataTypes[0].dataTypes[0].name 
  : totalSelected > 1 
    ? 'MULTIPLE SELECTION' 
    : 'DATA TYPES';

方案2：抽离为独立复用函数

如果这段逻辑需要多处调用，可以抽离为纯函数降低维护成本：

function getDropdownName(selectedDataTypes) {
  if (!selectedDataTypes) return 'DATA TYPES';
  const total = selectedDataTypes.reduce((acc, curr) => acc + (curr.dataTypes?.length || 0), 0);
  if (total === 1) return selectedDataTypes[0].dataTypes[0].name;
  return total > 1 ? 'MULTIPLE SELECTION' : 'DATA TYPES';
}

// 调用赋值
this.dropdownName = getDropdownName(selectedDataTypes);