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