JS实现：统计字符出现频率/计算文字在文本中的出现次数

news2024/9/25 11:14:53

要实现这个功能，JavaScript 一个非常强大的方法，那就是reduce()

reduce() 它用于将数组的所有元素减少到一个单一的值。这个值可以是任何类型，包括但不限于数字、字符串、对象或数组。

reduce() 方法接收一个回调函数作为参数，这个函数通常称为“reducer”。

reducer 必须至少接受两个参数：一个累加器（accumulator）和当前元素（current value）。累加器是用来存储中间结果的变量，而当前元素则是数组中的当前项。

reduce() 的基本语法如下：

array.reduce(function(accumulator, currentValue, currentIndex, array) {
  // 实现累加器和当前值之间的操作
  return accumulator;
}, initialValue);

accumulator：累积结果的值，也是每次迭代后返回的值。
currentValue：当前正在处理的数组元素。
currentIndex：当前元素的索引位置（可选参数）。
array：调用 reduce 方法的数组（可选参数）。
initialValue：提供给累加器的初始值（可选参数）。

示例：

假设我们有一个数字数组，我们想计算所有数字的总和：

const numbers = [1, 2, 3, 4, 5];

const sum = numbers.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);

console.log(sum); // 输出 15

reduce() 方法从初始值 0 开始，并将数组中的每个元素添加到累加器中。

如果想统计一个字符串中每个字符的出现次数，可以使用 reduce() 方法：

const str = "hello world";
const charCount = [...str].reduce((accumulator, char) => {
  if (accumulator[char]) {
    accumulator[char]++;
  } else {
    accumulator[char] = 1;
  }
  return accumulator;
}, {});

console.log(charCount);
// 输出: { h: 1, e: 1, l: 3, o: 2, ' ': 1, w: 1, r: 1, d: 1 }

在这个例子中，我们首先将字符串转换成字符数组，然后使用 reduce() 方法遍历每个字符并统计其出现次数。

reduce() 方法非常灵活，可以用于各种复杂的操作，如数据聚合、数据转换和数据过滤等。

配和 HTML 实现自定义的统计频率：

HTML

  <div>
      <div data-role="form-group">
        <label for="inputText">请输入文本:</label>
        <input type="text" id="inputText" />
      </div>
      <div data-role="form-group">
        <label for="charToCount">请输入需要统计的字符:</label>
        <input type="text" id="charToCount" />
      </div>
      <div id="result">文字的数量为：</div>
      <br />
      <button id="compute" οnclick="countCharFrequency()">开始计算</button>
    </div>

function countCharFrequency() {
        const inputText = document.getElementById("inputText").value;
        const charToCount = document.getElementById("charToCount").value;

        const result = [...inputText].reduce((acc, char) => {
          if (char === charToCount) {
            acc[char] = (acc[char] || 0) + 1;
          }
          return acc;
        }, {});

        const frequency = result[charToCount] || 0;
        const resultHtml = document.getElementById("result")
        resultHtml.innerText = `文字 ${charToCount} 的数量为：${frequency}`;
}

完整代码：

加上 CSS 样式，让页面精美一点

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>用reduce统计字符出现频率</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
        background-color: #f5f5f5;
      }

      label {
        display: block;
        margin-bottom: 5px;
        color: #333;
      }

      input[type="text"] {
        width: 100%;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        box-sizing: border-box;
      }

      div[data-role="form-group"] {
        margin-bottom: 15px;
      }

      button {
        background-color: #007bff;
        color: white;
        width: 100%;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s;
      }

      button:hover {
        background-color: #bfcfe1;
        color: #000;
      }

      #result {
        font-weight: bold;
        margin-top: 20px;
      }
    </style>
  </head>
  <body>
    <div>
      <div data-role="form-group">
        <label for="inputText">请输入文本:</label>
        <input type="text" id="inputText" />
      </div>
      <div data-role="form-group">
        <label for="charToCount">请输入需要统计的字符:</label>
        <input type="text" id="charToCount" />
      </div>
      <div id="result">文字的数量为：</div>
      <br />
      <button id="compute" onclick="countCharFrequency()">开始计算</button>
    </div>

    <script>
      function countCharFrequency() {
        const inputText = document.getElementById("inputText").value;
        const charToCount = document.getElementById("charToCount").value;

        const result = [...inputText].reduce((acc, char) => {
          if (char === charToCount) {
            acc[char] = (acc[char] || 0) + 1;
          }
          return acc;
        }, {});

        const frequency = result[charToCount] || 0;
        const resultHtml = document.getElementById("result");
        resultHtml.innerText = `文字 ${charToCount} 的数量为：${frequency}`;
      }
    </script>
  </body>
</html>