06、JS实现:用双数组实现接雨水的算法(一步一步剖析,很详细)

用双数组实现接雨水的算法

  • Ⅰ、用双数组实现接雨水:
    • 1、题目描述:
    • 2、解题思路:
    • 3、实现代码:
  • Ⅱ、小结:

Ⅰ、用双数组实现接雨水:

1、题目描述:

其一、接雨水图:

在这里插入图片描述

其二、描述:

给定 n 个⾮负整数表示每个宽度为 1 的柱⼦的⾼度图,计算按此排列的柱⼦,下⾬之后能接多少⾬⽔;
上⾯是由数组 [0,1,0,2,1,0,1,3,2,1,2,1] 表示的⾼度图,在这种情况下,可以接 6 个单位的⾬⽔(蓝⾊部分表示⾬⽔);
示例:
输⼊: [0,1,0,2,1,0,1,3,2,1,2,1]
输出: 6

2、解题思路:

这是⼀道⾬⽔收集的问题, 思路较难, 如上图所示,让我们求下过⾬之后最多可以积攒多少的⽔;
思路:
上图中 height 数组的每一项所能接的水数,依次求和,然后相加就将是最终的输出结果;

如何才能得到 height 数组每一项所能接的水数?
答:可以计算接雨之后的水位,减去 height 数组原本的高度,就是 height 数组每一项所能接的水数;


// 根据思路得到的代码为:
for (let i = 0; i < height.length; i++) {
 area += (h[i] - height[i]) * 1; // h为下⾬之后的⽔位
}


存在的问题:如何才能计算出接雨之后的水位?
答:经过逻辑思考可知,水位的高低是根据左右两侧柱⼦的最⼤值中的较⼩值来决定的,并不是某个柱子两边的值来决定的;

如上图:height[5] 的值为0,但其水位的高度是 2,这个值的计算方法是左右两侧柱⼦的最⼤值中的较⼩值来决定,左侧所有柱子的最大值
是2,右侧所有柱子的最大值是 3,因此此时水位的高度就是左右两侧柱⼦的最⼤值中的较⼩值,就为 2;

而已知水位后,再减去对应柱子的高度,就是该位置所接的水的数值;

3、实现代码:

其一、代码为:


const trap = (height) => {
  let max = 0
  let volume = 0
  const leftMax = []
  const rightMax = []
  for (let i = 0; i < height.length; i++) {
    leftMax[i] = max = Math.max(height[i], max)
  }

  // 此时的输出结果为:[0, 1, 1, 2, 2, 2, 2, 3, 3, 3, 3, 3]
  // console.log(leftMax, 11223344)

  max = 0
  for (let i = height.length - 1; i >= 0; i--) {
    rightMax[i] = max = Math.max(height[i], max)
  }

  // 此时的输出结果为:[3, 3, 3, 3, 3, 3, 3, 3, 2, 2, 2, 1]
  // console.log(rightMax, 55667788)

  for (let i = 0; i < height.length; i++) {
    volume = volume + Math.min(leftMax[i], rightMax[i]) - height[i]
  }
  return volume
}

// 此时的输出结果为:6(即,能接 6 个单位的雨水);
trap([0, 1, 0, 2, 1, 0, 1, 3, 2, 1, 2, 1])



    执行  trap([0, 1, 0, 2, 1, 0, 1, 3, 2, 1, 2, 1])  函数后代码执行的过程:
    
    第一个循环:for (let i = height.length - 1; i >= 0; i--) {}, max = 0;
    	max       height[i]          Math.max(height[i], max)       max        leftMax[i]
    	 0			 0                          0                    0             0
    	 0			 1                          1                    1             1
    	 1			 0                          1                    1             1
    	 1			 2                          2                    2             2
    	 2			 1                          2                    2             2
    	 2			 0                          2                    2             2
    	 2			 1                          2                    2             2
    	 2			 3                          3                    3             3
    	 3			 2                          3                    3             3
    	 3			 1                          3                    3             3
    	 3			 2                          3                    3             3
    	 3			 1                          3                    3             3

    此时 leftMax 的数组为:[0, 1, 1, 2, 2, 2, 2, 3, 3, 3, 3, 3];
    	
    	
    	
    第二个循环:for (let i = height.length - 1; i >= 0; i--) {}, max = 0;
    	max       height[i]          Math.max(height[i], max)       max       rightMax[i]
    	 0			 1                          1                    1             1    
    	 1			 2                          2                    2             2
    	 2			 1                          2                    2             2
    	 2			 2                          2                    2             2
    	 2			 3                          3                    3             3
    	 3			 1                          3                    3             3
    	 3			 0                          3                    3             3
    	 3			 1                          3                    3             3
    	 3			 2                          3                    3             3
    	 3			 0                          3                    3             3
    	 3			 1                          3                    3             3
    	 3			 0                          3                    3             3
    	 
    此时 rightMax 的数组为:[3, 3, 3, 3, 3, 3, 3, 3, 2, 2, 2, 1];



    第三个循环:for (let i = 0; i < height.length; i++) {}, volume = 0;
     volume    leftMax[i]     rightMax[i]      Math.min(leftMax[i], rightMax[i])     height[i]        volume
    	0          0               3                            0            -           0              0
    	0          1               3                            1            -           1              0
    	0          1               3                            1            -           0              1
    	1          2               3                            2            -           2              1
    	1          2               3                            2            -           1              1+1
    	1+1        2               3                            2            -           0              1+1+2
    	1+1+2      2               3                            2            -           1              1+1+2+1
    	1+1+2+1    3               3                            3            -           3              1+1+2+1
    	1+1+2+1    3               2                            2            -           2              1+1+2+1
    	1+1+2+1    3               2                            2            -           1              1+1+2+1+1
    	1+1+2+1+1  3               2                            2            -           2              1+1+2+1+1
    	1+1+2+1+1  3               1                            1            -           1              1+1+2+1+1
    
    此时 volume 的最终返回值为: 1+1+2+1+1 = 6;

其二、截图为:

在这里插入图片描述

Ⅱ、小结:

其一、哪里有不对或不合适的地方,还请大佬们多多指点和交流!
其二、若有转发或引用本文章内容,请注明本博客地址(直接点击下面 url 跳转) https://blog.csdn.net/weixin_43405300,创作不易,且行且珍惜!
其三、有兴趣的话,可以多多关注这个专栏(Vue(Vue2+Vue3)面试必备专栏)(直接点击下面 url 跳转):https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/492648.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

使用Selenium-PO设计模式提高Web自动化测试效率

PO&#xff08;page object&#xff09;设计模式是在自动化中已经流行起来的一种易于维护和减少代码的设计模式。在自动化测试中&#xff0c;PO对象作为一个与页面交互的接口。测试中需要与页面的UI进行交互时&#xff0c;便调用PO的方法。这样做的好处是&#xff0c;如果页面的…

探索AI大模型学习的未来之路

文章目录 一、引言二、AI大模型学习的理论基础2.1 深度学习2.2 数据处理 三、AI大模型的训练优化与应用实例3.1 训练优化3.2 AI大模型在特定领域的应用实例 四、AI大模型学习的注意点五、AI大模型学习的未来发展趋势与挑战5.1 发展趋势5.2 所面对的挑战 六、结论 一、引言 随着…

【2024系统架构设计】案例分析- 3 数据库

目录 一 基础知识 二 真题 一 基础知识 1 ORM ORM(Object—Relationl Mapping

【码银送书第十五期】一本书掌握数字化运维方法,构建数字化运维体系

前言 数字化转型已经成为大势所趋&#xff0c;各行各业正朝着数字化方向转型&#xff0c;利用数字化转型方法论和前沿科学技术实现降本、提质、增效&#xff0c;从而提升竞争力。 数字化转型是一项长期工作&#xff0c;包含的要素非常丰富&#xff0c;如数字化转型顶层设计、…

Intel AIPC发布会:开启AI终端应用的新纪元

2024年3月27日下午&#xff0c;Intel在北京市朝阳区凤凰中心举办了AIPC发布会开启了AI终端应用的新征程。 整场发布会围绕着‘让不可想象&#xff0c;变为寻常’主线进行。在本次发布会上&#xff0c;众多PC端的AI应用得到了展示&#xff0c;包括&#xff1a;智谱AI&#xff…

Spring Aop 源码解析(下)

ProxyFactory选择cglib或jdk动态代理原理 ProxyFactory在生成代理对象之前需要决定到底是使用JDK动态代理还是CGLIB技术: config就是ProxyFactory对象,把自己传进来了,因为ProxyFactory继承了很多类,其中一个父类就是ProxyConfig // config就是ProxyFactory对象// 是不是…

进程、线程、协程与虚拟线程(进程相关)

进程、线程、协程与虚拟线程 这一次我们从头&#xff0c;从最大的先开始说&#xff0c;我们从进程开始&#xff0c;因为内容比较多&#xff0c;所以我们分为几个不同的文章来介绍。先从进程&#xff0c;再从线程&#xff0c;最后介绍协程与虚拟线程。 简介 我们以一张操作系…

A - Environment-Friendly Travel Gym - 102501A

题意&#xff1a;给你一些交通方式和站点&#xff0c;不同的交通方式碳排放不一样&#xff0c;问从起点到终点距离不超过B的路径中最少的碳排放是多少。 思路&#xff1a;二维dijkstra&#xff0c;建图什么的倒不是很难&#xff0c;主要就是对二维dij的理解了&#xff1b; 表示…

h5 tailwind 使用rounded类导致安卓端样式显示有问题

问题&#xff1a; h5 页面使用了tailwindcss插件&#xff0c;运用了rounded 类&#xff0c;发现在ios和安卓上显示不一致&#xff0c;安卓上样式乱了 解决方案&#xff1a; 将默认得rem单位&#xff0c;改为px的单位 原理&#xff1a; 由于tailwindcss里面的默认元素的默认的…

城市内涝治理新突破:慧天【HTWATER】软件,实现城市内涝一维二维耦合模拟

​慧天排水数字化分析平台针对城市排水系统基础设施数据管理的需求&#xff0c;以及水文、水力及水质模拟对数据的需求&#xff0c;实现了以数据库方式对相应数据的存储。可以对分流制排水系统及合流制排水系统进行地表水文、管网水力、水质过程的模拟计算。可以对城市低影响开…

超好用的快捷回复软件

随着直播经济和短视频平台的兴起&#xff0c;品牌营销阵地不再局限于传统的电商巨头——淘宝、天猫、京东和拼多多&#xff0c;越来越多的品牌正积极布局快手、抖音等新晋电商平台&#xff0c;同步打造社群矩阵以拓宽产品推广渠道。这种多维度的市场渗透策略有力地提升了品牌的…

腾讯云2核4G的云服务器性能咋样?支持多少人?

腾讯云轻量应用服务器2核4G5M配置性能测评&#xff0c;腾讯云轻量2核4G5M带宽服务器支持多少人在线访问&#xff1f;并发数10&#xff0c;支持每天5000IP人数访问&#xff0c;腾讯云百科txybk.com整理2核4G服务器支持多少人同时在线&#xff1f;并发数测试、CPU性能、内存性能、…

爬虫基础训练题

1.抓取imooc网站实战课程部分的课程名称&#xff08;所有课程大概7页&#xff0c;抓取1到5页&#xff09;&#xff0c;并把所有课程名称存储为txt文件第一页地址 2.设置一个请求头&#xff08;headers&#xff09;&#xff0c;这是一个字典&#xff0c;用于在HTTP请求中设置请…

Floyd算法:浅显外表下的动态规划内核

很久没遇到Floyd算法的题目了&#xff0c;2642. 设计可以求最短路径的图类刚好是一个典型。在实现核心算法之余&#xff0c;顺便整理一下算法的内核。 Floyd-Warshall’s Algorithm Floyd-Warshall算法&#xff0c;简称Floyd算法&#xff0c;是“有向图非负权图的多源最短路”…

第十届统计建模大赛 ——大数据与人工智能时代的统计研究数据解析

统计建模一般做法&#xff1a;可以采用统计分析方法&#xff0c;先进性数据预处理&#xff0c;再利用深度学习、神经网路方法进行预测。 1.碳排放预测&#xff1a;数据加代码 2.新能源汽车数据 3.太阳辐射数据 4.参考文献 请联系 建模忠哥小师妹

JavaScript 打印教程(第二部分)设置编码

JavaScript 打印教程&#xff08;第二部分&#xff09;设置编码 在进行文本打印时&#xff0c;尤其是涉及到中文或其他特殊字符时&#xff0c;正确的编码设置是非常重要的。不同的打印机支持不同的指令集&#xff0c;因此了解并使用适合您打印机的指令集是关键。本篇教程继续使…

【爬虫基础】第5讲 AJAX动态页面的数据获取

静态&#xff1a;访问地址栏里的数据就可以获取到想要的数据 动态&#xff1a;访问地址栏里的数据获取不到想要的数据 解决方案&#xff1a;抓包 打开浏览器的开发者工具-network-xhr,找到可以获取到数据的URL访问即可 获取url地址 代码实现&#xff1a; from urllib.request…

flask各种版本的项目,终端命令运行方式的实现

目录 写在前面 一、Flask项目的基本结构 二、使用终端命令运行Flask项目 1. 安装Flask 2. 创建Flask应用 3. 配置FLASK_APP环境变量 4. 运行Flask应用 5. 访问Flask应用 三、Flask CLI的其他功能 1. 创建Flask应用 2. 运行开发服务器 3. 清理缓存文件 4. 运行单元…

Spring6 (1)

Spring 1、简介&#xff1a;2、第一个程序2、set注入2.1 简单数据类型2.2测试2.3 注入Properties2.4 p命名空间注入2.5 c命名空间注入2.6 util注入2.6 引入外部配置文件 1、简介&#xff1a; 自己的理解&#xff1a;spring其实就是一个容器&#xff0c;也可以说是一个框架&…

Codeforces Round 936 (Div. 2) ---- E. Girl Permutation ---- 题解 (数论)

E. Girl Permutation&#xff1a; 题目大意&#xff1a; 思路解析&#xff1a; 先理解什么是前缀最大值&#xff0c;他应该满足什么条件&#xff0c;根据定义可知对于 i 如果满足 所以 j < i&#xff0c;并且有 ai > aj&#xff0c;那么ai就是前缀最大值&#xff0c; 换…