大小写 + 标点全搞定！JS 如何精准统计单词频率？

🌟 掘金前端场景题：如何找出文章中出现频率最高的"卷王"词？

🚀 引言：前端面试，你准备好了吗？

哈喽，各位前端的"打工人"们！在前端面试的"八股文"和"造火箭"之间，总有一些"接地气"的场景题，它们不光考察你的基础，更考验你的解决问题能力。今天，咱们就来聊一个看似简单，实则暗藏玄机的题目：如何找出文章中出现频率最高的词？别小看它，这可是检验你字符串处理、数组操作和逻辑思维的"试金石"！

想象一下，面试官笑眯眯地抛出这个问题，你是不是脑海里立刻浮现出各种for循环、if-else？别急，今天咱们就用一段"朴实无华"的代码，带你一步步揭开这个"卷王"词的神秘面纱！

⚠️ 问题解析：找出"卷王"词的挑战

这个问题的核心，就是统计一个字符串（文章）中，每个单词出现的次数，然后找出出现次数最多的那个。听起来简单，但实际操作起来，有几个小"坑"需要注意：

大小写问题 ：Apple和apple算不算同一个词？通常情况下，我们希望它们是同一个。所以，统一大小写是第一步。
标点符号 ：hello!和hello是同一个词吗？显然是。我们需要把标点符号"请"出去。
效率问题：如果文章很长，我们怎么才能高效地统计呢？总不能一个词一个词地去数吧？

别担心，下面的代码会给你一个"标准答案"！

🔧 代码揭秘：一步步拆解"卷王"制造机

废话不多说，直接上代码！这段代码就是我们今天的主角，它将带领我们找到文章中的"卷王"词。

ini 复制代码

function findMostWord(article) {
  // 合法性判断
  if (!article) return;

  // 参数处理
  article = article.trim().toLowerCase();
  let wordList = article.match(/[a-z]+/g);
  let visited = [],
    maxNum = 0,
    maxWord = "";

  article = " " + wordList.join(" ") + " ";

  // 遍历判断单词出现次数
  wordList.forEach(function(item) {
    if (visited.indexOf(item) < 0) {
      // 加入 visited
      visited.push(item);
      let word = new RegExp(" " + item + " ", "g");
      let num = article.match(word).length;
      if (num > maxNum) {
        maxNum = num;
        maxWord = item;
      }
    }
  });

  return maxWord + " " + maxNum;
}

🛡️ 合法性判断：防患于未然

kotlin 复制代码

if (!article) return;

这行代码是程序的"守门员"。在处理任何数据之前，我们都要先检查一下数据是不是"合法"的。如果article是null、undefined或者空字符串，直接return，避免后续操作报错。这就像你出门前检查钱包有没有带一样，是个好习惯！

⚙️ 参数处理：给文章"洗个澡"

ini 复制代码

article = article.trim().toLowerCase();
let wordList = article.match(/[a-z]+/g);
let visited = [],
  maxNum = 0,
  maxWord = "";

article = " " + wordList.join(" ") + " ";

这一段是"预处理"阶段，我们对文章进行了一系列"美容"操作：

article.trim().toLowerCase(): trim()去除文章两端的空格，toLowerCase()将所有字母转换为小写。这样，Hello和hello就被"一视同仁"了。
article.match(/[a-z]+/g): 这是"魔法"所在！我们使用正则表达式/[a-z]+/g来匹配文章中所有的单词。[a-z]+表示匹配一个或多个小写字母，g表示全局匹配，找出所有符合条件的单词，并把它们放到wordList数组里。标点符号？它们被无情地"抛弃"了！
visited = [], maxNum = 0, maxWord = "": 初始化三个变量。visited用来记录已经统计过的单词，避免重复统计；maxNum记录目前出现频率最高的次数；maxWord记录出现频率最高的单词。
article = " " + wordList.join(" ") + " ": 这一步很巧妙！我们将wordList中的单词用空格连接起来，并在前后也加上空格。这样做是为了方便后续使用正则表达式精确匹配单词，避免apple匹配到pineapple的情况。比如，我们要找apple，就找apple，这样就不会误伤无辜了。

🔄 遍历统计：找出真正的"卷王"

ini 复制代码

wordList.forEach(function(item) {
  if (visited.indexOf(item) < 0) {
    // 加入 visited
    visited.push(item);
    let word = new RegExp(" " + item + " ", "g");
    let num = article.match(word).length;
    if (num > maxNum) {
      maxNum = num;
      maxWord = item;
    }
  }
});

这是核心的统计逻辑：

wordList.forEach(function(item) { ... }): 遍历wordList中的每一个单词。
if (visited.indexOf(item) < 0): 这是一个"去重"的判断。如果当前单词item还没有被统计过（不在visited数组中），我们才进行统计。这样可以避免重复计算，提高效率。
visited.push(item): 将当前单词加入visited数组，表示它已经被"打卡"了。
let word = new RegExp(" " + item + " ", "g");: 再次使用正则表达式！这次我们构建了一个新的正则表达式，用来精确匹配当前单词。注意，这里我们用空格把单词包起来，确保匹配的是完整的单词，而不是单词的一部分。
let num = article.match(word).length;: 在处理过的article字符串中，使用我们新构建的正则表达式来匹配单词，match()方法会返回所有匹配到的结果组成的数组，length就是这个单词出现的次数。
if (num > maxNum) { maxNum = num; maxWord = item; }: 如果当前单词的出现次数num比我们目前记录的maxNum还要大，那么恭喜它，它就是新的"卷王"！我们更新maxNum和maxWord。

🎉 结果返回："卷王"驾到！

kotlin 复制代码

return maxWord + " " + maxNum;

最后，程序会返回出现频率最高的单词和它出现的次数。是不是很简单？

总结与思考

通过这个小小的场景题，我们复习了JavaScript中字符串处理、数组操作、正则表达式以及基本的逻辑判断。虽然代码看起来不长，但其中蕴含的思路和技巧，在实际开发中可是非常实用的哦！

下次面试遇到类似的问题，你就可以自信地亮出这段代码，并向面试官解释其中的奥秘了！记住，前端的魅力就在于，用最优雅的方式解决最实际的问题！

希望这篇博客能帮助你更好地理解这个前端场景题，祝你在前端的道路上越走越远，成为真正的"前端卷王"！