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实现div拖拽宽度示例代码
Jul 31 Javascript
js中substring和substr的详细介绍与用法
Aug 29 Javascript
javascript 获取元素样式必杀技
May 04 Javascript
浅谈 javascript 事件处理
Jan 04 Javascript
老生常谈JQuery data方法的使用
Sep 09 Javascript
使用jQuery的ajax方法向服务器发出get和post请求的方法
Jan 13 Javascript
React如何将组件渲染到指定DOM节点详解
Sep 08 Javascript
微信小程序自定义音乐进度条的实例代码
Aug 28 Javascript
javascript数据类型中的一些小知识点(推荐)
Apr 18 Javascript
如何手写一个简易的 Vuex
Oct 10 Javascript
Vue单页面应用中实现Markdown渲染
Feb 14 Vue.js
微前端qiankun改造日渐庞大的项目教程
Jun 21 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
PHP提取中文首字母
2008/04/09 PHP
让php处理图片变得简单 基于gb库的图片处理类附实例代码下载
2011/05/17 PHP
nginx+php-fpm配置文件的组织结构介绍
2012/11/07 PHP
php从身份证获取性别和出生年月
2017/02/09 PHP
php和C#的yield迭代器实现方法对比分析
2019/07/17 PHP
用Javascript 和 CSS 实现脚注(Footnote)效果
2009/09/09 Javascript
事件冒泡是什么如何用jquery阻止事件冒泡
2013/03/20 Javascript
JS写的贪吃蛇游戏(个人练习)
2013/07/08 Javascript
js+css简单实现网页换肤效果
2015/12/29 Javascript
微信小程序中单位rpx和rem的使用
2016/12/06 Javascript
JavaScript字符串对象
2017/01/14 Javascript
jq checkbox 的全选并ajax传参的实例
2017/04/01 Javascript
Javascript实现base64的加密解密方法示例
2017/06/27 Javascript
Angular 2父子组件数据传递之@Input和@Output详解 (上)
2017/07/05 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
2019/01/27 Javascript
使用vue完成微信公众号网页小记(推荐)
2019/04/28 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
2019/07/23 Javascript
vue移动端城市三级联动组件使用详解
2019/07/26 Javascript
python 排序算法总结及实例详解
2016/09/28 Python
Django自定义过滤器定义与用法示例
2018/03/22 Python
Python数据可视化库seaborn的使用总结
2019/01/15 Python
python matplotlib实现将图例放在图外
2020/04/17 Python
HTML5中判断用户是否正在浏览页面的方法
2014/05/03 HTML / CSS
用canvas显示验证码的实现
2020/04/10 HTML / CSS
日本最新流行服饰网购:Nissen
2016/07/24 全球购物
美国女性运动零售品牌:Lady Foot Locker
2017/05/12 全球购物
GANT葡萄牙官方商店:拥有美国运动服传统的生活方式品牌
2018/10/18 全球购物
澳大利亚巧克力花束和礼品网站:Tastebuds
2019/03/15 全球购物
PatPat德国:妈妈的每日优惠
2019/10/02 全球购物
企业演讲稿范文
2013/12/28 职场文书
促销活动总结范文
2014/04/30 职场文书
幼儿园优秀班主任事迹材料
2014/05/14 职场文书
篮球兴趣小组活动总结
2014/07/07 职场文书
海洋天堂观后感
2015/06/05 职场文书
2019年聘任书的写作格式及范文!
2019/07/03 职场文书
MongoDB修改oplog大小的四种方法
2022/04/11 MongoDB