在这种情况下使用 switch 是否明智？答案

【问题标题】：Is it sensible to use switch in this case?在这种情况下使用 switch 是否明智？
【发布时间】：2020-07-20 16:59:32
【问题描述】：

在这种情况下使用开关是否明智？因为在代码审查之后，我得到了使用开关的评论。另一个问题是，我应该在这里改变什么来重构这部分方法？

if(this.isGameOver) return;
        if(square.classList.contains('checked') || square.classList.contains('flag')) return
        if(square.classList.contains('bomb')) {
            this.gameOver();
        } else {
            let total = square.getAttribute('data');

            if(total != 0) {
                square.classList.add('checked');
                if(total == 1) square.classList.add('one');
                if(total == 2) square.classList.add('two');
                if(total == 3) square.classList.add('three');
                if(total == 4) square.classList.add('four');
                square.innerHTML = total;
                return
            }
            this.checkSquare(currentId);
        }
        square.classList.add('checked');

【问题讨论】：

作为一般规则，当您使用 if 语句进行互斥测试时，您应该使用 else if。

标签： javascript switch-statement

【解决方案1】：

我会使用一个数组：

const total_classes = ["one", "two", "three", "four"];
if (total > 0 && total <= total_classes.length) {
    square.classList.add(total_classes[total-1]);
}

【讨论】：

你能用新代码检查我的评论吗？没事吧？

【解决方案2】：

当它说使用 switch 时，它是在谈论使用总计的 5 个 if 条件语句。

虽然 Barmar 建议使用数组更可取，但重构工具建议您打开 total。

例如：

switch(total){
    case 1:
        square.classList.add("one");
        break;
    case 2:
        square.classList.add("two");
        break;
    case 3:
        square.classList.add("three");
        break;
    case 4:
        square.classList.add("four");
        break;
}

编辑 - 我实际上会使用以下方法。更容易阅读 imo。

    var classArr = square.classList;
    if (classArr.contains('checked') || classArr.contains('flag')) {
        return;
    } else if (classArr.contains('bomb')) {
        this.gameOver();
        return;
    } else {
        var total = square.getAttribute('data');
        var translate = { 0: "Zero", 1: "one", 2: "two", 3: "three", 4: "four" };
        classArr.add('checked');
        classArr.add(translate[total]);
        square.innerHTML = total;
        this.checkSquare(currentId);
    }

【讨论】：

checked 应无条件添加，而不是作为switch 的一部分。
所以我不明白为什么我应该在每种情况下都使用 switch 和重复添加检查
您不会将它添加到每个案例中。在switch语句后添加
但它应该在 switch 中还是在 switch 之外？当我将square.classList.add('checked' 和square.innerHTML = total 放入开关时出现错误
你会把它完全放在 switch 语句之外。

【解决方案3】：

应该是这样的？

        const totalClasses = ['one', 'two', 'three', 'four'];

        if(total > 0 && total <= totalClasses.length) {
            square.classList.add('checked');
            square.classList.add(totalClasses[total-1])
            square.innerHTML = total;
            return
        }

【讨论】：

这很好，添加checked 并设置innerHTML 不会改变。
我还删除了else 并放入了if(square.classList.contains('bomb')) return this.gameOver()
原代码末尾有square.classList.add('checked');，立即返回不会执行。
所以不要碰这个else 并像原始代码一样保留它？

【解决方案4】：

一些想法如何重构它？它是扫雷中使用的递归来检查被点击方格周围的每个方格。

checkSquare(currentId) {

        const isLeftEdge = (currentId % this.width === 0);
        const isRightEdge = (currentId % this.width === this.width - 1);

        setTimeout(() => {
            
            if(currentId > 0 && !isLeftEdge) {
                const newId = this.cells[parseInt(currentId) - 1].id;
                const newSquare = document.getElementById(newId);
                this.clicked(newSquare)
            }

            if(currentId > 9 && !isRightEdge) {
                const newId = this.cells[parseInt(currentId) + 1 - this.width].id;
                const newSquare = document.getElementById(newId);
                this.clicked(newSquare);
            }

            if(currentId > 9) {
                const newId = this.cells[parseInt(currentId) - this.width].id;
                const newSquare = document.getElementById(newId);
                this.clicked(newSquare);
            }

            if(currentId > 11 && !isLeftEdge) {
                const newId = this.cells[parseInt(currentId) - 1 - this.width].id;
                const newSquare = document.getElementById(newId);
                this.clicked(newSquare);
            }

            if(currentId < 99 && !isRightEdge) {
                const newId = this.cells[parseInt(currentId) + 1].id;
                const newSquare = document.getElementById(newId);
                this.clicked(newSquare);
            }

            if(currentId < 90 && !isLeftEdge) {
                const newId = this.cells[parseInt(currentId) - 1 + this.width].id;
                const newSquare = document.getElementById(newId);
                this.clicked(newSquare);
            }

            if(currentId < 88 && !isRightEdge) {
                const newId = this.cells[parseInt(currentId) + 1 + this.width].id;
                const newSquare = document.getElementById(newId);
                this.clicked(newSquare);
            }

            if(currentId < 90) {
                const newId = this.cells[parseInt(currentId) + this.width].id;
                const newSquare = document.getElementById(newId);
                this.clicked(newSquare);
            }
        }, 10)
    },

【讨论】：