首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JavaScript中数据结构与算法(三)：链表

Posted in Javascript onJune 19, 2015

我们可以看到在javascript概念中的队列与栈都是一种特殊的线性表的结构，也是一种比较简单的基于数组的顺序存储结构。由于javascript的解释器针对数组都做了直接的优化，不会存在在很多编程语言中数组固定长度的问题(当数组填满后再添加就比较困难了，包括添加删除，都是需要把数组中所有的元素全部都变换位置的，javascript的的数组确实直接给优化好了，如push,pop,shift,unshift,split方法等等…)

线性表的顺序存储结构，最大的缺点就是改变其中一个元素的排列时都会引起整个合集的变化，其原因就是在内存中的存储本来就是连贯没有间隙的，删除一个自然就要补上。针对这种结构的优化之后就出现了链式存储结构，换个思路，我们完全不关心数据的排列，我们只需要在每一个元素的内部把下一个的数据的位置给记录就可以了，所以用链接方式存储的线性表简称为链表，在链式结构中，数据=（信息+地址）

链式结构中，我们把地址也可以称为“链”，一个数据单元就是一个节点，那么可以说链表就是一组节点组成的合集。每一个节点都有一个数据块引用指向它的下一个节点

JavaScript中数据结构与算法(三)：链表

数组元素是靠位置关系做逻辑引用，链表则是靠每一个数据元保存引用指针关系进行引用

这种结构上的优势就非常明显的，插入一个数据完全不需要关心其排列情况，只要把“链”的指向衔接上

这样做链表的思路就不会局限在数组上了，我们可以用对象了，只要对象之间存在引用关系即可

链表一般有，单链表、静态链表、循环链表、双向链表

单链表：就是很单一的向下传递，每一个节点只记录下一个节点的信息，就跟无间道中的梁朝伟一样做卧底都是通过中间人上线与下线联系，一旦中间人断了，那么就无法证明自己的身份了，所以片尾有一句话："我是好人，谁知道呢？”

静态链表：就是用数组描述的链表。也就是数组中每一个下表都是一个“节”包含了数据与指向

循环链表：由于单链表的只会往后方传递，所以到达尾部的时候，要回溯到首部会非常麻烦，所以把尾部节的链与头连接起来形成循环

双向链表：针对单链表的优化，让每一个节都能知道前后是谁，所以除了后指针域还会存在一个前指针域，这样提高了查找的效率，不过带来了一些在设计上的复杂度，总体来说就是空间换时间了

综合下，其实链表就是线性表中针对顺序存储结构的一种优化手段，但是在javascript语言中由于数组的特殊性（自动更新引用位置），所以我们可以采用对象的方式做链表存储的结构

单链表

我们实现一个最简单的链表关系

function createLinkList() {
  var _this = {},
    prev = null;
  return {
    add: function(val) {
      //保存当前的引用
      prev = {
        data: val,
        next: prev || null
      }
    }
  }
}
var linksList = createLinkList(); 
linksList.add("arron1"); 
linksList.add("arron2"); 
linksList.add("arron3");
//node节的next链就是 -arron3-arron2-arron1

通过node对象的next去直引用下一个node对象，初步是实现了通过链表的引用，这种链式思路jQuery的异步deferred中的then方法，还有日本的cho45的jsderferre中都有用到。这个实现上还有一个最关键的问题，我们怎么动态插入数据到执行的节之后？

所以我们必须 要设计一个遍历的方法，用来搜索这个node链上的数据，然后找出这个对应的数据把新的节插入到当前的链中，并改写位置记录

//在链表中找到对应的节
var findNode = function createFindNode(currNode) {
  return function(key){
    //循环找到执行的节，如果没有返回本身
    while (currNode.data != key) {
      currNode = currNode.next;
    }
    return currNode;        
  }
}(headNode);

这就是一个查找当前节的一个方法，通过传递原始的头部headNode节去一直往下查找next，直到找到对应的节信息

这里是用curry方法实现的

那么插入节的的时候，针对链表地址的换算关系这是这样

a-b-c-d的链表中，如果要在c(c.next->d)后面插入一个f

a-b-c-f-d ,那么c,next->f , f.next-d

通过insert方法增加节

//创建节
function createNode(data) {
  this.data = data;
  this.next = null;
}
//初始化头部节
//从headNode开始形成一条链条
//通过next衔接
var headNode = new createNode("head");

//在链表中找到对应的节
var findNode = function createFindNode(currNode) {
  return function(key){
    //循环找到执行的节，如果没有返回本身
    while (currNode.data != key) {
      currNode = currNode.next;
    }
    return currNode;        
  }
}(headNode);

//插入一个新节
this.insert = function(data, key) {
  //创建一个新节
  var newNode = new createNode(data);
  //在链条中找到对应的数据节
  //然后把新加入的挂进去
  var current = findNode(key);
  //插入新的接，更改引用关系
  //1:a-b-c-d
  //2:a-b-n-c-d
  newNode.next = current.next;
  current.next = newNode;
};

首先分离出createNode节的构建，在初始化的时候先创建一个头部节对象用来做节开头的初始化对象

在insert增加节方法中，通过对headNode链的一个查找，找到对应的节，把新的节给加后之后，最后就是修改一下链的关系

如何从链表中删除一个节点？

由于链表的特殊性，我们a->b->c->d  ，如果要删除c那么就必须修改b.next->c为 b.next->d，所以找到前一个节修改其链表next地址，这个有点像dom操作中removeChild找到其父节点调用移除子节点

同样的我们也在remove方法的设计中，需要设计一个遍历往上回溯一个父节点即可

//找到前一个节
var findPrevious = function(currNode) {
  return function(key){
    while (!(currNode.next == null) &&
      (currNode.next.data != key)) {
      currNode = currNode.next;
    }
    return currNode;      
  }
}(headNode);

//插入方法
this.remove = function(key) {
  var prevNode = findPrevious(key);
  if (!(prevNode.next == null)) {
    //修改链表关系
    prevNode.next = prevNode.next.next;
  }
};

测试代码：

<!doctype html><button id="test1">插入多条数据</button>
<button id="test2">删除Russellville数据</button><div id="listshow"><br /></div><script type="text/javascript">
 //////////
 //创建链表 //
 //////////
 function createLinkList() {

 //创建节
 function createNode(data) {
  this.data = data;
  this.next = null;
 }

 //初始化头部节
 //从headNode开始形成一条链条
 //通过next衔接
 var headNode = new createNode("head");

 //在链表中找到对应的节
 var findNode = function createFindNode(currNode) {
  return function(key) {
  //循环找到执行的节，如果没有返回本身
  while (currNode.data != key) {
   currNode = currNode.next;
  }
  return currNode;
  }
 }(headNode);

 //找到前一个节
 var findPrevious = function(currNode) {
  return function(key) {
  while (!(currNode.next == null) &&
   (currNode.next.data != key)) {
   currNode = currNode.next;
  }
  return currNode;
  }
 }(headNode);


 //插入一个新节
 this.insert = function(data, key) {
  //创建一个新节
  var newNode = new createNode(data);
  //在链条中找到对应的数据节
  //然后把新加入的挂进去
  var current = findNode(key);
  //插入新的接，更改引用关系
  //1:a-b-c-d
  //2:a-b-n-c-d
  newNode.next = current.next;
  current.next = newNode;
 };

 //插入方法
 this.remove = function(key) {
  var prevNode = findPrevious(key);
  if (!(prevNode.next == null)) {
  //修改链表关系
  prevNode.next = prevNode.next.next;
  }
 };


 this.display = function(fn) {
  var currNode = headNode;
  while (!(currNode.next == null)) {
  currNode = currNode.next;
  fn(currNode.data)
  }
 };

 }


 var cities = new createLinkList();

 function create() {
 var text = '';
 cities.display(function(data) {
  text += '-' + data;
 });
 var div = document.createElement('div')
 div.innerHTML = text;
 document.getElementById("listshow").appendChild(div)
 }

 document.getElementById("test1").onclick = function() {
 cities.insert("Conway", "head");
 cities.insert("Russellville", "Conway");
 cities.insert("Carlisle", "Russellville");
 cities.insert("Alma", "Carlisle");
 create();
 }

 document.getElementById("test2").onclick = function() {
 cities.remove("Russellville");
 create()
 }

</script>

双链表

原理跟单链表是一样的，无非就是给每一个节增加一个前链表的指针

JavaScript中数据结构与算法(三)：链表

增加节

//插入一个新节
this.insert = function(data, key) {
  //创建一个新节
  var newNode = new createNode(data);
  //在链条中找到对应的数据节
  //然后把新加入的挂进去
  var current = findNode(headNode,key);
  //插入新的接，更改引用关系
  newNode.next   = current.next;
  newNode.previous = current
  current.next   = newNode;
};

删除节

this.remove = function(key) {
  var currNode = findNode(headNode,key);
  if (!(currNode.next == null)) {
    currNode.previous.next = currNode.next;
    currNode.next.previous = currNode.previous;
    currNode.next     = null;
    currNode.previous   = null;
  }
};

在删除操作中有一个明显的优化：不需要找到父节了，因为双链表的双向引用所以效率比单链要高

测试代码：

<!doctype html><button id="test1">插入多条数据</button>
<button id="test2">删除Russellville数据</button><div id="listshow"><br /></div><script type="text/javascript">

 //////////
 //创建链表 //
 //////////
 function createLinkList() {

 //创建节
 function createNode(data) {
  this.data = data;
  this.next = null;
  this.previous = null
 }

   //初始化头部节
 //从headNode开始形成一条链条
 //通过next衔接
 var headNode = new createNode("head");

 //在链表中找到对应的数据
 var findNode = function(currNode, key) {
  //循环找到执行的节，如果没有返回本身
  while (currNode.data != key) {
  currNode = currNode.next;
  }
  return currNode;
 }

 //插入一个新节
 this.insert = function(data, key) {
  //创建一个新节
  var newNode = new createNode(data);
  //在链条中找到对应的数据节
  //然后把新加入的挂进去
  var current = findNode(headNode,key);
  //插入新的接，更改引用关系
  newNode.next   = current.next;
  newNode.previous = current
  current.next   = newNode;
 };

 this.remove = function(key) {
  var currNode = findNode(headNode,key);
  if (!(currNode.next == null)) {
  currNode.previous.next = currNode.next;
  currNode.next.previous = currNode.previous;
  currNode.next     = null;
  currNode.previous   = null;
  }
 };

 this.display = function(fn) {
  var currNode = headNode;
  while (!(currNode.next == null)) {
  currNode = currNode.next;
  fn(currNode.data)
  }
 };

 }


 var cities = new createLinkList();

 function create() {
 var text = '';
 cities.display(function(data) {
  text += '-' + data;
 });
 var div = document.createElement('div')
 div.innerHTML = text;
 document.getElementById("listshow").appendChild(div)
 }

 document.getElementById("test1").onclick = function() {
 cities.insert("Conway", "head");
 cities.insert("Russellville", "Conway");
 cities.insert("Carlisle", "Russellville");
 cities.insert("Alma", "Carlisle");
 create();
 }

 document.getElementById("test2").onclick = function() {
 cities.remove("Russellville");
 create()
 }


</script>

git代码下载：https://github.com/JsAaron/data_structure.git

JavaScript中数据结构与算法(三)：链表

- Author -

junjie

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jQuery :nth-child前有无空格的区别分析
Jul 11 Javascript
JS获得URL超链接的参数值实例代码
Jun 21 Javascript
js 显示base64编码的二进制流网页图片
Apr 04 Javascript
javascript实现炫酷的拖动分页
May 11 Javascript
javascript函数特点实例分析
May 14 Javascript
基于canvas实现的钟摆效果完整实例
Jan 26 Javascript
js实现自定义路由
Feb 04 Javascript
jquery uploadify如何取消已上传成功文件
Feb 08 Javascript
JavaScript实现页面中录音功能的方法
Jun 04 Javascript
解决vuex数据页面刷新后初始化操作
Jul 26 Javascript
Element Badge标记的使用方法
Jul 27 Javascript
vue项目中播放rtmp视频文件流的方法
Sep 17 Javascript
js结合正则实现国内手机号段校验
Jun 19 #Javascript
JavaScript中数据结构与算法(二)：队列
Jun 19 #Javascript
JavaScript中数据结构与算法(一)：栈
Jun 19 #Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
Jun 19 #Javascript
c#程序员对TypeScript的认识过程
Jun 19 #Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
Jun 19 #Javascript
TypeScript 中接口详解
Jun 19 #Javascript
约旦购物网站(1) 冰岛购物网站(1) 希腊购物网站(6) JAVA面试题(401) 马耳他购物网站(1) 哈萨克斯坦购物网站(2) 保加利亚购物网站(3) PHP面试题(54) 罗马尼亚购物网站(10) 白俄罗斯购物网站(3)
You might like
php下检测字符串是否是utf8编码的代码
2008/06/28 PHP
PHPUnit PHP测试框架安装方法
2011/03/23 PHP
php加密解密实用类分享
2014/01/07 PHP
php版微信自动获取收货地址api用法示例
2016/09/22 PHP
php生成二维码不保存服务器还有下载功能的实现代码
2018/08/09 PHP
jQuery实现表单提交时判断的方法
2014/12/13 Javascript
jQuery给多个不同元素添加class样式的方法
2015/03/26 Javascript
js实现人才网站职位选择功能的方法
2015/08/14 Javascript
BootStrap组件之进度条的基本用法
2017/01/19 Javascript
微信小程序对接七牛云存储的方法
2017/07/30 Javascript
vue axios请求频繁时取消上一次请求的方法
2018/11/10 Javascript
JavaScript实现单图片上传并预览功能
2019/09/30 Javascript
vue循环中点击选中再点击取消(单选)的实现
2020/09/10 Javascript
JS绘图Flot应用图形绘制异常解决方案
2020/10/16 Javascript
[01:49]一目了然！DOTA2DotA快捷操作对比第二弹
2014/05/16 DOTA
[38:39]KG vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
[01:06:43]完美世界DOTA2联赛PWL S3 PXG vs GXR 第二场 12.19
2020/12/24 DOTA
Python  连接字符串(join %)
2008/09/06 Python
Python爬取网页中的图片（搜狗图片）详解
2017/03/23 Python
基于TensorFlow中自定义梯度的2种方式
2020/02/04 Python
python + selenium 刷B站播放量的实例代码
2020/06/12 Python
解决Python 函数声明先后顺序出现的问题
2020/09/02 Python
windows下python 3.9 Numpy scipy和matlabplot的安装教程详解
2020/11/28 Python
Python实现给PDF添加水印的方法
2021/01/25 Python
加拿大时尚少女服装品牌：Garage
2016/10/10 全球购物
Wedgwood美国官网：英国骨瓷，精美礼品及家居装饰
2018/02/17 全球购物
前台文员岗位职责及工作流程
2013/11/19 职场文书
资源环境与城市管理专业推荐信
2013/11/30 职场文书
政工例会汇报材料
2014/08/26 职场文书
2014年保洁工作总结
2014/11/24 职场文书
如何写观后感
2015/06/19 职场文书
2015年暑假生活总结
2015/07/13 职场文书
2015迎新晚会活动总结
2015/07/16 职场文书
SQLServer2019 数据库的基本使用之图形化界面操作的实现
2021/04/08 SQL Server
MySQL数据库优化之通过索引解决SQL性能问题
2022/04/10 MySQL
关于Redis的主从复制及哨兵问题
2022/06/16 Redis