详解堆的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 相关文章推荐
ASP.NET jQuery 实例9  通过控件hyperlink实现返回顶部效果
Feb 03 Javascript
JS+ACTIVEX实现网页选择本地目录路径对话框
Mar 18 Javascript
javascript函数中参数传递问题示例探讨
Jul 31 Javascript
Javascript基础知识(二)事件
Sep 29 Javascript
jQuery实现鼠标划过添加和删除class的方法
Jun 26 Javascript
基于jQuery实现多层次的手风琴效果附源码
Sep 21 Javascript
javaScript实现滚动条事件详解
Mar 24 Javascript
原生js实现form表单序列化的方法
Aug 02 Javascript
jQuery仿移动端支付宝键盘的实现代码
Aug 15 jQuery
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
May 30 Javascript
electron实现静默打印的示例代码
Aug 12 Javascript
uni-app 自定义底部导航栏的实现
Dec 11 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函数指定默认值方法的小例子
2013/12/04 PHP
discuz免激活同步登入代码修改方法(discuz同步登录)
2013/12/24 PHP
php实现兼容2038年后Unix时间戳转换函数
2015/03/18 PHP
Laravel执行migrate命令提示:No such file or directory的解决方法
2016/03/16 PHP
phpstudy默认不支持64位php的解决方法
2017/02/20 PHP
PHP多进程编程之僵尸进程问题的理解
2017/10/15 PHP
php抽象类和接口知识点整理总结
2019/08/02 PHP
Thinkphp 框架基础之源码获取、环境要求与目录结构分析
2020/04/27 PHP
认识延迟时间为0的setTimeout
2008/05/16 Javascript
jquery animate 动画效果使用说明
2009/11/04 Javascript
一个简单的Ext.XTemplate的实例代码
2012/03/18 Javascript
基于Jquery实现的一个图片滚动切换
2012/06/21 Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
2014/12/18 Javascript
jquery实现Ctrl+Enter提交表单的方法
2015/07/21 Javascript
jQuery实现带渐显效果的人物多级关系图代码
2015/10/16 Javascript
Javascript的表单验证长度
2016/03/16 Javascript
angular-ui-sortable实现可拖拽排序列表
2016/12/28 Javascript
angular.js+node.js实现下载图片处理详解
2017/03/31 Javascript
ES6新特性之字符串的扩展实例分析
2017/04/01 Javascript
jQuery实现的弹幕效果完整实例
2017/09/06 jQuery
vue 实现边输入边搜索功能的实例讲解
2018/09/16 Javascript
js实现页面多个日期时间倒计时效果
2019/06/20 Javascript
微信小程序拼接图片链接无底洞深入探究
2019/09/03 Javascript
Python标准库笔记struct模块的使用
2018/02/22 Python
PyQt5固定窗口大小的方法
2019/06/18 Python
Python 多线程共享变量的实现示例
2020/04/17 Python
HTML5: Web 标准最巨大的飞跃
2008/10/17 HTML / CSS
详解HTML5.2版本带来的修改
2020/05/06 HTML / CSS
北美三大旅游网站之一:Travelocity加拿大
2016/08/20 全球购物
巴西男士胡须和头发护理产品商店:Beard
2017/11/13 全球购物
意大利男装网店:Vrients
2019/05/02 全球购物
毕业生教师求职信
2013/10/20 职场文书
2014年控辍保学工作总结
2014/12/08 职场文书
2015年党支部书记工作总结
2015/05/21 职场文书
《田忌赛马》教学反思
2016/02/19 职场文书
学前班教学反思
2016/02/24 职场文书