JavaScript数据结构之链表的实现


Posted in Javascript onMarch 19, 2017

前面楼主分别讨论了数据结构栈与队列的实现,当时所用的数据结构都是用的数组来进行实现,但是数组有的时候并不是最佳的数据结构,比如在数组中新增删除元素的时候需要将其他元素进行移动,而在javascript中使用spit()方法不需要访问其他元素。如果你在使用数组的时候发现很慢,就可以考虑使用链表。

链表的概念

链表是一种常见的数据结构。它是动态地进行存储分配的一种结构。链表有一个“头指针”变量,以head表示,它存放一个地址,指向一个元素。每个结点都使用一个对象的引用指标它的后继,指向另一个结点的引用叫做链。

JavaScript数据结构之链表的实现

数组元素依靠下标(位置)来进行引用,而链表元素则是靠相互之间的关系来进行引用。因此链表的插入效率很高,下图演示了链表结点d的插入过程: 

 JavaScript数据结构之链表的实现

删除过程:

JavaScript数据结构之链表的实现

基于对象的链表

我们定义2个类,Node类与LinkedList类,Node为结点数据,LinkedList保存操作链表的方法。

首先看Node类:

function Node(element){
  this.element = element;
   this.next = null;
 }

element用来保存结点上的数据,next用来保存指向一下结点的的链接。

LinkedList类:

function LinkedList(){
     this.head = new Node('head');
     this.find = find;
     this.insert = insert;
     this.remove = remove;
     this.show = show;
}

find()方法,从头结点开始,沿着链表结点一直查找,直到找到与item内容相等的element则返回该结点,没找到则返回空。

function find(item){
     var currentNode = this.head;//从头结点开始
     while(currentNode.element!=item){
         currentNode = currentNode.next;
     }
     return currentNode;//找到返回结点数据,没找到返回null
}

Insert方法。通过前面元素插入的演示可以看出,实现插入简单四步:

1、创建结点

2、找到目标结点

3、修改目标结点的next指向链接

4、将目标结点的next值赋值给要插入的结点的next

function insert(newElement,item){
     var newNode = new Node(newElement);
     var currentNode = this.find(item);
     newNode.next = currentNode.next;
     currentNode.next = newNode;
 }

Remove()方法。删除某一节点需要先找到被删除结点的前结点,为此我们定义方法frontNode():

function frontNode(item){
     var currentNode = this.head;
     while(currentNode.next.element!=item&¤tNode.next!=null){
         currentNode = currentNode.next;
     }   
     return currentNode;
}

简答三步:

1、创建结点

2、找到目标结点的前结点

3、修改前结点的next指向被删除结点的n后一个结点

function remove(item){
     var frontNode = this.frontNode(item);
     //console.log(frontNode.element);
     frontNode.next = frontNode.next.next;
 }

Show()方法:

function show(){
     var currentNode = this.head,result;
     while(currentNode.next!=null){
         result += currentNode.next.element;//为了不显示head结点
         currentNode = currentNode.next;
     }
}

测试程序:

var list = new LinkedList();
list.insert("a","head");
list.insert("b","a");
list.insert("c","b");
console.log(list.show());
list.remove("b");
console.log(list.show());

输出:

JavaScript数据结构之链表的实现

双向链表

从链表的头节点遍历到尾节点很简单,但有的时候,我们需要从后向前遍。此时我们可以通过给 Node 对象增加一个属性,该属性存储指向前驱节点的链接。楼主用下图来双向链表的工作原理。

JavaScript数据结构之链表的实现

首先我们先给Node类增加front属性:

function Node(element){
  this.element = element;
  this.next = null;
   this.front = null;
 }

当然,对应的insert()方法和remove()方法我们也需要做相应的修改: 

function insert(newElement,item){
  var newNode = new Node(newElement);
  var currentNode = this.find(item);
  newNode.next = currentNode.next;
  newNode.front = currentNode;//增加front指向前驱结点
  currentNode.next = newNode;
}
function remove(item){  
  var currentNode = this.find(item);//找到需要删除的节点
  if (currentNode.next != null) {
    currentNode.front.next = currentNode.next;//让前驱节点指向需要删除的节点的下一个节点
    currentNode.next.front = currentNode.front;//让后继节点指向需要删除的节点的上一个节点
    currentNode.next = null;//并设置前驱与后继的指向为空
    currentNode.front = null;    
  }  
}

反序显示链表:

需要给双向链表增加一个方法,用来查找最后的节点。 findLast() 方法找出了链表中的最后一个节点,可以免除从前往后遍历链。

function findLast() {//查找链表的最后一个节点
  var currentNode = this.head;
  while (currentNode.next != null) {
    currentNode = currentNode.next;
  }
  return currentNode;
}

实现反序输出:

function showReverse() {
  var currentNode = this.head, result = "";
  currentNode = this.findLast(); 
  while(currentNode.front!=null){
    result += currentNode.element + " ";
    currentNode = currentNode.front;
  }
  return result;
}

测试程序:

var list = new LinkedList();
list.insert("a","head");
list.insert("b","a");
list.insert("c","b");
console.log(list);
list.remove("b");
console.log(list.show());
console.log(list.showReverse());

输出:

JavaScript数据结构之链表的实现

循环链表

循环链表是另一种形式的链式存贮结构。它的特点是表中最后一个结点的指针域指向头结点,整个链表形成一个环。循环链表和单向链表相似,节点类型都是一样的。唯一的区别是,在创建循环链表时,让其头节点的 next 属性指向它本身,即:

head.next = head

这种行为会传导至链表中的每个节点,使得每个节点的 next 属性都指向链表的头节点。楼主用下图来表示循环链表:

JavaScript数据结构之链表的实现

修改构造方法:

function LinkedList(){
  this.head = new Node('head');//初始化
  this.head.next = this.head;//直接将头节点的next指向头节点形成循环链表
  this.find = find;
  this.frontNode = frontNode;
  this.insert = insert;
  this.remove = remove;
  this.show = show; 
}

这时需要注意链表的输出方法show()与find()方法,原来的方式在循环链表里会陷入死循环,while循环的循环条件需要修改为当循环到头节点时退出循环。

function find(item){
  var currentNode = this.head;//从头结点开始
  while(currentNode.element!=item&¤tNode.next.element!='head'){
    currentNode = currentNode.next;
  }
  return currentNode;//找到返回结点数据,没找到返回null
}
function show(){
  var currentNode = this.head,result = "";
  while (currentNode.next != null && currentNode.next.element != "head") {   
    result += currentNode.next.element + " ";
    currentNode = currentNode.next;
  }
  return result;
}

测试程序:

var list = new LinkedList();
list.insert("a","head");
list.insert("b","a");
list.insert("c","b");
console.log(list.show());
list.remove("b");
console.log(list.show());

测试结果:

JavaScript数据结构之链表的实现

本文用到的示例代码地址:https://github.com/LJunChina/JavaScript

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
jquery通过a标签删除table中的一行的代码
Dec 02 Javascript
js简单实现删除记录时的提示效果
Dec 05 Javascript
javascript常用的正则表达式实例
May 15 Javascript
用js的document.write输出的广告无阻塞加载的方法
Jun 05 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
Aug 18 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
Mar 13 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
Jun 24 Javascript
Vue.js实现移动端短信验证码功能
Mar 29 Javascript
JS数组求和的常用方法总结【5种方法】
Jan 14 Javascript
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
使用vue完成微信公众号网页小记(推荐)
Apr 28 Javascript
JavaScript canvas实现文字时钟
Jan 10 Javascript
用jQuery实现圆点图片轮播效果
Mar 19 #Javascript
Bootstrap 网格系统布局详解
Mar 19 #Javascript
用JavaScript和jQuery实现瀑布流
Mar 19 #Javascript
JSONP基础知识详解
Mar 19 #Javascript
jQuery中table数据的值拷贝和拆分
Mar 19 #Javascript
js实现旋转木马效果
Mar 17 #Javascript
jQuery实现验证码功能
Mar 17 #Javascript
You might like
浅析Yii2集成富文本编辑器redactor实例教程
2016/04/25 PHP
php微信公众号开发(4)php实现自定义关键字回复
2016/12/15 PHP
jQuery中创建实例与原型继承揭秘
2011/12/21 Javascript
jQuery-Easyui 1.2 实现多层菜单效果的代码
2012/01/13 Javascript
选择器中含有空格在使用示例及注意事项
2013/07/31 Javascript
JS文字球状放大效果代码分享
2015/08/19 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
2015/09/26 Javascript
基于jQuery实现搜索关键字自动匹配功能
2020/03/26 Javascript
基于JS实现textarea中获取动态剩余字数的方法
2016/05/25 Javascript
JavaScript仿网易选项卡制作代码
2016/10/06 Javascript
nodejs爬虫初试superagent和cheerio
2018/03/05 NodeJs
在vue组件中使用axios的方法
2018/03/16 Javascript
基于Angularjs-router动态改变Title值的问题
2018/08/30 Javascript
微信小程序实现图片滚动效果示例
2018/12/05 Javascript
解决vue 单文件组件中样式加载问题
2019/04/24 Javascript
优雅的处理vue项目异常实战记录
2019/06/05 Javascript
[01:08:09]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第二局
2016/03/02 DOTA
[01:01:13]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第三场
2018/04/06 DOTA
Pandas之ReIndex重新索引的实现
2019/06/25 Python
Pycharm编辑器功能之代码折叠效果的实现代码
2020/10/15 Python
Python利用imshow制作自定义渐变填充柱状图(colorbar)
2020/12/10 Python
详解Html5微信支付爬坑之路
2018/07/24 HTML / CSS
HTML5 canvas基本绘图之填充样式实现
2016/06/27 HTML / CSS
使用HTML5和CSS3制作一个模态框的示例
2018/03/07 HTML / CSS
澳大利亚首个在线预订旅游网站:Wotif
2017/07/19 全球购物
澳大利亚最受欢迎的美发用品目的地:AMR
2019/08/28 全球购物
SIMON MILLER官网:洛杉矶的生活方式品牌
2020/10/19 全球购物
Linux上比较文件的命令都有哪些
2013/09/28 面试题
师范生自荐信
2013/10/27 职场文书
市场营销专业大学生职业生涯规划文
2014/03/06 职场文书
教师节班会开场白
2015/06/01 职场文书
大学生安全教育心得体会
2016/01/15 职场文书
中学语文教学反思
2016/02/16 职场文书
图文详解nginx日志切割的实现
2022/01/18 Servers
sqlserver连接错误之SQL评估期已过的问题解决
2022/03/23 SQL Server
threejs太阳光与阴影效果实例代码
2022/04/05 Javascript