详解堆的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 相关文章推荐
jquery validation插件表单验证的一个例子
Mar 03 Javascript
JS下高效拼装字符串的几种方法比较与测试代码
Apr 15 Javascript
jquery常用特效方法使用示例
Apr 25 Javascript
js怎么覆盖原有方法实现重写
Sep 04 Javascript
JavaScript设置body高度为浏览器高度的方法
Feb 09 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
Mar 07 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
Oct 21 Javascript
javascript判断firebug是否开启的方法
Nov 23 Javascript
Bootstrap3 图片(响应式图片&amp;图片形状)
Jan 04 Javascript
Vue.js组件间的循环引用方法示例
Dec 27 Javascript
vue 实现强制类型转换 数字类型转为字符串
Nov 07 Javascript
vue制作toast组件npm包示例代码
Oct 29 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
thinkphp学习笔记之多表查询
2014/07/28 PHP
PHP提示Warning:phpinfo() has been disabled函数禁用的解决方法
2014/12/17 PHP
PHP实现抓取Google IP并自动修改hosts文件
2015/02/12 PHP
php图片水印添加、压缩、剪切的封装类实现
2020/04/18 PHP
php 利用array_slice函数获取随机数组或前几条数据
2015/09/30 PHP
JavaScript中Array 对象相关的几个方法
2006/12/22 Javascript
javascript Demo模态窗口
2009/12/06 Javascript
js parsefloat parseint 转换函数
2010/01/21 Javascript
appendChild() 或 insertBefore()使用与区别介绍
2013/10/11 Javascript
JS中的构造函数详细解析
2014/03/10 Javascript
jQuery取消ajax请求的方法
2015/06/09 Javascript
javascript实现的多个层切换效果通用函数实例
2015/07/06 Javascript
Json解析的方法小结
2016/06/22 Javascript
微信小程序 火车票查询实例讲解
2016/10/17 Javascript
微信小程序 省市区选择器实例详解(附源码下载)
2017/01/05 Javascript
JavaScript实现瀑布流以及加载效果
2017/02/11 Javascript
jquery实现手机端单店铺购物车结算删除功能
2017/02/22 Javascript
利用jqprint插件打印页面内容的实现方法
2018/01/09 Javascript
JavaScript数组方法的错误使用例子
2018/09/13 Javascript
JS实现提示框跟随鼠标移动
2019/08/27 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
2019/10/11 Javascript
原生javascript单例模式的应用实例分析
2020/02/23 Javascript
[01:07:21]NAVI vs VG Supermajor 败者组 BO3 第二场 6.5
2018/06/06 DOTA
python操作MySQL数据库具体方法
2013/10/28 Python
Python实现的一个简单LRU cache
2014/09/26 Python
用Python的Django框架来制作一个RSS阅读器
2015/07/22 Python
python简单操作excle的方法
2018/09/12 Python
python matplotlib库绘制散点图例题解析
2019/08/10 Python
Python浮点型(float)运算结果不正确的解决方案
2020/09/22 Python
使用Html5中的cavas画一面国旗
2019/09/25 HTML / CSS
2014年结对帮扶工作总结
2014/12/17 职场文书
2015法院个人工作总结范文
2015/05/25 职场文书
社区挂职锻炼个人工作总结
2015/10/23 职场文书
Redis模仿手机验证码发送的实现示例
2021/11/02 Redis
Python&Matlab实现灰狼优化算法的示例代码
2022/03/21 Python
在MySQL中你成功的避开了所有索引
2022/04/20 MySQL