要實現這個功能，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>
