何时/何时/为什么第一个数组元素下降？

Question

我的任务是有一个接受用户输入的文本框，将输入压入数组，然后根据复选框的状态检查硬编码数组，以评估用户输入元素是否与硬编码数组匹配元素。

在基本情况下，字符串必须完全匹配（基于区分大小写），我的代码与匹配的单词一致，并忽略不匹配的单词。我将匹配的单词添加到一个字符串中，然后在警报中显示该字符串。但是，在第二种情况下，字符串打算忽略区分大小写（因此用户可以输入大小写的任意组合），我的警报显示匹配的名称列表总是会丢失输入的第一个字在用户输入文本框中。区分大小写逻辑看起来工作正常 - 问题是其中一个单词被丢弃。

这里是我的代码首先为HTML外壳

function process() { 
 

 
//create string to store user input 
 
var s = document.getElementById("inputTextBox").value; 
 

 
//testing text area to display captured input 
 
document.getElementById("textArea").value = s; 
 

 
//create array to store user input 
 
var inputArray = []; 
 

 
//create array of names to check user input against 
 
var namesArray = ["John", "Bill", "Mary", "Ted", "Roger"]; 
 

 
//split the string by spaces 
 
var input = s.split(" "); 
 

 
//put the split string into the inputArray 
 
inputArray = s.split(" "); 
 

 
//determine length of arrays 
 
var inputArrayLength = inputArray.length; 
 
var nameArrayLength = namesArray.length; 
 

 
//create string to hold matched names 
 
var matchedNames = ""; 
 

 
for(var i = 0; i < inputArrayLength; i++) 
 
{ 
 
    //set current name string to current array element 
 
    currName = inputArray[i]; 
 

 
    //first determine if the checkbox IS checked 
 
    if ((document.getElementById("checkBox").checked) == true) 
 
    { 
 
     //if it is checked, determine if currName == name in namesArray 
 
     if (currName == 'John' || currName == 'Bill' || currName == 'Mary' || currName == 'Ted' || currName == 'Roger') 
 
     { 
 
      matchedNames = matchedNames.concat(currName + " "); 
 
     }} 
 

 
    //if it is NOT checked 
 
    else if ((document.getElementById("checkBox").checked) == false) 
 
    { 
 
     //traverse array and toLowerCase all elements 
 
     for (var j = 0; j < inputArrayLength; j++) 
 
     { 
 
      inputArray[j] = inputArray[j].toLowerCase(); 
 
     } 
 

 
     //then determine if toLowerCase string is present in array 
 
     if (currName == 'john' || currName == 'bill' || currName == 'mary' || currName == 'ted' || currName == 'roger') 
 
     { 
 
      matchedNames = matchedNames.concat(currName + " "); 
 
     } 
 
    } 
 
} 
 

 
document.getElementById("textArea").value = matchedNames; 
 

 
//alert matched names 
 
alert("Matched Names: " + matchedNames + "."); 
 
}

<label>Please enter a series of first names, separated by spaces</label> 
 
<br /> 
 
<input id="inputTextBox" type="text" name="textBox1" style="width: 200px;"/> 
 
<br /> 
 
<label><input id="checkBox" type="checkbox" name="checkbox1" />toggle case sensitivity</label> 
 
<br /> 
 
<input id="Button1" type="button" value="Process" onclick="process();"/> 
 
<br /> 
 
<textarea id="textArea" name="textArea1" rows="2" cols="1" style="width: 400px;"></textarea>

我知道有许多文体问题（蹩脚的名字），一些严重的冗余，而这很可能收紧逻辑上使用更少的线等

Answer 1

它不起作用的原因是，您在循环的第一次迭代中将inputArray转换为小写，但不会将currName这仍然是原来的价值。

在随后的迭代中，currName从现在小写的数组中拉出，以便它们正确匹配。

在任何情况下，这里的使用Array.prototype.filter和Array.prototype.indexOf

//create array of names to check user input against 
 
var namesArray = ["John", "Bill", "Mary", "Ted", "Roger"]; 
 
var lowerCaseNamesArray = namesArray.map(name => name.toLowerCase()) 
 

 
function process() { 
 

 
    //create string to store user input 
 
    var s = document.getElementById("inputTextBox").value; 
 

 
    // are we doing case-sensitive checks 
 
    var caseSensitive = document.getElementById("checkBox").checked; 
 
    if (!caseSensitive) { 
 
    s = s.toLowerCase(); 
 
    } 
 

 
    //create array to store user input 
 
    var inputArray = s.split(" "); 
 
    
 
    // which array should we check? 
 
    var checkArray = caseSensitive ? namesArray : lowerCaseNamesArray; 
 
    
 
    var matchedNames = inputArray.filter(function(currName) { 
 
    return checkArray.indexOf(nameToCheck) !== -1; 
 
    }); 
 

 
    document.getElementById("textArea").value = matchedNames.join(' '); 
 
}

<label>Please enter a series of first names, separated by spaces</label> 
 
<br /> 
 
<input id="inputTextBox" type="text" name="textBox1" style="width: 200px;" /> 
 
<br /> 
 
<label><input id="checkBox" type="checkbox" name="checkbox1" />toggle case sensitivity</label> 
 
<br /> 
 
<input id="Button1" type="button" value="Process" onclick="process();" /> 
 
<br /> 
 
<textarea id="textArea" name="textArea1" rows="2" cols="1" style="width: 400px;"></textarea>

Answer 2

一个更简单的方法，这也许可以收紧在逻辑上使用更少的线

逻辑基本上是你的问题的根源。你有一个循环来测试每个currName。在循环内部，检查复选框是否被选中，如果不是，则将输入数组小写;但是第一个currName在降级之前被取出。因此，如果您输入John Mary Bill，那么您将比较非小写的John和小写的mary和bill。非小写John显然不等于john。此外，整个数组的下限会发生在数组的每个元素上，这会增加代码中不必要的指数复杂性（即不必要的低效）。

这将是更容易只是小写劈头（循环之前，分裂，甚至之前），输入字符串：作为正在采取它

if (caseSensitive) { 
    s = s.toLowerCase(); 
} 
var input = s.split(" "); 

，或者至少为小写每个currName从数组中：

var origCurrName = inputArray[i]; 
var currName = origCurrName; 
if (caseSensitive) { 
    currName = currName.toLowerCase(); 
} 

一些进一步的说明：

• 你不必测试W¯¯ hether的东西是true;条件将触发表达式为truthy（其中true是，而false不是）。
• 如果你知道那里是只有两个选项（如truthy和falsy，选中和未选中），你并不需要使用else if，一个简单的else就足够了
• 你从来没有使用可变input
• 以caseSensitive前循环更有效，做大量的改进代码的可读性......只要你会用它:)

编辑：DERP，在滚动，我误以为菲尔的var caseSensitive...线你的。对菲尔和OP都道歉。

Answer 3

在第二种情况下的匹配过程中，您尚未将currName转换为小写。 所以你可以只做currName.toLowerCase() == "john"等等。