将 if 语句转换为 switch 语句答案

【问题标题】：Converting if statement to switch statement将 if 语句转换为 switch 语句
【发布时间】：2019-09-26 00:30:17
【问题描述】：

我需要将函数中的 if 语句转换为用于赋值的 switch 语句。该功能需要做的是让用户输入在按下提交按钮时显示为列表项。当输入数等于 5 时，它会说“感谢您的建议。”

我将原始 if 语句作为注释包含在内。

我不知道从哪里开始，所以它的工作方式与 if 语句相同。

    <article>
        <div id="results">
            <ul>
                <li id="item1"></li>
                <li id="item2"></li>
                <li id="item3"></li>
                <li id="item4"></li>
                <li id="item5"></li>
            </ul>
            <p id="resultsExpl"></p>
        </div>
        <form>
            <fieldset>
                <label for="toolBox" id="placeLabel">
                    Type the name of a tool, then click Submit:
                </label>
                <input type="text" id="toolBox" />
            </fieldset>
            <fieldset>
                <button type="button" id="button">Submit</button>
            </fieldset>
        </form>
    </article>
    <script>
        // global variables
        var i=1;
        var listItem = "";
        // function to add input to list
        function processInput() 
        {
            /*
            if (i<=5) 
            {
                listItem = "item" + i;
                document.getElementById(listItem).innerHTML = document.getElementById("toolBox").value;
                document.getElementById("toolBox").value = "";
                if (i==5) 
                {
                    document.getElementById("resultsExpl").innerHTML = "Thanks for your suggestions.";
                }
                i++;
            }
            */
            switch (i) {
                case 5:
                    document.getElementById("resultsExpl").innerHTML = "Thanks for your suggestions.";
                    break;
                case default:
                    listItem = "item" + i;
                    document.getElementById(listItem).innerHTML = document.getElementById("toolBox").value;
                    document.getElementById("toolBox").value = "";
                    i++;
            }
        }
        // adds backward compatible event listener to Submit button
        var submitButton = document.getElementById("button");
        if (submitButton.addEventListener) {
            submitButton.addEventListener("click", processInput, false);
        } else if (submitButton.attachEvent) {
            submitButton.attachEvent("onclick", processInput);
        }
    </script>

【问题讨论】：

我寻求指导，而不是答案。无论如何，我能够弄清楚，但案例 5 似乎并没有破裂。第 5 个之后的任何输入都将替换最后一个输入。我会继续搞砸它，但感谢任何帮助。

标签： javascript if-statement switch-statement html-lists

【解决方案1】：

我将引用来自 Javascript the good parts 的 Douglas Crockford 的话

switch 语句是一个称职的特性。像最有能力的人一样功能，它有很多问题 - 使用要求在案例中的每个语句之后中断，程序控制流，异地语法，代码块处理等等！不幸的是，解决这些问题需要我们重写它在核心运行，规范将完全改变，这对于像 JavaScript 这样的语言会造成巨大的倒退兼容性问题。

底线：坚持 if/else if/else 语句。

【讨论】：

【解决方案2】：

我能够弄清楚。我意识到我把'case default'而不是'default'。我必须包含一些从默认到案例 5 的代码，以显示最后的输入和消息。我还将 i++ 放在 switch 语句之外，以便它在第 5 次迭代后停止，但不会替换最后一个输入。

switch (i) {
    case 5:
        listItem = "item" + i;
        document.getElementById(listItem).innerHTML = document.getElementById("toolBox").value;
        document.getElementById("toolBox").value = "";
        document.getElementById("resultsExpl").innerHTML = "Thanks for your suggestions.";
        break;
    default:
        listItem = "item" + i;
        document.getElementById(listItem).innerHTML = document.getElementById("toolBox").value;
        document.getElementById("toolBox").value = "";
}
i++;

【讨论】：