前端 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月前
|
前端开发 机器人 API
前端大模型入门(一):用 js+langchain 构建基于 LLM 的应用
本文介绍了大语言模型(LLM)的HTTP API流式调用机制及其在前端的实现方法。通过流式调用,服务器可以逐步发送生成的文本内容,前端则实时处理并展示这些数据块,从而提升用户体验和实时性。文章详细讲解了如何使用`fetch`发起流式请求、处理响应流数据、逐步更新界面、处理中断和错误,以及优化用户交互。流式调用特别适用于聊天机器人、搜索建议等应用场景,能够显著减少用户的等待时间,增强交互性。
336 2
|
9天前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
2月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
44 0
|
2月前
|
JavaScript 前端开发 API
Vue.js:现代前端开发的强大框架
【10月更文挑战第11天】Vue.js:现代前端开发的强大框架
69 41
|
15天前
|
资源调度 前端开发 JavaScript
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第10天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤,包括安装依赖、创建混淆脚本、修改 `package.json` 脚本命令、构建项目并执行混淆,以及在 HTML 文件中引用混淆后的文件。通过这些步骤,可以有效提高代码的安全性。
|
23天前
|
设计模式 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用JavaScript,打造智能交互体验!
【10月更文挑战第30天】前端开发领域充满了无限可能与创意,JavaScript作为核心语言,凭借强大的功能和灵活性,成为打造智能交互体验的重要工具。本文介绍前端大牛如何利用JavaScript实现平滑滚动、复杂动画、实时数据更新和智能表单验证等效果,展示了JavaScript的多样性和强大能力。
38 4
|
21天前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
|
21天前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
29 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
|
26天前
|
JavaScript 前端开发 开发者
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第27天】在前端开发领域,Vue.js和Angular是两个备受瞩目的框架。本文对比了两者的优劣,Vue.js以轻量级和易上手著称,适合快速开发小型到中型项目;Angular则由Google支持,功能全面,适合大型企业级应用。选择时需考虑项目需求、团队熟悉度和长期维护等因素。
38 1
|
27天前
|
JavaScript 前端开发 API
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第26天】前端技术的飞速发展让开发者在构建用户界面时有了更多选择。本文对比了Vue.js和Angular两大框架,介绍了它们的特点和优劣,并给出了在实际项目中如何选择的建议。Vue.js轻量级、易上手,适合小型项目;Angular结构化、功能强大,适合大型项目。
25 1