前端 JavaScript 获取字符串中重复次数最多的字符

简介: 问渠那得清如许,为有源头活水来。

问渠那得清如许,为有源头活水来。


想要保持自己的技术活力,最有效的手段就是通过不断地输入来提供足够的养分。我们也不必刻意追求高深的或者新鲜的知识点,通过对一个基础问题的全方位多维度解析,同样也会收获不小。


4.png


题目


假设有这么一道题目:请获取字符串 "bianchengsanmei,xuexiyouqudezhishi,jieshiyouqudepengyou,suzaoyouqudelinghun." 中重复次数最多的字符及其重复次数


今天我们就来解一下这道题。


分析


这种题目的解法比较开放,实现手段也可能多种多样,其中的区别在于代码的运行性能有高有低(时间复杂度和空间复杂度不同)。


在这里需要注意的只有一点:符合最大次数的字符可能不止一个


使用对象


解题思路:


  • 遍历字符串,以各个字符为 key,重复次数为 value,存入一个对象。
  • 遍历对象,得到 value 的最大值。
  • 遍历对象,根据得到的最大 value 值,获取到对应的字符 key。
  • 输出结果。


代码实现如下:


const testStr = "bianchengsanmei,xuexiyouqudezhishi,jieshiyouqudepengyou,suzaoyouqudelinghun.ii";
// 获取各个字符及其重复次数的映射对象
let wordsObj = {};
for (let index = 0; index < testStr.length; index++) {
    const word = testStr[index];
    word in wordsObj ? wordsObj[word]++ : wordsObj[word] = 1;
}
// 获取最大的重复次数
let maxNum = 0;
for (const word in wordsObj) {
    const num = wordsObj[word];
    if (num >= maxNum) {
        maxNum = num;
    }
}
// 获取最大重复次数对应的字符,并输出结果
for (const word in wordsObj) {
    const num = wordsObj[word];
    if (num === maxNum) {
        console.log(`重复次数最多的字符是:${ word },重复次数为:${ maxNum }`)
    }
}
// 出现次数最多的字符是:i,出现次数为:10
// 出现次数最多的字符是:u,出现次数为:10


分析:


  • 这应该是很多人第一时间能够想到的解法,很符合“面向过程”的编程思想。
  • 总共有三个循环,存在较大的优化空间。


数组&指针


解题思路:


  • 将字符串转为数组并排序,使重复字符排在一起。
  • 使用指针思想,得到最大重复次数和对应的字符数组。
  • 输出结果。


代码实现如下:


const testStr = "bianchengsanmei,xuexiyouqudezhishi,jieshiyouqudepengyou,suzaoyouqudelinghun.ii";
// 将字符串转为数组并排序
const testStrArr = testStr.split("").sort();
let startIndex = 0;
let endIndex = 1;
let maxNum = 0;
let validWords = [];
// 使用指针法,获取最大重复次数及最大次数对应的字符数组
while (startIndex < testStrArr.length) {
    // startIndex 和 endIndex 位置的字符不同
    if (testStrArr[startIndex] !== testStrArr[endIndex]) {
        // 计算 startIndex 和 endIndex 之间的字符个数
        const rangeNum = endIndex - startIndex;
        if (rangeNum > maxNum) {
            maxNum = rangeNum;
            // 如果出现了新的最大次数,则给存放符合条件字符的数组重新赋值
            validWords = [testStrArr[startIndex]];
        } else if (rangeNum === maxNum) {
            // 如果新的次数和最大次数相等,则将该字符 push 进字符数组
            validWords.push(testStrArr[startIndex]);
        }
        startIndex = endIndex;
    }
    endIndex++;
}
// 打印结果
for (let index = 0; index < validWords.length; index++) {
    const word = validWords[index];
    console.log(`重复次数最多的是:${ word },重复次数为:${ maxNum }`)
}


分析:


本方法的难点和精髓在于使用了指针法,一次循环就获取到了我们想要的结果。


总结


主流的解题思路大概就这两种,其他的很多解法都可以看作是这两种思路的变种。


万变不离其宗,只要将解题思路理清了,代码实现只是一个结果而已。在平常的工作学习中,我们要有意识地培养自己的发散性思维,从多角度去看待问题,你可能会发现不一样的风景哦!


希望能够对大家有所启发哦!


~ 本文完,感谢阅读!


学习有趣的知识,结识有趣的朋友,塑造有趣的灵魂!


你来,怀揣期望,我有墨香相迎! 你归,无论得失,唯以余韵相赠!


知识与技能并重,内力和外功兼修,理论和实践两手都要抓、两手都要硬!


3.png




相关文章
|
2月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
2天前
|
JavaScript 前端开发 开发者
JavaScript字符串的常用方法
在JavaScript中,字符串处理是一个非常常见的任务。JavaScript提供了丰富的字符串操作方法,使开发者能够高效地处理和操作字符串。本文将详细介绍JavaScript字符串的常用方法,并提供示例代码以便更好地理解和应用这些方法。
28 13
|
2月前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
springboot解决js前端跨域问题,javascript跨域问题解决
|
2月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
59 5
|
2月前
|
缓存 前端开发 JavaScript
JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式(Hash路由和History路由)、优点及挑战,并通过实际案例分析,帮助开发者更好地理解和应用这一关键技术,提升用户体验。
85 1
|
2月前
|
JavaScript 前端开发 数据处理
模板字符串和普通字符串在浏览器和 Node.js 中的性能表现是否一致?
综上所述,模板字符串和普通字符串在浏览器和 Node.js 中的性能表现既有相似之处,也有不同之处。在实际应用中,需要根据具体的场景和性能需求来选择使用哪种字符串处理方式,以达到最佳的性能和开发效率。
|
2月前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
58 4
|
2月前
|
JavaScript 前端开发 索引
JavaScript学习第二章--字符串
本文介绍了JavaScript中的字符串处理,包括普通字符串和模板字符串的使用方法及常见字符串操作方法如`charAt`、`concat`、`endsWith`等,适合前端学习者参考。作者是一位热爱前端技术的大一学生,专注于分享实用的编程技巧。
34 2
|
2月前
|
资源调度 前端开发 JavaScript
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第10天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤,包括安装依赖、创建混淆脚本、修改 `package.json` 脚本命令、构建项目并执行混淆,以及在 HTML 文件中引用混淆后的文件。通过这些步骤,可以有效提高代码的安全性。
127 2
|
2月前
|
设计模式 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用JavaScript,打造智能交互体验!
【10月更文挑战第30天】前端开发领域充满了无限可能与创意,JavaScript作为核心语言,凭借强大的功能和灵活性,成为打造智能交互体验的重要工具。本文介绍前端大牛如何利用JavaScript实现平滑滚动、复杂动画、实时数据更新和智能表单验证等效果,展示了JavaScript的多样性和强大能力。
65 4