如何在switch case中使用多个变量进行条件判断

你当前的写法存在两个核心问题：

1. switch(FABvisible && settingDate) 的表达式只会返回单个布尔值——只有当两个变量都为true时结果是true，其余情况都是false，根本无法区分四种组合。
2. case (true, true) 里的逗号是逗号运算符，实际只会取最后一个值（也就是true），所以所有这类case都会被当作同一个条件处理。

下面是几种可行的实现方案：

方案1：拼接字符串作为switch判断值 #

把两个布尔变量转成字符串后拼接，每个组合对应唯一的字符串标识：

switch (`${FABvisible},${settingDate}`) {
  case 'true,true':
    // 两个变量都为true时的逻辑
    break;
  case 'true,false':
    // FABvisible为true、settingDate为false时的逻辑
    break;
  case 'false,true':
    // FABvisible为false、settingDate为true时的逻辑
    break;
  case 'false,false':
    // 两个变量都为false时的逻辑
    break;
}

方案2：映射为二进制数值 #

将布尔值转换为二进制位（true=1，false=0），组合成唯一的十进制数：

// 计算唯一标识：FABvisible对应高位（2的1次方），settingDate对应低位（2的0次方）
const flag = (FABvisible ? 2 : 0) + (settingDate ? 1 : 0);

switch (flag) {
  case 3: // 二进制11 → 两个都为true
    break;
  case 2: // 二进制10 → FABvisible=true，settingDate=false
    break;
  case 1: // 二进制01 → FABvisible=false，settingDate=true
    break;
  case 0: // 二进制00 → 两个都为false
    break;
}

方案3：用对象字面量替代switch（更简洁） #

如果只是处理布尔组合的分支逻辑，对象键值对的写法会更直观，不需要switch：

// 定义各组合对应的处理函数
const actionMap = {
  'true,true': () => { /* 执行对应逻辑 */ },
  'true,false': () => { /* 执行对应逻辑 */ },
  'false,true': () => { /* 执行对应逻辑 */ },
  'false,false': () => { /* 执行对应逻辑 */ }
};

// 调用对应处理函数
actionMap[`${FABvisible},${settingDate}`]();

注意事项 #

如果变量不是严格的布尔类型（比如可能是0、null、undefined等），记得先通过Boolean(FABvisible)做类型转换，确保得到标准的true/false值。

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