javascript - 检查输入是否在两个值之间(多个条件)

Question

我正在制作一个项目，我需要读取不同格式的数字，并根据用户输入检查这些数字。在某些情况下，这将是一个像“8800-9000”这样的区间，在某些情况下，它将是一个 4 位数字，在某些情况下，它将是一个 5 位数字。

数组看起来像这样:

var testArray = [
{
    "label": "Nordea",
    "value": ["1100-1199", "1400-2099", "3000-3399", "3410-4999"]
},
{
    "label": "Swedbank",
    "value": ["7000-7120", "7123-8104", "8106-8999"]
},
{
    "label": "Sparbanken Nord",
    "value": "8264"
},
{
    "label": "Sparbanken i Enköping",
    "value": ["7121-7122", "8305-5"]
}];

我已经制作了一个巨大的嵌套 if-message，效果还不错。我唯一的问题是，当它找到匹配项时它不会中断。如果我输入“8305-5”，它将在 2 个不同的对象属性数组中找到匹配项。我是否设计了“Between”函数错误？

我还可以搜索比间隔大得多的数字，并且仍然得到匹配。间隔“3410 - 3999”在一个数组中，如果我搜索“39999”，它仍然会匹配。

非常感谢所有帮助!

我迭代数组中的所有对象，如果值属性是一个数组，我将检查每个元素的长度，看看是否应该匹配“Between”值或直接“===”匹配.

如果它不是一个数组，我会尝试一个简单的匹配。

function searchForClearing() {

  var userInput = document.getElementById("clearingnummerTextBox").value;

  for (var i in testArray) {
    var currentObject = testArray[i];

    if (Array.isArray(currentObject.value)) {

      for (i = 0; i < currentObject.value.length; i++) {

        if (currentObject.value[i].length === 9) {

          var firstInterval = currentObject.value[i].split('-')[0];

          var lastInterval = currentObject.value[i].split('-')[1];

          if (userInput >= firstInterval && userInput <= lastInterval) {
            console.log("Inmatat: " + userInput + " " + "Träff på: " + currentObject.value);
            document.getElementById("bankResult").innerHTML = currentObject.label;
            console.log("Sökte mellan intervallen: " + firstInterval + " - " + lastInterval);

            console.log("9 teckens sök");
          }

        } else if (currentObject.value[i].length === 6) {

          if (userInput == currentObject.value[i]) {
            console.log("Inmatat: " + userInput + " " + "Träff på: " + currentObject.value);
            document.getElementById("bankResult").innerHTML = currentObject.label;
            console.log("Sökte mellan intervallen: " + firstInterval + " - " + lastInterval);
            console.log("6 teckens sök");
          }
        }
      }
    } else {
      if (currentObject.value.length === 9) {

        var firstInterval = currentObject.value.split('-')[0];
        var lastInterval = currentObject.value.split('-')[1];

        if (userInput >= firstInterval && userInput <= lastInterval) {
          console.log("Inmatat: " + userInput + " " + "Träff på: " + currentObject.label);
          document.getElementById("bankResult").innerHTML = currentObject.label;
          console.log("Sökte mellan intervallen: " + firstInterval + " - " + lastInterval);
          return true;
        }

      } else if (currentObject.value.length === 4) {

        if (userInput == currentObject.value) {
          console.log("Träff på clearingnummer som inte var i en array: " + userInput + " " + currentObject.label);
          document.getElementById("bankResult").innerHTML = currentObject.label;
          return true;
        }

      }

    }
  }
}

Answer 1

即使超出范围，“39999”也会返回 true 的原因是因为比较了 JS 中的字符串 lexographically 。

"39999" < "4999" // true
 39999  <  4999  // false

您需要使用类似 parseInt 将字符串转换为数字在进行比较之前。

就减少一些嵌套 if 困惑而言，此示例中最好的两个 friend 是 Array.prototype.find和 Array.prototype.some .

find 和 some 都会迭代数组，为每个元素调用函数。

• find:如果该函数返回 true，则 find 停止迭代并返回当前元素。您可以使用它在 testArray 中查找其 value 等于用户输入或将其包含在某个范围内的对象。

• some:如果该函数返回 true，则 some 停止迭代并返回 true 。当 testArray 值是一个数组时，您可以使用它来检查用户输入是否至少在一个范围内。我们使用 some 而不是另一个 find ，因为我们只想检查数组中是否包含某些内容，而不在乎实际将其取回。

以下是如何使用 find 和 some 编写函数:

function findTestObject(input) {

  // iterate over the test array and 
  // stop as soon we found a match 
  // (as the passed function returns true)
  return testArray.find(function (testObj) {
    var value = testObj.value;

    // if current value is an array of ranges
    // check if userInput is within at least one of the ranges
    if (Array.isArray(value)) {
      return value.some(function (range) {
        // split the current range into min and max and compare with user input
        var rangeData = range.split('-');
        return parseInt(rangeData[0]) <= input && input <= parseInt(rangeData[1]);
      });
    } 
    // otherwise do a direct comparison
    else {
      return value === input;
    }
  });
}

此函数将返回 testArray 中其值与用户输入匹配的第一个对象，或者返回 undefined。

这是一个完整的示例:

var testArray = [{
  "label": "Nordea",
  "value": ["1100-1199", "1400-2099", "3000-3399", "3410-4999"]
}, {
  "label": "Swedbank",
  "value": ["7000-7120", "7123-8104", "8106-8999"]
}, {
  "label": "Sparbanken Nord",
  "value": "8264"
}, {
  "label": "Sparbanken i Enköping",
  "value": ["7121-7122", "8305-5"]
}];

function findTestObject(input) {
  return testArray.find(function (testObj) {
    var value = testObj.value;

    if (Array.isArray(value)) {
      return value.some(function (range) {
        var rangeData = range.split('-');
        return parseInt(rangeData[0]) <= input && input <= parseInt(rangeData[1]);
      });
    } else {
      return value === input;
    }
  });
}

function test() {
  var userInput = document.getElementById("input").value;
  var result = findTestObject(userInput);
  var label = result ? result.label : 'Not Found';
  document.getElementById("result").innerHTML = label;
}

<input id="input" placeholder="Enter something..."/>
<button onclick="test()">Test</button>
<br />
Result: <div id="result"></div>

注意:您的示例中存在不一致之处。所有范围均按升序排列(最小值、最大值)，最后一个数组除外，其中包含 “8305-5”。 使用上面的代码，这个范围永远不会返回 true。

解决此问题的一种方法是在比较之前始终按升序对范围数组进行排序。

var rangeData = range.split('-').sort();

参见How to correctly sort array of integers示例和陷阱。