Javascript 想减少嵌套的if-else语句以降低认知复杂性吗？

//我有一个函数，它根据输入到search//字段中的用户返回搜索结果。代码是使用嵌套的if-else语句构建的，这增加了代码的认知//复杂性。我想通过减少if-else//语句来降低代码复杂性。 //这是我的密码

(function($) {
  $(document).ready(function() {
    myFunction();
  });
  function myFunction() {
    $('#searchInput').keyup(function() {
      var  i;
      var input = document.getElementById("searchInput");
      var filter = input.value.toUpperCase();
      var table = document.getElementById("tabledisplay");
      var tr = table.getElementsByTagName("tr");
      var e = document.getElementById("searchtype");
      var strUser = e.options[e.selectedIndex].value;
      for (i = 0; i < tr.length; i++) {
        if (strUser == 'Date') {
          td = tr[i].getElementsByTagName("td")[1];
          if (td) {
          var txtValue = td.textContent || td.innerText;
            if (txtValue.toUpperCase().indexOf(filter) > -1) {
              tr[i].style.display = "";
            }
            else {
            tr[i].style.display = "none";
            }
          }
        }
        else if (strUser == 'City') {
          td = tr[i].getElementsByTagName("td")[2];
          if (td) {
            txtValue = td.textContent || td.innerText;
            if (txtValue.toUpperCase().indexOf(filter) > -1) {
              tr[i].style.display = "";
            }
            else {
            tr[i].style.display = "none";
            }
          }
        }
        else if (strUser == 'State') {
          td = tr[i].getElementsByTagName("td")[3];
          if (td) {
            txtValue = td.textContent || td.innerText;
            if (txtValue.toUpperCase().indexOf(filter) > -1) {
              tr[i].style.display = "";
            }
            else {
            tr[i].style.display = "none";
            }
          }
        }
        else if (strUser == 'Inspection Number') {
          td = tr[i].getElementsByTagName("td")[5];
          if (td) {
            txtValue = td.textContent || td.innerText;
            if (txtValue.toUpperCase().indexOf(filter) > -1) {
              tr[i].style.display = "";
            }
            else {
            tr[i].style.display = "none";
            }
          }
        }
      }
    });
  }
})(jQuery, Drupal, drupalSettings);

（函数（$）{
$（文档）.ready（函数（）{
myFunction（）；
});
函数myFunction（）{
$（'#searchInput'）.keyup（函数（）{
var i；
var输入=document.getElementById（“searchInput”）；
var filter=input.value.toUpperCase（）；
var table=document.getElementById（“tabledisplay”）；
var tr=table.getElementsByTagName（“tr”）；
var e=document.getElementById（“searchtype”）；
var strUser=e.options[e.selectedIndex].value；
对于（i=0；i-1）{
tr[i].style.display=“”；
}
否则{
tr[i].style.display=“无”；
}
}
}
else if（strUser=='City'）{
td=tr[i].getElementsByTagName（“td”）[2]；
如果（td）{
txtValue=td.textContent | | td.innerText；
if（txtValue.toUpperCase（）.indexOf（过滤器）>-1）{
tr[i].style.display=“”；
}
否则{
tr[i].style.display=“无”；
}
}
}
else if（strUser=='State'）{
td=tr[i].getElementsByTagName（“td”）[3]；
如果（td）{
txtValue=td.textContent | | td.innerText；
if（txtValue.toUpperCase（）.indexOf（过滤器）>-1）{
tr[i].style.display=“”；
}
否则{
tr[i].style.display=“无”；
}
}
}
否则，如果（strUser==‘检验编号’）{
td=tr[i].getElementsByTagName（“td”）[5]；
如果（td）{
txtValue=td.textContent | | td.innerText；
if（txtValue.toUpperCase（）.indexOf（过滤器）>-1）{
tr[i].style.display=“”；
}
否则{
tr[i].style.display=“无”；
}
}
}
}
});
}
})（jQuery、Drupal、drupalSettings）；

有一个对象来查找字符串索引

const indexes = {
  Date: 1,
  City: 2,
  State: 3,
  'Inspection Number': 5
}

(function($) {
  $(document).ready(function() {
    myFunction();
  });
  function myFunction() {
    $('#searchInput').keyup(function() {
      var  i;
      var input = document.getElementById("searchInput");
      var filter = input.value.toUpperCase();
      var table = document.getElementById("tabledisplay");
      var tr = table.getElementsByTagName("tr");
      var e = document.getElementById("searchtype");
      var strUser = e.options[e.selectedIndex].value;
      for (i = 0; i < tr.length; i++) {
        if (strUser in indexes) {
          index = indexes[strUser]
          td = tr[index].getElementsByTagName("td")[index];
          if (td) {
          var txtValue = td.textContent || td.innerText;
            if (txtValue.toUpperCase().indexOf(filter) > -1) {
              tr[i].style.display = "";
            }
            else {
            tr[i].style.display = "none";
            }
          }
        }
      }
    });
  }
})(jQuery, Drupal, drupalSettings);

const索引={
日期：1，
城市：2，
国家：3，
“检验编号”：5
}
（函数（$）{
$（文档）.ready（函数（）{
myFunction（）；
});
函数myFunction（）{
$（'#searchInput'）.keyup（函数（）{
var i；
var输入=document.getElementById（“searchInput”）；
var filter=input.value.toUpperCase（）；
var table=document.getElementById（“tabledisplay”）；
var tr=table.getElementsByTagName（“tr”）；
var e=document.getElementById（“searchtype”）；
var strUser=e.options[e.selectedIndex].value；
对于（i=0；i-1）{
tr[i].style.display=“”；
}
否则{
tr[i].style.display=“无”；
}
}
}
}
});
}
})（jQuery、Drupal、drupalSettings）；

考虑到

if（

-块）之间的唯一区别是行：

 td = tr[i].getElementsByTagName("td")[2]

您可能只是拥有一个对象，如：

const fields = {Date: 1, City: 2, State: 3..

然后只使用该块一次，将

strUser

作为键名传递：

td = tr[i].getElementsByTagName("td")[fields[strUser}]

---

有很多代码重复。你可以用两个参数编写另一个函数来清理这个问题

对于if/else语句，对于一行if/else块，您可以利用ternaries。对于顶级if/else语句，您可以使用switch语句

(function ($) {
  $(document).ready(function () {
    myFunction();
  });

  function tdFunc(td = false, index, filter) {
    if (!td) return false;

    let txtValue = td.textContent || td.innerText;
    txtValue.toUpperCase().indexOf(filter) > -1 ?
        tr[index].style.display = "" :
        tr[index].style.display = "none";
  }

  function myFunction() {
    $("#searchInput").keyup(function () {
      var i;
      var input = document.getElementById("searchInput");
      var filter = input.value.toUpperCase();
      var table = document.getElementById("tabledisplay");
      var tr = table.getElementsByTagName("tr");
      var e = document.getElementById("searchtype");
      var strUser = e.options[e.selectedIndex].value;

      Array.from(tr).forEach((el, i) => {

        switch(strUser) {
            case 'Date':
                tdFunc(
                    tr[i].getElementsByTagName("td")[1], 
                    i,
                    filter
                );
                break;
            case 'City':
                tdFunc(
                    tr[i].getElementsByTagName("td")[2], 
                    i,
                    filter
                );
                break;
            case 'State':
                tdFunc(
                    tr[i].getElementsByTagName("td")[2], 
                    i,
                    filter
                );
                break;
            case 'Inspection Number':
                tdFunc(
                    tr[i].getElementsByTagName("td")[5], 
                    i,
                    filter
                );
                break;
        }
      });
    });
  }
})(jQuery, Drupal, drupalSettings);

---

您可以进一步增强它，但这里只是一个简单的示例。

如果提供的任何一个答案确实解决了您的问题，您可以标记✔️ 它接受了.whats el here.Array.from（tr）.forEach（（el，i）=>{el在本例中是循环迭代中的一个“tr”。获取所有tr元素

var tr=table.getElementsByTagName（“tr”）；

，这是一个HTMLCollection。

Array.from（tr）

从HTMLCollection创建一个iterable数组。我认为索引没有得到正确的值