何時/何時/爲什麼第一個數組元素下降？

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"等等。