JavaScript 算法 #1:计算字符串中元音字母的数量 挑战 算法思维 代码实现 评估与总结

2025-06-10

JavaScript 算法 #1:计算字符串中的元音字母数量

挑战

算法思维

代码实现

评估与总结



多年来,随着 JavaScript 功能的不断扩展,它持续受到广泛关注。它从最初只是一种用于创建酷炫交互式 Web 界面的客户端脚本语言,发展到如今广泛应用于服务器端、移动应用程序、桌面应用程序、嵌入式系统、物联网等领域。

然而,显而易见的是,尽管市面上有各种各样的框架可以提升 JavaScript 开发者的实力,但最终还是要归结于对基础知识的理解。能够以最高效的方式操作原生 JavaScript 才是关键。如今 JavaScript 开发者的数量实在太多了,我不禁好奇,我们当中究竟有多少人真正精通 JavaScript。

在本系列中,我们将使用原生 JavaScript 实现各种算法。我们将探索各种解决方案,并分析每种方法的优缺点。我们还将发布 CodePen 的链接,展示这些实现。当您尝试自己重新创建这些解决方案并尝试改进它们时,您将受益匪浅。

我们建议您先尝试自己动手,参考代码来找到正确的方向,确认解决方案,并研究其他方法。算法涵盖从基础到高级的算法,因此其中一些挑战确实非常具有挑战性。不要灰心。这就是一切的意义所在,也是您作为开发者成长的方式。
所以,坐稳,享受这个过程。让我们一起成长!

挑战

基本上,我们希望能够接收任意长度的文本字符串并返回在文本中找到的元音的数量。

算法思维

“伙计们!这不像我想象的那么简单”——Tim Gouw 在 Unsplash 上写道。阅读上面的挑战语句,你会注意到“接收一串文本”这句话。如果你对编程很熟悉,这应该会让你想起函数的概念。我们可以编写一个函数,它有一个名为“text”的参数。“text”可以是任意长度的字符串,在调用函数时作为参数传递给函数。

接下来,在函数中我们必须浏览文本并搜索英语元音(a、e、i、o、u)的出现。

然后,该函数返回找到的匹配项(元音)的总数。这应该让人想起“返回语句”,因为它们基本上会停止函数的执行并从该函数返回一个值。

代码实现

哦,是啊!我们把无聊的东西解决了。这些算法不会自己写出来吧?
我们会探索两种实现方法。首先,我们会采用迭代方法,然后使用正则表达式。

迭代方法

在迭代方法中,我们必须循环遍历传入字符串的每个字母,然后检查它们是否与任何元音字母匹配。在遍历文本之前,我们会初始化一个计数器并将其赋值为零。如果匹配成功,我们就增加计数器的值。很简单吧?

以下是我们的实现:

/*
An iterative approach to counting the number of vowels in a
string of text.
*/
const vowels = ["a", "e", "i", "o", "u"]


function countVowelsIterative(text) {
// Initialize counter
let counter = 0;


// Loop through text to test if each character is a vowel
for (let letter of text.toLowerCase()){
    if (vowels.includes(letter)) {
       counter++
    }
}


// Log formatted response to console
console.log(`The text contains ${counter} vowel(s)`)


// Return number of vowels
return counter
}

/* 
    ============== Test Case ===================
*/
countVowelsIterative('I am a world-class developer using iterations');
// Logs "The text contains 16 vowel(s)" to the console
// returns 16

Enter fullscreen mode Exit fullscreen mode

嗯,这很容易理解吧?我们来回顾一下一些要点。

  • 首先,我们声明了一个常量“元音”,其中包含五个英语元音的数组。
  • 接下来,我们使用 for…of 循环来遍历文本中的每个字母。如果您不熟悉这一点,for…of 循环本质上就是创建一个循环,对可迭代对象进行迭代。可迭代对象可以是字符串、数组、映射、集合等。您可以在这里了解更多信息。
  • 注意我们在循环中将文本的所有字母转换为小写。这是因为我们不想错过传入文本中大写元音字母的大小写(相信我,这不是故意的)。
  • 接下来,在循环中,我们使用 if 语句检查所选字母是否包含在我们之前定义的元音字母数组中。恰当地,我们调用元音字母数组的 includes() 方法来判断数组是否包含所选字母,并根据情况返回 true 或 false。点击此处了解更多关于 includes() 的工作原理。
  • 如果条件计算结果为真,我们就增加计数器。
  • 循环完成后,我们将格式化的消息记录到控制台,告诉我们元音的数量,然后返回相当于找到的元音数量的计数器。

呼呼!!!感觉真好。现在我们来考虑一个稍微高级一点但更简洁的方法。

使用正则表达式

就我的经验而言,正则表达式对大多数开发者来说都相当棘手。我们通常不了解它的语法和应用。因此,当需要用到它们时,我们大多会在网上找到一些代码片段。好吧!那就尝试改变这种现状吧!

基本上,正则表达式可以帮助我们在字符串中查找模式或字符/字符组合。明白为什么这与我们相关了吗?它们可以帮助我们在传递的文本中找到所需的字符。进一步来说,正则表达式可以帮助我们做更多了不起的事情,例如实现内容过滤器。然而,我最喜欢正则表达式的一点是,它的基本原理在所有语言中都是一样的。

事不宜迟,让我们来看看解决方案。如果您想了解更多关于 JavaScript 中正则表达式的知识,请阅读 Mozilla 开发者网络的文档(此处)

以下是我们的实现:

/*
    Using Regular Expressions to count the number of vowels in a 
    string of text.

*/

function countVowelsRegex(text) {
    // Search text with Regex and store all matching instances 
    let matchingInstances = text.match(/[aeiou]/gi);

    // Check if matching instances exist then calculate length
    if(matchingInstances) {
        // Log formatted response to console 
         console.log(`The text contains ${matchingInstances.length} vowel(s)`) 

         // Return number of vowels
        return matchingInstances.length
    } else{
        return 0
    }
}

/* 
    ============== Test Case ===================
*/
countVowelsRegex('I am a world-class developer uisng Regex');
    // Logs "The text contains 13 vowel(s)" to the console
    // returns 13
Enter fullscreen mode Exit fullscreen mode

我想你不需要复习这个吧?好!好!我们来看看答案。

  • 我们在函数中做的第一件事就是对文本调用 match() 方法,该方法返回一个数组,其中包含与作为参数传递的正则表达式匹配后找到的匹配项。点击此处了解更多关于 match() 工作原理的信息。
  • 正则表达式在括号[]内指定要查找的字母。对于简单的模式,正则表达式通常用一对斜杠来定义。注意到斜杠后面的字符“gi”了吗?
  • “g”代表全局搜索,在第一次匹配后不会返回,而是从上一次匹配的结尾重新开始后续搜索。
  • “i”代表不区分大小写的搜索,这使得整个表达式不区分大小写(例如 /xyz/i 将匹配 XyZ)。
  • 接下来,我们使用一个条件语句来检查是否找到了匹配的实例。上面使用的 .match() 方法如果找到了匹配项,则返回一个包含所有匹配项的数组;如果找不到,则返回 null。因此,在条件语句中,如果“matchingInstances”的值为真值(即找到的匹配项的数组),我们会记录一条格式化的消息,其中显示元音字母的数量,该数量与数组的长度相同。然后我们也返回这个数量。相反,如果“matchingInstances”的值为假值,则返回 0,表示未找到匹配项。

评估与总结

我们现在已经成功实现了一种在 Javascript 中计算文本字符串中元音数量的算法。

让我们评估一下这两种方法。迭代方法虽然不如另一种方法简洁,但更简单,也更符合逻辑,尤其适合初学者。然而,正如下面的结果所示,正则表达式方法的优化效果更好。

单击此处自行运行这些测试。

也许我们可以说正则表达式方法更胜一筹?不过,这两种方法都有效,并且可以在面试中使用。


这对你来说是否令人兴奋?请在下方评论区留言告诉我。对我来说确实如此。我们成功测试了两种实现算法的方法,该算法可以帮助我们计算给定文本中元音字母的数量。在此过程中,我们学习了一些 JavaScript 方法和正则表达式。这些工具是现代 JavaScript 开发人员工具箱中非常重要的工具。

欢迎用其他方式来实现,并探讨每种方法的优缺点。也请在评论区与大家分享(最好附上你的笔的链接)。我们期待看到你们的分享。也欢迎提问。我相信我们一定能找到答案。

如果您觉得这篇文章有用,也请分享给其他人。您白白得到,也白白付出。我也不介意大家给我点掌声(眨眼)。

你能在 Twitter 上联系我吗?@worldclassdev

在此订阅更新并继续关注该系列的下一篇文章。

鏂囩珷鏉ユ簮锛�https://dev.to/worldclassdev/javascript-algorithms-1-counting-the-vowels-in-a-string-oftext-5ejl
PREV
在开发中利用 JavaScript 控制台的强大功能
NEXT
使用 Trello 管理你的个人冲刺