SWITCH javascript 总是执行默认情况的问题

Question

好吧，我遇到了这个麻烦，我一直在处理，但我就是无法让它工作，

我的功能

function getDirections(dir)
{
var img;
switch(dir)
    {
    case 0:
    img+='N.png';
    break;  
    case 1:
    img+='NE.png';
    break;
    case 2:
    img+='E.png';
    break;
    case 3:
    img+='SE.png';
    break;
    case 4:
    img+='S.png';
    break;
    case 5:
    img+='SO.png';
    break;
    case 6: 
    img+='O.png';
    break;
    case 7:
    img+='NO.png';
    break;
    default:
    alert('enetered default but direction='+dir);
    }
return img;
}

很简单，对吧？现在我将此间隔设置为 5000 毫秒来调用 getDirections(variable)，该函数在第一次调用时运行良好，但之后，它总是进入默认子句，并且还会提醒“已输入默认值，但方向=dirvalue”，我的意思是，即使 dir 是 0-7 之间的值，它也总是会输入默认值：但它会警告该值，因此应该输入其中一种情况。

我使用 else if 做了同样的事情，它有效，所以我不知道 SWITCH 有什么问题

if(dir==0){img+='N.png';}
else if(dir==1){img+='NE.png';}
else if(dir==2){img+='E.png';}
else if(dir==3){img+='SE.png';}
else if(dir==4){img+='S.png';}
else if(dir==5){img+='SO.png';}
else if(dir==6){img+='O.png';}
else if(dir==7){img+='NO.png';}

Answer 1

我知道我参加聚会有点晚了，但我认为这对于那些不明白为什么“如果”起作用而开关不起作用的人来说可能很重要。可能没有人会读这个答案，但我在搜索其他内容时发现了它，所以也许有人会发现这很有帮助：

你的开关是这样的：

function getDirections(dir) {
    var img;
    switch(dir) {
        case 0:
            img+='N.png';
            break;  
        case 1:
            img+='NE.png';
            break;
        case 2:
            img+='E.png';
            break;
        case 3:
            img+='SE.png';
            break;
        case 4:
            img+='S.png';
            break;
        case 5:
            img+='SO.png';
            break;
        case 6: 
            img+='O.png';
            break;
        case 7:
            img+='NO.png';
            break;
        default:
            alert('enetered default but direction='+dir);
    }
    return img;
}

这与一系列双等于（==）不同，而是一个三重等于系列 (===)。这相当于：

if (dir === 0) {
    img+='N.png';
} else if (dir === 1) {
    img+='NE.png';
} else if (dir === 2) {
    img+='E.png';
} else if (dir === 3) {
    img+='SE.png';
} else if (dir === 4) {
    img+='S.png';
} else if (dir === 5) {
    img+='SO.png';
} else if (dir === 6) {
    img+='O.png';
} else if (dir === 7) {
    img+='NO.png';
} else {
    alert('enetered default but direction='+dir);
}

在“==”的世界中，整数2与字符串“2”相同，但在“===”的世界中则不同。

Answer 2

我猜想由于某种原因 dir 被作为字符串传递。尝试将 case 1: 更改为 case '1':

Answer 3

使用数组代替 if/else 块链或巨大的 switch 语句将更快、更灵活且不易出错。另外，您不必担心 dir 是数字还是字符串。而不是：

if(dir==0){img+='N.png';}
else if(dir==1){img+='NE.png';}
else if(dir==2){img+='E.png';}
else if(dir==3){img+='SE.png';}
else if(dir==4){img+='S.png';}
else if(dir==5){img+='SO.png';}
else if(dir==6){img+='O.png';}
else if(dir==7){img+='NO.png';}

您可以将文件名存储在数组中：

var images = [
    'N.png', 'NE.png', 'E.png', 'SE.png', 'S.png', 'SO.png', 'O.png', 'NO.png'
];

或者可以说更具可读性：

var images = "N.png NE.png E.png SE.png S.png SO.png O.png NO.png".split(' ');

然后仅使用：

img = images[dir];

使用数组的 getDirections 完整实现将是：

var images = "N.png NE.png E.png SE.png S.png SO.png O.png NO.png".split(' ');
function getDirections(dir) {
    var img = images[dir];
    if (!img) {
        alert("something");
    }
    return img;
}

它对您有用吗？

如果 images 仅在该函数中使用，那么您可能希望将其存储为函数的属性，以避免命名空间污染，如下所示：

function getDirections(dir) {
    var img = getDirections.images[dir];
    if (!img) {
        alert("something");
    }
    return img;
}
getDirections.images =
    "N.png NE.png E.png SE.png S.png SO.png O.png NO.png".split(' ');

或使用闭包。

Answer 4

很难解释为什么，但与所有其他情况一样，default: 情况也需要在其后面有一个 break; 语句。

Answer 5

我刚刚在 FireFox/FireBug 中运行代码并以这种方式调用该函数

getDirections(0);
getDirections('1');
getDirections("2");

第一个正确执行，接下来的两个输入 default。
它们是字符串而不是整数，这正是案例所寻找的。
我添加了

case "2":
img+='NO2.png';
break;

然后只有中间的进入了default。显然，您调用该函数的方式存在问题。它可能传递一个字符串。
我还使用了您的 if-else 块（添加了 else{alert(dir);} 并为每个调用返回了正确的值。Javascript

可以进行即时转换（我认为有一个更好的词来形容）在字符串和整数（以及其他）之间，如果您更改 ifs< 中的比较，就会发生这种情况。 /code> 到 === 你会得到与 switch 块相同的行为。

Answer 6

我将您的代码粘贴到 HTML 文件中，并使用以下按钮运行它：

<button onclick="alert(getDirections(2))">Switch / Int</button>
<button onclick="alert(getDirections('2'))">Switch / String</button>
<button onclick="alert(getDirections2(2))">If-Else / Int</button>
<button onclick="alert(getDirections2('2'))">If-Else / String</button>

当使用普通 2 调用 switch-version 时，它会按预期工作。使用 '2' 调用它会使其跳转到 default 行。 if-else 版本在这两种情况下都按预期工作。所以问题可能是 switch 不执行隐式转换，而 == 执行。

Answer 7

这很奇怪......尝试确保 dir 是一个 int，在切换之前执行此操作：

dir = parseInt(dir);

如果警报正确显示值，则它应该进入切换，但它仍然可以“看起来”正确，但具有不同的数据类型。手动进行转换以确保它是 int