当前位置：首页 > news >正文

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

news 来源：原创 2024/9/20 23:25:43

要实现这个功能，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>