javascript - jquery中switch和if中为什么推荐使用else if

Question

为什么这样做会更方便:

var cnt = $("#div1 p").length;
alert(cnt);
if (cnt >= 10 && cnt <= 20)      alert('10');
else if (cnt >= 21 && cnt <= 30) alert('21');
else if (cnt >= 31 && cnt <= 40) alert('31');
else alert('>41');

而不是:

switch (cnt) {
    case 1: ....
    case 2: ....
    case 3: ....
}

甚至

var cnt = $("#div1 p").length;
alert(cnt);
if (cnt >= 10 && cnt <= 20)      alert('10');
if (cnt >= 21 && cnt <= 30) alert('21');
if (cnt >= 31 && cnt <= 40) alert('31');
else alert('>41');

所以看起来如果有很多情况，switch 语句看起来更干净。 当您有多个想要相同行为的值时，这也很好 - 只需使用多个“case”语句，这些语句落入单个实现，比 if( this || that || someotherthing || .. .)

那么对于多种情况，哪种选择更好？

Answer 1

switch 语句将根据您的目的进行更多比较，因为它只能测试严格等效性 (===)。

但是 if ... else if 结构更好，因为它在第一个 true 表达式之后停止比较。它可能不适合某些情况，但它适合您的情况。

此外，作为次要建议，我建议将您认为最有可能为真的条件放在第一位。例如:

if (age >= 18 && age < 60) { // Mainstream
    ...
} else if (age >= 12 && age < 18) { // Smart kids
    ...
} else if (age >= 60 && age < 99) { // Savvy old people
    ...
} else { // ... Aliens?!
    ...
}

这最适合互斥条件，如上例所示。如果这不是真的，可能会造成困惑:

var t = $(element);
if (t.is("div > p")) {
    ...
} else if (t.is("p")) {
    ...
}

上面的例子与不同

var t = $(element);
if (t.is("p")) {
    ...
} else if (t.is("div > p")) {
    ...
}

因为 t.is("div > p") 和 t.is("p") 不互斥。尝试将条件更改为这样，例如: t.is("p") => t.is(":not(div) > p").

switch 通常最适合单例比较，例如:

var d = new Date().getDay(), t;
switch (d) {
    case 0: t = "Sunday"; break;
    case 1: t = "Monday"; break;
    case 2: t = "Tuesday"; break;
    ...
}

绝对比

更具可读性和紧凑性

var d = new Date().getDay(), t;
if (d === 0) t = "Sunday";
else if (d === 1) t = "Monday";
else if (d === 2) t = "Tuesday";
...

我听到的唯一反对使用 switch 进行单例比较的说法是，switch 在多个 Javascript 引擎上速度相当慢。不过，几年后情况不再如此。