Switch语句中逻辑表达式作为case值失效问题求助

问题核心在于case的匹配顺序：当按下Ctrl+ArrowUp或Ctrl+ArrowRight时，Switch会先匹配到单独的ArrowUp/ArrowRight分支，执行代码后触发break直接跳出Switch，完全不会走到组合键的分支逻辑。

修复方案 #

把组合键的case分支移到所有单独按键case的最前面，让Switch优先匹配组合键条件，避免被普通按键分支拦截。

修改后的handleKeyPress函数代码：

function handleKeyPress(keyPressed) {
    key = keyPressed.code;

    switch (true) {
        /* 组合键旋转逻辑：放在最前面优先匹配 */
        case keyPressed.ctrlKey && (key === "ArrowUp" || key === "ArrowRight"): {
            console.log("rotating");
            rotation = rotation + 30;
            break;
        }

        /* 垂直移动 */
        case key === "ArrowDown": {
            verticalPosition = verticalPosition + 1;
            if (verticalPosition > 100) {
                verticalPosition = 100;
            }
            break;
        }

        case key === "ArrowUp": {
            verticalPosition = verticalPosition - 1;
            if (verticalPosition < 0) {
                verticalPosition = 0;
            }
            break;
        }

        /* 水平移动 */
        case key === "ArrowLeft": {
            horizontalPosition = horizontalPosition - 1;
            if (horizontalPosition < -40) {
                horizontalPosition = -40;
            }
            break;
        }

        case key === "ArrowRight": {
            horizontalPosition = horizontalPosition + 1;
            if (horizontalPosition > 40) {
                horizontalPosition = 40;
            }
            break;
        }

        default:
            break;
    }
    refresh();
}

额外优化建议 #

1. 简化条件判断：keyPressed.ctrlKey === true可直接写成keyPressed.ctrlKey
2. 修正注释描述：原注释中部分方向描述错误（如ArrowUp分支的“Stop moving the box down”），已在示例中调整

完整可运行代码 #

HTML

<div id="box"></div>
<script src="script.js"></script>

CSS

html,
body {
    width: 100%;
    height: 100%;
}

body {
    display: flex;
    justify-content: center;
    background-color: rgb(6, 6, 65);
    position: relative;
    margin: 0;
}

#box {
    background-color: red;
    width: 20%;
    height: 0;
    padding-bottom: 20%;
    position: relative;
}

JavaScript

/** @format */

let box = document.getElementById("box");
document.addEventListener("keydown", handleKeyPress);
let verticalPosition = 0;
let horizontalPosition = 0;
let rotation = 0;
let key;

function handleKeyPress(keyPressed) {
    key = keyPressed.code;

    switch (true) {
        /* 组合键旋转逻辑：放在最前面优先匹配 */
        case keyPressed.ctrlKey && (key === "ArrowUp" || key === "ArrowRight"): {
            console.log("rotating");
            rotation = rotation + 30;
            break;
        }

        /* 垂直移动 */
        case key === "ArrowDown": {
            verticalPosition = verticalPosition + 1;
            if (verticalPosition > 100) {
                verticalPosition = 100;
                /* 盒子到达视口底部时停止向下移动 */
            }
            break;
        }

        case key === "ArrowUp": {
            verticalPosition = verticalPosition - 1;
            if (verticalPosition < 0) {
                verticalPosition = 0;
                /* 盒子到达视口顶部时停止向上移动 */
            }
            break;
        }

        /* 水平移动 */
        case key === "ArrowLeft": {
            horizontalPosition = horizontalPosition - 1;
            if (horizontalPosition < -40) {
                horizontalPosition = -40;
                /* 盒子到达视口左侧时停止向左移动 */
            }
            break;
        }

        case key === "ArrowRight": {
            horizontalPosition = horizontalPosition + 1;
            if (horizontalPosition > 40) {
                horizontalPosition = 40;
                /* 盒子到达视口右侧时停止向右移动 */
            }
            break;
        }

        default:
            break;
    }
    refresh();
}

function refresh() {
    box.style.top = verticalPosition + "vh";
    box.style.left = horizontalPosition + "vw";
    box.style.transform = "rotate(" + rotation + "deg)";
}

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