Javascript 第一个数组元素放置在何处/何时/为什么？

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

在基本情况下，字符串必须完全匹配（基于大小写敏感度），我的代码同意匹配的单词，而忽略不匹配的单词。我将匹配的单词添加到字符串中，然后在警报中显示该字符串

但是：在第二种情况下，如果字符串旨在忽略大小写敏感度（因此用户可以输入任何大小写组合），则显示匹配名称列表的我的警报始终会删除用户输入文本框中输入的第一个单词。区分大小写的逻辑似乎工作正常——问题是其中一个单词被删除了

这是我的HTML外壳的第一个代码

函数过程（）{
//创建字符串以存储用户输入
var s=document.getElementById（“InputExtBox”）.value；
//测试文本区域以显示捕获的输入
document.getElementById（“textArea”）.value=s；
//创建数组以存储用户输入
变量输入阵列=[]；
//创建名称数组以检查用户输入
var namesArray=[“约翰”、“比尔”、“玛丽”、“特德”、“罗杰”]；
//用空格分隔字符串
var输入=s.split（“”）；
//将拆分的字符串放入inputArray
inputArray=s.split（“”）；
//确定数组的长度
var inputArray长度=inputArray.length；
var nameArrayLength=namearray.length；
//创建字符串以保存匹配的名称
var matchedNames=“”；
对于（变量i=0；i

请输入一系列名字，用空格分隔




切换区分大小写

它不起作用的原因是，在循环的第一次迭代中，您将

输入数组

转换为小写，但不将仍然是原始值的

currename

转换

在随后的迭代中，

currName

从现在小写的数组中提取，以便它们正确匹配

无论如何，这里有一个更简单的方法，使用

Array.prototype.filter

和

Array.prototype.indexOf

//创建名称数组以检查用户输入
var namesArray=[“约翰”、“比尔”、“玛丽”、“特德”、“罗杰”]；
var lowerCaseNamesArray=namesArray.map（name=>name.toLowerCase（））
函数过程（）{
//创建字符串以存储用户输入
var s=document.getElementById（“InputExtBox”）.value；
//我们在做区分大小写的检查吗
var caseSensitive=document.getElementById（“复选框”）。选中；
如果（！区分大小写）{
s=s.toLowerCase（）；
}
//创建数组以存储用户输入
var inputArray=s.split（“”）；
//我们应该检查哪个数组？
var checkArray=区分大小写？名称数组：小写名称数组；
var matchedNames=inputArray.filter（函数（currName）{
返回checkArray.indexOf（nameToCheck）！=-1；
});
document.getElementById（“textArea”）.value=matchedNames.join（“”）；
}

请输入一系列名字，用空格分隔




切换区分大小写

这可能会在逻辑上收紧，以使用更少的行

逻辑基本上是你问题的根源。您有一个循环来测试每个

currName

。在循环内部，检查复选框是否已选中，如果未选中，则将输入数组小写；但是第一个

currName

在小写之前被去掉了。因此，如果您输入

John-Mary-Bill

，您将比较非小写的

John

，然后比较小写的

Mary

和

Bill

。非小写的

John

显然不等于

John

。此外，对于数组的每个元素，整个数组都会小写，这给代码增加了不必要的指数复杂性（即不必要的低效）

在一开始（在循环之前，甚至在拆分之前）将输入字符串小写会容易得多：

或者至少在将每个

currName

从数组中取出时将其小写：

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

一些进一步的说明：

• 你不必测试某件事是否正确；

  if

  条件将在表达式为truthy时触发（其中

  true

  是，而

  false

  不是）
• 如果您知道只有两个选项（如truthy和falsy，选中和未选中），则不需要使用

  else If

  ，一个简单的

  else

  就足够了
• 您从不使用变量

  input

• 将

  区分大小写

  放在

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