对多个 If Thens 使用 Javascript 哈希表答案

【问题标题】：Use Javascript Hash table for Multiple If Thens对多个 If Thens 使用 Javascript 哈希表
【发布时间】：2012-08-14 09:51:18
【问题描述】：

foo = document.getElementById("outer");

function cycleIt() {
    if (client.browser.Firefox) {
        foo.addEventListener("animationend", updateClassName, true);
    } else {
        foo.addEventListener("webkitAnimationEnd", updateClassName, true);
    }
}

function updateClassName() {

    var z = foo.getAttribute("class");

    if ( z == "a" ) {
        foo.className = "b";
    } else if ( z == "b" ) {
        foo.className = "c"
    } else if ( z == "c" ) {
        foo.className = "d"
    } else {
        foo.className = "a"
    }
    return foo;
}

有人在 Javascript 聊天频道上告诉我，我应该为多个 if then 语句制作一个哈希表。我该怎么做呢？

【问题讨论】：

标签： javascript hashtable

【解决方案1】：

您创建哈希表（实际上只是一个普通对象）：

var table = {
    "a": "b",
    "b": "c",
    "c": "d"
};

然后您使用该表将您的输入 z 映射到输出（类名）：

var z = foo.getAttribute("class");
foo.className = table[z] || "a";
return foo;

语法table[z] || "a"是一种简写方式

if (table[z] === undefined) {
    foo.className = "a";
}
else {
    foo.className = table[z];
}

这两种样式并不完全等价，但在这种情况下（哈希中的所有值都是字符串，并且没有一个是空字符串）它的工作原理相同。

【讨论】：

你不需要对象标签上的引号......对吗？
@JaredFarrish：没有这些价值观，但让新手进入是一个好习惯。
@JaredFarrish - 对象字面量的成员名称可以采用多种形式，包括：{ a:1 }、{ "a":1 }、{ 'a':1 }、{ 1:1 }
确保将 undefined 放在引号中，否则您将尝试查看类型是否实际上未定义，而不是使用 "undefined" 类型。
@ChaosPandion - 注意我说的是“不需要”，而不是“有错”。我的理解是，在对象文字符号中，标签上的引号严格是“错误的”，但 Javascript 是一个宽容的野兽。

【解决方案2】：

您要做的是将 z 值映射到类名，如下所示：

function updateClassName() {
    foo.className = ({
        a: "b",
        b: "c",
        c: "d"
    })[foo.className] || "a";
    return foo;
}

对象字面量是指定哪个旧值（键）应该去哪个新值（值）的映射。此外，它使用|| "a" 指定默认情况。

【讨论】：

在我看来，查找对象确实应该被缓存。
@ChaosPandion 我如何缓存这个查找对象？
在这种情况下，旧键值/新值是否像 then 语句一样？括号 [] 在 [foo.classname] 中实际上做了什么？