JS中同一变量设置多条件判断实现删除字符串元音的问题求助

原代码存在的核心问题 #

• 长度属性拼写错误：letras.lenght 是错误写法，正确属性名为 letras.length，拼写错误会导致循环完全不执行。
• 条件判断逻辑完全错误：JS 中逗号操作符会依次执行每个表达式，最终返回最后一个表达式的值，你写的 letras[i] == "a", "e", "i", "o", "u", "A","E","I", "O", "U" 等价于直接判断 "U" 是否为真值，结果永远为真，所有字符都会触发 continue 被跳过。就算用 || 运算符也需要每个判断单独写等式，格式为 letras[i] == "a" || letras[i] == "e" || letras[i] == "i"...，不能省略前面的判断条件。
• 结果存储逻辑错误：你直接在输入参数 frase 后面追加过滤后的字符，最终返回的结果会是「原输入字符串 + 过滤后的非元音字符」，不符合需求，应该初始化一个空字符串单独存储结果。
• 不合理的 document.write 调用：这个方法会清空当前页面原有内容再写入新内容，不要放在函数内部调用，避免污染页面。

修复后的可运行代码 #

var frase = "Hi how are you"

function removeVowels(frase) {
  // 初始化空字符串存储过滤结果
  var result = ""
  var letras = frase.split("")
  // 修正length拼写错误
  for (var i = 0; i < letras.length; i++){
    // 用数组includes方法简化元音判断逻辑，不需要写冗长的||判断
    if(["a", "e", "i", "o", "u", "A","E","I", "O", "U"].includes(letras[i])){
      continue
    }
    result += letras[i]
  } 
  return result
}

var sinVocales = removeVowels(frase)
// 仅在需要输出的位置调用写入方法
document.write(sinVocales)

更简洁的实现方案 #

可以直接用正则替换实现该功能，仅需一行代码：

function removeVowels(frase) {
  // 正则中[aeiou]匹配所有元音，i修饰符忽略大小写，g修饰符匹配所有符合项，替换为空字符串即可
  return frase.replace(/[aeiou]/gi, '')
}

内容的提问来源于stack exchange，提问作者GMarkoslansvka