介绍
短语vanilla JavaScript通常用于包含在没有框架或库的情况下编写 JavaScript。虽然许多现代问题可以通过框架和库来解决，但了解 JavaScript 原生可用的内容以及如何以及何时可以依赖它们将帮助您成为更强大的开发人员。
考虑一个场景，您收到不同长度的文本字符串。您的目标是计算字符串中包含的英文元音（“a”、“e”、“i”、“o”和“u”）（大写和小写）出现的次数。
JavaScript包含3个元音。DigitalOcean包含6个元音。Rhythms包含 0 个元音。
在本文中，您将使用迭代循环构建一个解决方案，并使用正则表达式构建第二个解决方案。
先决条件
如果你想跟随这篇文章，你需要：
此示例使用for…of和includes()在旧版浏览器中不受支持。
使用迭代循环
在迭代方法中，您将遍历传递的字符串的每个字母，然后检查是否有任何字母与任何元音匹配。如果字母与元音的已知可能值匹配，您将增加一个计数器变量。循环完成后，您可以引用此变量，它将显示元音的数量。
花点时间思考如何分解此任务的要求和步骤。
现在，使用 Web 浏览器中的 Web 开发人员控制台或 REPL 的其他实现，让我们为这个问题构建一个解决方案。
首先，让我们定义你所知道的：
const vowels = ["a", "e", "i", "o", "u"]
这段代码声明了一个常量 – vowels– 它包含五个英文元音的数组。
然后，让我们创建一个传递text值的函数：
const vowels = ["a", "e", "i", "o", "u"]
function countVowelsIterative(text) {
}
在这个函数内部，你将一个counter变量初始化为0。
const vowels = ["a", "e", "i", "o", "u"]
function countVowelsIterative(text) {
let counter = 0
console.log(`The text contains ${counter} vowel(s)`)
return counter
}
此代码将向控制台记录一条消息以及变量return的值counter。
接下来，要遍历字符串，您可以使用for…of循环：
const vowels = ["a", "e", "i", "o", "u"]
function countVowelsIterative(text) {
let counter = 0
for (let letter of text.toLowerCase()) {
}
console.log(`The text contains ${counter} vowel(s)`)
return counter
}
一个for…of循环遍历可迭代的对象-字符串，数组，地图，集合等。
此代码还将所有字符转换text为小写。可能还有其他需要区分大小写的场景，但对于此特定场景，您可以利用toLowerCase()并避免必须同时定义大写元音。
然后，您可以使用if语句来检查 a 是否letter与以下任何一项匹配vowels：
const vowels = ["a", "e", "i", "o", "u"]
function countVowelsIterative(text) {
let counter = 0
for (let letter of text.toLowerCase()) {
if (vowels.includes(letter)) {
}
}
console.log(`The text contains ${counter} vowel(s)`)
return counter
}
此代码使用includes()数组上的方法vowels来确定该数组是否包含选定的letter、返回的true或false，视情况而定。
最后，如果条件为true，则可以增加counter变量：
const vowels = ["a", "e", "i", "o", "u"]
function countVowelsIterative(text) {
let counter = 0
for (let letter of text.toLowerCase()) {
if (vowels.includes(letter)) {
counter++
}
}
console.log(`The text contains ${counter} vowel(s)`)
return counter
}
考虑text用户可能提交的可能值，并确保您的函数正确处理每个值。
空字符串：
countVowelsIterative('')
您期望的返回值应为0：
OutputThe text contains 0 vowel(s)
没有元音的字符串：
countVowelsIterative('Rhythms')
您期望的返回值应为0：
OutputThe text contains 0 vowel(s)
还有一个带有一个或多个元音的字符串：
countVowelsIterative('DigitalOcean')
您期望返回的数值等于字符串中元音出现的次数：
OutputThe text contains 6 vowel(s)
您已经成功开发了一个迭代循环解决方案，用于计算文本字符串中英语元音的出现次数。
使用正则表达式
正则表达式(regex) 可帮助您查找字符串中的模式或字符组合。
对于这种特殊情况，正则表达式非常适合计算文本字符串中英语元音的出现次数。
正则表达式可用于许多编程语言，用于解决许多需要搜索、匹配和过滤的问题。熟悉正则表达式将为您的开发人员技能增加一个更强大的工具。
花点时间思考如何分解此任务的要求和步骤。
现在，使用 Web 浏览器中的 Web 开发人员控制台或 REPL 的其他实现，让我们为这个问题构建一个解决方案。
让我们创建一个传递text值的函数：
function countVowelsRegex(text) {
}
您可以使用带有模式的正则表达式，而不是包含元音的数组[aeiou]：
/[aeiou]/gi
对于简单模式，正则表达式通常定义在一对斜杠 ( /) 内。方括号 ([和]) 用于指定“字符类”。正则表达式将搜索在此字符类中匹配的任何字符。
在结束斜线之后，使用字母g和i。满足条件后，正则表达式将停止。使用g了全局搜索将继续执行额外的搜索。使用i了不区分大小写的搜索可以让你避免也不必定义大写元音。
然后，将正则表达式应用于text：
function countVowelsRegex(text) {
let matchingInstances = text.match(/[aeiou]/gi);
}
此代码使用该match()方法。
如果有匹配项，则将返回与正则表达式匹配的所有实例。如果没有匹配项，null则返回一个值。
检查该matchingInstances值是否存在并处理这两种情况：
function countVowelsRegex(text) {
let matchingInstances = text.match(/[aeiou]/gi);
if (matchingInstances) {
console.log(`The text contains ${matchingInstances.length} vowel(s)`)
return matchingInstances.length
} else {
return 0
}
}
如果matchingInstances计算结果为真值（即找到匹配的数组），则记录显示length与数组相同的元音数量的格式化消息。然后，您返回号码。
如果matchingInstances计算结果为假值，则返回，0因为这意味着未找到匹配项。
考虑text用户可能提交的可能值，并确保您的函数正确处理每个值。
带有一个或多个元音的字符串：
countVowelsRegex('DigitalOcean')
您期望返回的数值等于字符串中元音出现的次数：
OutputThe text contains 6 vowel(s)
您已经成功开发了一个正则表达式解决方案，用于计算文本字符串中英语元音的出现次数。
结论
在本文中，您成功地实现了两个解决方案，用于在 JavaScript 中计算文本字符串中元音的数量。在设计解决方案的过程中，您将问题分解为小步骤并利用 JavaScript 中可用的方法。
迭代循环方法使用字符串、数组for…of、toLowerCase()、if、includes()、 和增量。
正则表达式方法使用字符串、数组match()、if…else、 和length()。
为您的项目选择解决方案需要考虑可读性和性能优化等因素。
通过探索其他可用于字符串和数组的方法来继续学习。
