详解堆的javascript实现方法


Posted in Javascript onNovember 29, 2016

堆的定义

最大(最小)堆是一棵每一个节点的键值都不小于(大于)其孩子(如果存在)的键值的树。大顶堆是一棵完全二叉树,同时也是一棵最大树。小顶堆是一棵完全完全二叉树,同时也是一棵最小树。

另外,记住这两个概念,对写代码太重要了:

      1、父节点和子节点的关系:看定义

      2、完全二叉树:参考[2]

基本操作

      1、Build(构建堆)

      2、Insert(插入)

      3、Delete(删除:最小或者最大的那个)

代码实现

首先,写代码前有两个非常重要的点:

      1、用一个数组就可以作为堆的存储结构,非常简单而且易操作;

      2、另外同样因为是数组作为存储结构,所以父子节点之间的关系就能根据索引就轻松找到对方了。

对于JavaScript以0作为数组索引开始,关系如下:

nLeftIndex = 2 * (nFatherIndex+1) - 1;
nRightIndex = 2* (nFatherIndex+1);

前面提到注意两个概念,是有助于理解的:

       1、因为是数组,所以父子节点的关系就不需要特殊的结构去维护了,索引之间通过计算就可以得到,省掉了很多麻烦。如果是链表结构,就会复杂很多;

       2、完全二叉树的概念可以参考[2],要求叶子节点从左往右填满,才能开始填充下一层,这就保证了不需要对数组整体进行大片的移动。这也是随机存储结构(数组)的短板:删除一个元素之后,整体往前移是比较费时的。这个特性也导致堆在删除元素的时候,要把最后一个叶子节点补充到树根节点的缘由

代码实现:

/******************************************************
* file : 堆
* author : "page"
* time : "2016/11/02"
*******************************************************/
function Heap()
{
 this.data = [];
}

Heap.prototype.print = function () {
 console.log("Heap: " + this.data);
}

Heap.prototype.build = function(data){
 // 初始化
 this.data = [];
 if (!data instanceof Array)
 return false;

 // 入堆
 for (var i = 0; i < data.length; ++i) {
 this.insert(data[i]);
 }

 return true;
}

Heap.prototype.insert = function( nValue ){
 if (!this.data instanceof Array) {
 this.data = [];
 }

 this.data.push(nValue);
 // 更新新节点
 var nIndex = this.data.length-1;
 var nFatherIndex = Math.floor((nIndex-1)/2);
 while (nFatherIndex > 0){
 if (this.data[nIndex] < this.data[nFatherIndex]) {
 var temp = this.data[nIndex];
 this.data[nIndex] = this.data[nFatherIndex];
 this.data[nFatherIndex] = temp;
 }

 nIndex = nFatherIndex;
 nFatherIndex = Math.floor((nIndex-1)/2);
 }
}

Heap.prototype.delete = function( ){
 if (!this.data instanceof Array) {
 return null;
 }

 var nIndex = 0;
 var nValue = this.data[nIndex];
 var nMaxIndex = this.data.length-1;
 // 更新新节点
 var nLeaf = this.data.pop();
 this.data[nIndex] = nLeaf;

 while (nIndex < nMaxIndex ){
 var nLeftIndex = 2 * (nIndex+1) - 1;
 var nRightIndex = 2 * (nIndex+1);

 // 找最小的一个子节点(nLeftIndex < nRightIndex)
 var nSelectIndex = nLeftIndex;
 if (nRightIndex < nMaxIndex) {
 nSelectIndex = (this.data[nLeftIndex] > this.data[nRightIndex]) ? nRightIndex : nLeftIndex;
 }

 if (nSelectIndex < nMaxIndex && this.data[nIndex] > this.data[nSelectIndex] ){
 var temp = this.data[nIndex];
 this.data[nIndex] = this.data[nSelectIndex];
 this.data[nSelectIndex] = temp;
 }

 nIndex = nSelectIndex;
 }

 return nValue;
}
// test
var heap = new Heap();
heap.build([1, 3, 5, 11, 4, 6, 7, 12, 15, 10, 9, 8]);
heap.print();
// insert
heap.insert(2);
heap.print();
// delete
heap.delete();
heap.print();

关于JavaScript的几点小结

这里是采用面向对象的一种实现方法,感觉上不是太优雅,不知道还有没有更好的表示方法和写法;

学习了数组的几个用法:push和pop的操作太好用了;

判断数组的方式也是临时从网上搜的(instanceof),印象不深刻,不用的话下次估计还是有可能忘掉。

参考

[1]《数据结构和算法分析:C语言描述》

[2]图解数据结构(8)——二叉堆

[3]>数据结构:堆

总结

JavaScript的数组实现了push和pop这些操作,许多其他语言也提供了类似的数据结构和操作(比如C++的Vector),同时也支持随机操作。所以,我开始想如果这些结构上简单的加上自动排序的概念,那么一个堆就轻松搞定了,后面看到C++ STL的make_heap就知道自己知道的太少了,但也庆幸自己思维方式是对的。JavaScript的没有去查,我想有或者实现起来很容易;
自己去实现了之后,发现这个结构也很简单,只要你肯去跟它亲密接触一次就可以了;

JavaScript的细节部分还是不太了解,比如数组的应用上还要再翻资料才能用;对于JavaScript的灵魂还是没有接触到,精髓部分需要不断的学习和练习;

这些代码,只要你去了解了概念,了解了编程的基础,就可以写的出来。但是,代码还可以写的更简洁,比如delete函数求最小的子节点的时候,左右节点的索引就不需要比较,肯定是左边的小。代码部分感觉还是可以继续优化和精简的。

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
常用js脚本
Dec 03 Javascript
javaScript 删除字符串空格多种方法小结
Oct 24 Javascript
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
Aug 05 Javascript
Angularjs注入拦截器实现Loading效果
Dec 28 Javascript
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
Aug 15 Javascript
AngularJS中指令的四种基本形式实例分析
Nov 22 Javascript
原生js实现可拖拽效果
Feb 28 Javascript
JavaScript html5利用FileReader实现上传功能
Mar 27 Javascript
微信小程序 template模板详解及实例代码
Mar 09 Javascript
解决Vue页面固定滚动位置的处理办法
Jul 13 Javascript
Angular4学习笔记之实现绑定和分包
Aug 01 Javascript
Vue父组件调用子组件事件方法
Feb 23 Javascript
Bootstrap Table使用心得总结
Nov 29 #Javascript
jQuery将表单序列化成一个Object对象的实例
Nov 29 #Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
Nov 29 #Javascript
jQuery序列化表单成对象的简单实现
Nov 29 #Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
Nov 29 #Javascript
JS访问DOM节点方法详解
Nov 29 #Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
Nov 29 #Javascript
You might like
php中使用cookie来保存用户登录信息的实现代码
2012/03/08 PHP
PHP应用JSON技巧讲解
2013/02/03 PHP
Php无限级栏目分类读取的实现代码
2014/02/19 PHP
PHP远程采集图片详细教程
2014/07/01 PHP
PHP多文件上传实例
2015/07/09 PHP
PHP对象的浅复制与深复制的实例详解
2017/10/26 PHP
PHP htmlspecialchars()函数用法与实例讲解
2019/03/08 PHP
浅析PHP中json_encode与json_decode的区别
2020/07/15 PHP
PHP 实现链式操作
2021/03/09 PHP
jQuery中ajax的使用与缓存问题的解决方法
2013/12/19 Javascript
js防止DIV布局滚动时闪动的解决方法
2014/10/30 Javascript
jQuery Validate验证框架经典大全
2015/09/23 Javascript
jQuery获得字体颜色16位码的方法
2016/02/20 Javascript
js设置文字颜色的方法示例
2016/12/30 Javascript
js通过指定下标或指定元素进行删除数组的实例
2017/01/12 Javascript
Angular2数据绑定详解
2017/04/18 Javascript
jQuery响应滚动条事件功能示例
2017/10/14 jQuery
浅析JS中回调函数及用法
2018/07/25 Javascript
vscode中vue-cli项目es-lint的配置方法
2018/07/30 Javascript
Vue3不支持Filters过滤器的问题
2020/09/24 Javascript
jenkins自动构建发布vue项目的方法步骤
2021/01/04 Vue.js
ptyhon实现sitemap生成示例
2014/03/30 Python
简单介绍Python中利用生成器实现的并发编程
2015/05/04 Python
python操作excel的包(openpyxl、xlsxwriter)
2018/06/11 Python
Python创建或生成列表的操作方法
2019/06/19 Python
pyQT5 实现窗体之间传值的示例
2019/06/20 Python
Python使用pyserial进行串口通信的实例
2019/07/02 Python
python根据文本生成词云图代码实例
2019/11/15 Python
Django实现whoosh搜索引擎使用jieba分词
2020/04/08 Python
Python如何读取、写入JSON数据
2020/07/28 Python
几道数据库的概念性面试题
2014/05/30 面试题
毕业生找工作的求职信范文
2013/12/24 职场文书
博士论文答辩开场白
2015/06/01 职场文书
Keras在mnist上的CNN实践,并且自定义loss函数曲线图操作
2021/05/25 Python
Go语言基础知识点介绍
2021/07/04 Golang
Python matplotlib多个子图绘制整合
2022/04/13 Python