逻辑错误使for循环无限循环，为什么？

Question

我正在尝试构建一个 JavaScript devowelizer，但我正在产生一个无限循环。 我希望 Stack Overflow 上的人可以提供帮助？

代码 =>

let userWord = prompt("Type a word to devowelize: ");
userWord = Devowelize(userWord);
alert(userWord);

function Devowelize(word) {
  for (let i = 0; i <= word.length; i++) {
    let eatChars = "aeiou"

    for (let i2 = 0; i2 <= eatChars.length;) {
      if (word[i] == eatChars[i2] &&
        word[i] != "") {
        word = word.replace(word[i], "");
      } else {
        i2++;
      }
    }
  }

  return word
}

Answer 1

您在这里使用for (let i = 0; i <= word.length; i++)这部分i <= word.length不正确，因为您将尝试在代码中使用i索引访问数组word所以在最后一次迭代中，您将访问一个未由您的数组定义的索引 javascript 中数组的最后一个索引始终为arrayLength-1如果您访问数组外的项目，您将获得一个未定义的值，这将在您的情况下生成一个无限循环，您在这里for (let i2 = 0; i2 <= eatChars.length;)做了同样的事情，但第一个循环负责代码中的无限循环

Answer 2

您的解决方案几乎就在那里，但您正试图以一种非常迂回的方式解决这个问题。 让我们让它更容易理解。

在 JavaScript 中，您可以轻松检查一个字符串是否包含另一个字符串。 例如，如果我们想检查一个字符是否在字符串中，我们可以这样做：

let eatChars = "aeiou"

eatChars.includes('e') === true

因此，知道我们可以在一个语句中做到这一点，让我们重用您拥有的一些代码，并用字符“e”代替单词中的字符。

let outWord = ""
// '<= word.length' becomes this, because the string positions only go up to 'word.length - 1
for (let i = 0; i < word.length; i++) {
    let eatChars = "aeiou"

    if (!eatChars.includes(word[i])) { // so the character isn't a vowel
       outWord += word[i]
    }
}
return outWord

评论提到学习“地图”和“过滤器”。 如果您想花哨的话，我建议为此使用减速器：您可以尝试这样的事情：

const devowel = (word) => Array.from(word).reduce((out, currentCharacter) => ...)