Quasar框架中JavaScript Switch语句未返回预期值问题

兄弟，你的代码问题出在switch语句的核心逻辑错误上，咱们一步步捋清楚：

你当前的switch表达式写的是Screen——这是Quasar提供的一个包含屏幕尺寸状态的对象，而每个case分支里写的是Screen.lg && dist >= 50这类条件，这些条件最终返回的是布尔值（true/false）。但switch的匹配逻辑是拿表达式的值和每个case的值做全等比较（===），一个对象和布尔值永远不可能全等，所以所有case都匹配失败，程序直接走default返回9，这就是为什么你明明看到Screen.xs && dist >=40是true，却进不了对应分支的原因。

修复方案1：调整switch表达式为true #

把switch的表达式改成true，这样每个case的条件会被当作布尔值判断，只要条件为true就会进入对应分支，完美贴合你的逻辑：

import { Screen } from 'quasar'
export const setZoomLevel = (distance) => {
  const dist = parseInt(distance)
  // 将switch表达式改为true，让case条件直接参与布尔判断
  switch (true) {
    case Screen.lg && dist >= 50:
    case Screen.md && dist >= 25:
    case Screen.sm && dist >= 10 && dist <= 20:
    case Screen.xs && dist >= 10 && dist <= 30:
      return 8
    case Screen.sm && dist >= 25:
    case Screen.xs && dist >= 40:
      return 7
    default:
      return 9
  }
}

修复方案2：改用if-else链（可读性更高） #

对于这种多条件组合的判断，if-else链的可读性其实比switch的这种“技巧性”用法更强，不容易出错：

import { Screen } from 'quasar'
export const setZoomLevel = (distance) => {
  const dist = parseInt(distance)
  // 先处理返回8的所有场景
  if (
    (Screen.lg && dist >= 50) ||
    (Screen.md && dist >= 25) ||
    (Screen.sm && dist >= 10 && dist <= 20) ||
    (Screen.xs && dist >= 10 && dist <= 30)
  ) {
    return 8
  }
  // 再处理返回7的场景
  else if (
    (Screen.sm && dist >= 25) ||
    (Screen.xs && dist >= 40)
  ) {
    return 7
  }
  // 默认返回9
  else {
    return 9
  }
}

额外小建议 #

可以给parseInt(distance)加个有效性校验，避免传入非数字值导致dist变成NaN的情况：

const dist = isNaN(parseInt(distance)) ? 0 : parseInt(distance)

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