将 if else 改为 switch case 语句

Question

我有一个带有一些 if...else 的函数，像这样：

function updateInputs(data) {
  from = data.from;
  to = data.to;
  rangeInput = $(data.input);
  
  if (rangeInput.hasClass('rangeSalary')) {
    $inputFromSalary.prop("value", from);
    $inputToSalary.prop("value", to);      
  } else if (rangeInput.hasClass('rangeAge')) {
    $inputFromAge.prop("value", from);
    $inputToAge.prop("value", to);
  }
  
  table.draw();
}

但是我需要添加更多的语句，所以我觉得还是用switch...case比较好，所以我尝试这样做：

function updateInputs(data) {
  from = data.from;
  to = data.to;
  rangeInput = $(data.input).hasClass('rangeSalary');

  switch (rangeInput) {
    case 'rangeSalary':
      $inputFromSalary.prop("value", from);
      $inputToSalary.prop("value", to);
      break;
    case 'rangeAge':
      $inputFromAge.prop("value", from);
      $inputToAge.prop("value", to);
      break;
  }

  table.draw();
}

但是没有用。我错过了什么？

Answer 1

您的代码的问题是您从 hasClass 获得的结果将是 true 或 false，两者都不匹配您的任何案例标签。

如果注意到 if/else if 块（或 cases）中的代码唯一不同的是您调用的 jQuery 对象prop 上。在这种情况下，我倾向于拥有一张以他们的名字作为键的人的地图（或对象）。该名称可以来自 name 属性（如果这是一种允许 name 并且有意义的元素类型），或者 data-name 属性（因为您可以将 data-* 任何元素上的属性）。例如：

<input data-range="Salary" ... >
<input data-name="rangeFromSalary" ... >
<input data-name="rangeToSalary" ... >
<input data-range="Age" ... >
<input data-name="rangeFromAge" ... >
<input data-name="rangeToAge" ... >

const rangeInputs = new Map($("[data-name]").map((i, input) => {
    return [input.getAttribute("data-name"), $(input)];
}));
function updateInputs(data) {
    // Note: You need to declare `from` and `to`
    const from = data.from;
    const to = data.to;
    // Get the name for this input
    const rangeName = data.input.getAttribute("data-range");
    // Get the matching jQuery objects
    const rangeFrom = rangeInputs.get(`rangeFrom${inputName}`);
    const rangeTo   = rangeInputs.get(`rangeTo${inputName}`);
    // Got them?
    if (rangeFrom && rangeTo) {
        // Set them
        rangeFrom.prop("value", from);
        rangeTo.prop("value", to);
    }
  
    table.draw();
}

请注意，我添加了 from 和 to 的声明。没有它们，您的代码就会成为我所说的 The Horror of Implicit Globals 的牺牲品。始终声明您的变量。

在评论中，您似乎担心使用 ES2015+ 功能。以上是仅使用 ES5 及以下功能的代码：

var rangeInputs = Object.create(null);
$("[data-name]").each((i, input) => {
    rangeInputs[input.getAttribute("data-name")] = $(input);
});
function updateInputs(data) {
    var from = data.from;
    var to = data.to;
    // Get the name for this input
    var rangeName = data.input.getAttribute("data-range");
    // Get the matching jQuery objects
    var rangeFrom = rangeInputs.get(`rangeFrom${inputName}`);
    var rangeTo   = rangeInputs.get(`rangeTo${inputName}`);
    // Got them?
    if (rangeFrom && rangeTo) {
        // Set them
        rangeFrom.prop("value", from);
        rangeTo.prop("value", to);
    }
  
    table.draw();
}

但如果你真的非常想使用 switch:

function updateInputs(data) {
    var from = data.from;
    var to = data.to;
    var rangeFrom, rangeTo;
    switch (data.input.getAttribute("data-range")) {
        case "rangeSalary":
            rangeFrom = $("rangeFromSalary");
            rangeTo = $("rangeToSalary");
            break;
        case "rangeAge":
            rangeFrom = $("rangeFromAge");
            rangeTo = $("rangeToAge");
            break;
        // ...
    }
    if (rangeFrom && rangeTo) {
        rangeFrom.prop("value", from);
        rangeTo.prop("value", to);
    }
  
    table.draw();
}

但请注意，现在，您在两个位置（HTML 和代码）有名称，而不仅仅是在一个地方（HTML).这会导致您在一个地方添加或删除它们而不在另一个地方添加或删除它们的情况。

将 if else 改为 switch case 语句

Change if else to switch case statement

jquery

if-statement

switch-statement

break