Question

我有一些看起来像这样的代码：

TheClass = TheAjaxIndicator.prop('class');

if (TheClass.indexOf('Blue') > 0) { TheHTML = TheHTMLBlue; }
if (TheClass.indexOf('White') > 0) { TheHTML = TheHTMLWhite; }
if (TheClass.indexOf('Green') > 0) { TheHTML = TheHTMLGreen; }
if (TheClass.indexOf('Brown') > 0) { TheHTML = TheHTMLBrown; }

如何避免所有这些if陈述？

感谢。

Answer 1

示例如何使用正则表达式更短地编写代码（但不一定更有效）：

var html = {
   'Blue': TheHTMLBlue,
   'White': TheHTMLWhite,
   // ...
};

var match = TheClass.match(/Blue|White|Green|Brown/);
// also possible:
// var match = TheClass.match(RegExp(Object.keys(html).join('|'));
if (match) {
    TheHTML = html[match[0]];
}

Answer 2

我将类名和值放入地图中，并迭代地图以寻找匹配。 Here (jsfiddle) 是如何以这种方式执行此操作的示例。

var classToHtmlMap = {
    'Blue': TheHTMLBlue,
    'White': TheHTMLWhite,
    'Green': TheHTMLGreen,
    'Brown': TheHTMLBrown
}

var TheHTML;
var TheAjaxIndicator = $("#TheAjaxIndicator");
$.each(classToHtmlMap, function(key, value) {
    if(TheAjaxIndicator.hasClass(key)) {
        TheHTML = value;
            return false;
    }
});

顺便说一句，这使用了jQuery，但无论你怎么做，方法都是一样的。

Answer 3

我建议您遵循变量命名约定，其中局部变量使用pascalCase而不是TitleCase。我离题了。

代码中包含if语句根本不会对性能产生负面影响 - 这是2013年，我们有JIT脚本引擎。你的代码也是非常易读的 - 我认为没有理由改变它（除了命名约定）。但您可以使用switch语句但仅当 class属性为单个值时才会使用

switch( theAjaxIndicator.prop('class') ) {
    case "Blue" : theHTML = theHTMLBlue;  break;
    case "White": theHTML = theHTMLWhite; break;
    case "Green": theHTML = theHTMLGreen; break;
    case "Brown": theHTML = theHTMLBrown; break;
}

如果您希望获得一些乐趣，并且混淆尝试阅读代码的任何人，您可以创造性地使用eval，如下所示：

eval('theHTML = theHTML' + theAjaxIndicator.prop('class') + ';');

但是这个代码会因为强制脚本重新编译而变慢。我不知道JIT在这种情况下是如何工作的。

优化多个if语句

3 个答案: