javascript - 对多个 If Thens 使用 Javascript 哈希表

Question

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 语句制作一个哈希表。我该怎么做呢？

Answer 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];
}

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

Answer 2

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

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

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