JavaScript字符频率统计代码示例

版权申诉

178 浏览量更新于2024-08-20 收藏 17KB DOCX 举报

本文主要介绍了如何使用JavaScript统计字符串中各个字符出现的次数，提供了两种不同的实现方法。在JavaScript中，统计字符串中字符出现次数的方法通常涉及到遍历字符串并使用对象来存储每个字符及其对应的计数。以下是两种实现方式： ### 方法一此方法通过创建一个空对象`obj`，然后遍历转换为小写（为了不区分大小写）的字符串`ary1`。在循环中，检查当前字符`key`是否已存在于`obj`中。如果存在，则将计数加1；如果不存在，则将其添加到`obj`中，并初始化计数为1。最后，遍历`obj`，打印出每个字符及其出现的次数。 ```javascript var ary = "abca12abbc121d"; var obj = {}; var i = 0; ary1 = ary.toLocaleLowerCase(); for (i = 0; i < ary1.length; i++) { key = ary1[i]; if (obj[key]) { obj[key]++; } else { obj[key] = 1; } } for (var key in obj) { console.log(key + "这个字符出现了" + obj[key] + "次"); } ``` ### 方法二这种方法涉及到HTML元素交互，它在页面上有一个输入框让用户输入字符串，一个按钮触发计算，以及一个区域显示结果。当点击按钮时，获取输入框的值，调用`total`函数进行统计，然后将结果按出现次数降序排序，显示前五个字符的出现次数。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="sc/char-summary.js"></script> </head> <body> <input type="text" id="txt-chars"> <button id="btn-ok">统计</button> <div id="show"></div> <script> function total(str) { // 实现统计逻辑 } document.getElementById("btn-ok").onclick = function() { var str = txtChars.value; var charTotal = total(str); charTotal.sort(function(a, b) { return (a.count - b.count) * -1; }); show.innerHTML = "<ul>"; for (var i = 0; i < 5; i++) { show.innerHTML += `<li>${charTotal[i].char} 出现了 ${charTotal[i].count} 次</li>`; } show.innerHTML += "</ul>"; }; </script> </body> </html> ``` 在这两个示例中，JavaScript的动态特性使得我们可以轻松地处理字符串数据，并提供直观的用户界面交互。方法一更侧重于纯JavaScript实现，而方法二则结合了前端页面元素，提供了一种用户友好的交互方式。无论哪种方式，它们都能有效地统计字符串中字符的出现频率。

mmoo_python

粉丝: 5030
资源: 1万+

JavaScript字符频率统计代码示例

【JavaScript源代码】ES6字符串的扩展实例.docx

【JavaScript源代码】基于网址URL中特殊字符转义编码.docx

【JavaScript源代码】JavaScript代码实现简单计算器.docx

【JavaScript源代码】Java 生成随机字符的示例代码.docx

【JavaScript源代码】javascript实现随机抽奖功能.docx

【JavaScript源代码】JavaScript实现表单验证功能.docx

【JavaScript源代码】JavaScript CollectGarbage函数案例详解.docx

【JavaScript源代码】JavaScript实现动态数字时钟.docx

【JavaScript源代码】JavaScript实现简单日期特效.docx

【JavaScript源代码】javascript canvas实现雨滴效果.docx

最新资源