意外的 if else 行为

Question

我正在开发一个基于 mvc 框架的网站。这个问题与 mvc 或 web 开发无关，但我觉得这是一个普遍的编程问题。所以我有一个 if 和 else 块，它的行为出乎意料。

代码:

class table {
    constructor(datatypes, header, data, customfunctionsindex, customfunctionstype, customfunctions) {
        this.datatypes = datatypes;
        this.header = header;
        this.data = data;
        this.customfunctions = customfunctions;
        this.customfunctionsindex = customfunctionsindex;
        this.customfunctionstype = customfunctionstype;

    }
}
var data= new table(["label", "label", "input", "input", "input", "label","select", "button"],
    ["Saletype", "Service", "Quantity", "Discount", "GST", "Amount", "Employee", "Remove"], [],
    [2, 3, 4, 6], [function () {}, "null", "null", "null"],
    ["onchange", "onchange", "onchange", "onclick"]);

            for (var i = 0; i < data.header.length; i++) {
            var cell = row.insertCell(i);
            var element = document.createElement(data.datatypes[i]);
            element.id = data.header[i] + (table.rows.length - 1);
            if (data.datatypes[i] == "label") {
                console.log(data.datatypes[i]+i);
                element.innerHTML = data.data[i];
                element.style.backgroundColor = "rgb(134 198 244)";
                element.style.color = "white";
                element.style.borderRadius = "0";
            }
            if (data.datatypes[i] == "input") {
                console.log(data.datatypes[i]+i);
                element.value = data.data[i];
                element.style.backgroundColor = "rgb(134 198 244)";
                element.style.color = "white";
                element.style.borderRadius = "0";
            }
            if (data.datatypes[i] =="select")
            {
                console.log(data.datatypes[i]+i);
                for (var i = 0; i < employees.length; i++) {
                    var option = document.createElement("option");
                    option.text = employees[i].name;
                    option.value = employees[i].name;
                    element.appendChild(option);
                }
                element.style.backgroundColor = "black";
                element.style.borderRadius = "10px";
                element.style.color = "white";
            }
            else {
                console.log(data.datatypes[i]+i);
                element.innerHTML = data.data[i];
                element.style.backgroundColor = "red";
                element.style.color = "black";
                element.style.borderRadius = "0";

            }}

控制台输出

如您在我附加的 o/p 文件中所见，else 块在 if 块之后执行。 o/p label0 被观察了 2 次。在检查中我发现第一个来自对应于标签的 if 块，而第二个来自 else 块，两者都发生在 i=0 时。这怎么可能，还是我做错了什么？

Answer 1

您最后的 else 语句并不是所有 if 语句的回退。但仅适用于最后一个 if 语句，即 if (data.datatypes[i] =="select")。像这样添加 else if 语句

            if (data.datatypes[i] == "label") {
                console.log(data.datatypes[i]+i);
                element.innerHTML = data.data[i];
                element.style.backgroundColor = "rgb(134 198 244)";
                element.style.color = "white";
                element.style.borderRadius = "0";
            }
           else if (data.datatypes[i] == "input") {
                console.log(data.datatypes[i]+i);
                element.value = data.data[i];
                element.style.backgroundColor = "rgb(134 198 244)";
                element.style.color = "white";
                element.style.borderRadius = "0";
            }
           else  if (data.datatypes[i] =="select")
            {
                console.log(data.datatypes[i]+i);
                for (var i = 0; i < employees.length; i++) {
                    var option = document.createElement("option");
                    option.text = employees[i].name;
                    option.value = employees[i].name;
                    element.appendChild(option);
                }
                element.style.backgroundColor = "black";
                element.style.borderRadius = "10px";
                element.style.color = "white";
            }
            else {
                console.log(data.datatypes[i]+i);
                element.innerHTML = data.data[i];
                element.style.backgroundColor = "red";
                element.style.color = "black";
                element.style.borderRadius = "0";

            }

对于这种情况，我建议 switch case

Switch (data.datatypes[i]) {
   case 'label':
   ...
   break;

   case 'input':
   ...
   break;

   case 'select':
   ...
   break;

   default:
   ...
}

意外的 if else 行为

Unexpected if else behaviour

javascript

asp.net-mvc

if-statement

web-deployment