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 相关文章推荐
自适应高度框架 ----属个人收藏内容
Jan 22 Javascript
cument.execCommand()用法深入理解
Dec 04 Javascript
按下Enter焦点移至下一个控件的实现js代码
Dec 11 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
Jul 27 Javascript
jQuery插件支持同一页面被多次调用
Feb 14 Javascript
js实现简单的手风琴效果
Feb 27 Javascript
AngularJS全局警告框实现方法示例
May 18 Javascript
彻底解决 webpack 打包文件体积过大问题
Jul 07 Javascript
微信小程序如何像vue一样在动态绑定类名
Apr 17 Javascript
详解iframe跨域的几种常用方法(小结)
Apr 29 Javascript
微信小程序实现锚点跳转
Nov 23 Javascript
原生js中运算符及流程控制示例详解
Jan 05 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
一个颜色轮换的简单例子
2006/10/09 PHP
PHP常用函数小技巧
2008/09/11 PHP
PHP与MYSQL中UTF8 中文排序示例代码
2014/10/23 PHP
CentOS7编译安装php7.1的教程详解
2019/04/18 PHP
使用swoole 定时器变更超时未支付订单状态的解决方案
2019/07/24 PHP
laravel validate 设置为中文的例子(验证提示为中文)
2019/09/29 PHP
ExtJS 2.0实用简明教程 之Border区域布局
2009/04/29 Javascript
jquery 双色表格实现代码
2009/12/08 Javascript
jQuery.query.js 取参数的两点问题分析
2012/08/06 Javascript
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
2012/12/17 Javascript
JavaScript将数据转换成整数的方法
2014/01/04 Javascript
bootstrap data与jquery .data
2014/07/07 Javascript
nodejs教程之异步I/O
2014/11/21 NodeJs
jQuery中delegate()方法的用法详解
2016/10/13 Javascript
浅谈Nodejs中的作用域问题
2016/12/26 NodeJs
详解Angular 4 表单快速入门
2017/06/05 Javascript
backbone简介_动力节点Java学院整理
2017/07/14 Javascript
JavaScript实现字符串与HTML格式相互转换
2020/03/17 Javascript
Python验证码识别的方法
2015/07/10 Python
python制作爬虫爬取京东商品评论教程
2016/12/16 Python
Python安装Numpy和matplotlib的方法(推荐)
2017/11/02 Python
Python实现PS图像抽象画风效果的方法
2018/01/23 Python
pygame游戏之旅 调用按钮实现游戏开始功能
2018/11/21 Python
解决python 未发现数据源名称并且未指定默认驱动程序的问题
2018/12/07 Python
在python里协程使用同步锁Lock的实例
2019/02/19 Python
Python实现基于socket的udp传输与接收功能详解
2019/11/15 Python
python实现提取COCO,VOC数据集中特定的类
2020/03/10 Python
利用python清除移动硬盘中的临时文件
2020/10/28 Python
CSS3 icon font完全指南(CSS3 font 会取代icon图标)
2013/01/06 HTML / CSS
英国时尚家具、家居饰品及礼品商店:Graham & Green
2016/09/15 全球购物
NFL加拿大官方网上商店:NHLShop.ca
2019/03/12 全球购物
三星法国官方网站:Samsung法国
2019/10/31 全球购物
怎样写离婚协议书
2014/09/10 职场文书
学生抄作业检讨书(2篇)
2014/10/17 职场文书
英雄儿女观后感
2015/06/09 职场文书
机器人总动员观后感
2015/06/09 职场文书