JavaScript实现单链表过程解析

前言:

要存储多个元素,数组是最常用的数据结构,但是数组也有很多缺点:

  • 数组的创建通常要申请一段连续的内存空间,并且大小是固定的,所以当当前数组不能满足容量需求时,需要进行扩容,(一般是申请一个更大的数组,然后将原数组中的元素复制过去)
  • 在数组元素开头或者中间位置插入数据的成本很高,需要进行大量元素的位移。

所以要存储多个元素,另一个选择就是链表,不同于数组的是,链表中的元素在内存中不必是连续的空间。链表的每个元素有一个存储元素本身的节点和指向下一个元素的引用。
相对于数组,链表有一些优点:

  • 内存空间不必是连续的,可以充分利用计算机的内存,实现灵活的内存动态管理。
  • 链表不必在创建时就确定大小,并且大小可以无限延伸下去。
  • 链表在插入和删除数据的时候,事件复杂度可以达到O(1),相对数组效率高很多。

相对于数组,链表有一些缺点:

  • 链表访问任何一个位置的元素的时候,都需要从头开始访问,无法通过下标直接访问元素。

一、什么是单链表

那么到底什么是单链表呢?

它就类似于火车,火车头规连接一个节点,节点上有乘客,并且这个节点会连接到下一个节点,依次类推,如下所示:

我们的链表结构就是:

了解了直观上的链表,我们再来对单链表进行代码的封装。

二、单链表的封装

首先,我们封装一个NodeList类,用于表示链表结构,在这个类里面在封装一个内部类Node,用于封装每一个节点上的信息(数据和指向下一个节点的引用),然后在NodeList类中保存两个属性,一个是链表的长度,一个是链表中的头结点。

如下所示:

 function LinkedList(){
            this.length = 0;
            this.head = null;
            //内部的类
            function Node(data){
                this.data = data;
                this.next = null;
            }
        }

三、单链表的常用操作

然后在里面添加单链表常用的操作。主要有:

  • append(element) :向列表尾部添加一个项
  • insert(position,element) :向列表的特定位置插入一个项
  • get(position) :获取对应位置的元素
  • indexOf(element) :返回元素在列表中的索引,如果列表中没有该元素则返回-1
  • update(position,ele) :修改某个位置的元素
  • removeAt(position) :从列表的指定位置移除一项
  • remove(element) :从列表中移除一项
  • isEmpty() :如果链表中不包含任何元素,返回true,如果链表长度大于0返回false
  • size() :返回链表包含的元素个数,与数组的length属性相关
  • toString() :由于列表项用到了Node类,需要重写继承自JavaScript对象默认的toString方法,让其输出元素的值

接下来们就来一个一个实现。

1、append(element)方法-----向列表尾部添加一个项

因为向链表尾部添加数据可能有两种情况:

  • 链表本身为空,新添加的数据是唯一的节点
  • 链表不为空,需要向其他节点后面追加节点

所以我们就需要进行判断,如果链表为空,直接将头结点的指针指向新节点。
如果链表不为空,则新建立一个临时节点,让它等于头结点,并对它进行判断,如果它指向的节点的指针域为空,则为尾节点,将新加的节点添加到末尾,即让尾节点的指针指向新添加的节点。如果它指向的节点的指针域不为空,则让这个临时节点的指针域指向下一个节点,一直循环操作到这个节点的指针域为空(即为尾节点)。然后每添加一个节点,让链表的长度+1。

LinkedList.prototype.append = function(data){
                var newNode = new Node(data);
                // 判断链表是否为空
                // 1.为空
                if(this.length === 0){
                    this.head = newNode;
                }else{
                    //不为空
                    var current = this.head;
                    if(current.next){
                        current = current.next;
                    }
                    current.next = newNode;
                }
                this.length += 1;
            }

2、toString方法-----输出元素的值

这个比较简单,主要是获取每一个元素,因为获取链表的任何元素都必须从第一个节点开始,所以我们可以从头结点开始,循环遍历每一个节点,并且取出其中的element,拼接成字符串,并将字符串返回。

LinkedList.prototype.toString = function(){
                var current = this.head;
                var ListStr = '';
                while(current){
                    ListStr += current.data + ' ';
                    current = current.next;
                }
                return ListStr;
            }

验证:创建几个新的节点,并打印

 var list = new LinkedList();
        list.append('a');
        list.append('b');
        list.append('c');
        list.append('d');
        list.append('e');
        alert(list);

打印结果为:

3、insert方法-----向列表的特定位置插入一个项

实现在任意位置插入数据的方法,首先判断插入的位置是否越界,然后在不越界的情况下分两种情况,如果插入到第一个位置,则表示新添加的节点是头,则需要将原来的头结点作为新节点的next,再让head指向新节点。如果插入到其他位置,则需要通过循环先找到节点位置,并在循环的过程中保存上一个节点和下一个节点,找到正确的位置后,将新节点的Next指向下一个节点,将上一个节点的next节点指向新节点。

代码如下:

 LinkedList.prototype.insert = function(position,data){
                if(position<0 || position >this.length){
                   return false;
               }
                var newNode = new Node(data);
                var index = 0;
              if(position == 0){
                newNode.next = this.head;
                this.head = newNode;

              }else{
                    while(index++ < position){
                        var current = this.head;
                        var previous = null;
                        previous = current;
                        current = current.next;
                    }
                    newNode.next = current;
                    previous.next = newNode;
                }
                this.length += 1;
                return true;
                }

验证:在第1个位置插入xl,在第2个位置插入wh

list.insert(1,'xl')
       list.insert(2,'wh')
        alert(list)

4、get方法-----获取对应位置的元素

这个方法相对简单,先对positon做越界判断,然后通过临时节点遍历链表直到目标位置,获取该位置的元素。

LinkedList.prototype.get = function(position,data){

                var current = this.head;
                var index = 0;
                if(position < 0 || position >= this.length){
                    return null;
                }else{
                    while(index<position){
                        current = current.next;
                        index++;
                    }
                    return current.data;
                }
            }

验证:获取第三个位置的元素:

alert( list.get(3));

5、indexOf()方法-----返回元素在列表中的索引

首先判断查找的元素的位置是否存在,如果不存在,返回-1。如果存在的话分两种情况,如果返回的元素在第一个位置,则直接返回第一个位置的索引。如果返回元素在其他位置,则需要通过循环先找到节点位置,这个过程中,索引需要跟着遍历的次数自加,找到正确元素的位置后,打印索引即为目标位置。

LinkedList.prototype.indexOf = function(data){
                var index = 0;
                var current = this.head;
                while(current){
                    if(current.data == data){
                        return index;
                    }
                    else{
                        current = current.next;
                    index++;
                    }
                }
                return -1;
            }
        }

验证:获取c的索引:

alert(list.indexOf('c'));

6、update方法-----修改某个位置的元素

这个方法和get方法很像,向后遍历,当index的值等于position时,表示找到目标位置,将date改为目标值:

LinkedList.prototype.update = function(position,ele){
                if(position<0 || position>=this.length){
                    return false;
                }else{
                    var index = 0;
                    var current = this.head;
                    while(index++ <position){
                        current = current.next;
                    }
                    current.data = ele;
                    return true;
                }
            }

验证:修该第0个位置的元素为:bear

 list.update(0,'bear')
      alert(list)

7、removeAt方法-----从列表的指定位置移除一项

首先判断删除项的位置是否越界,然后在不越界的情况下,给定两个临时节点previouscurrentprevious用来保存前一个current的值,从头节点开始遍历,直到索引位置等于目标位置,让临时节点current遍历到目标位置,让临时节点的前一个next指向下一个next。

LinkedList.prototype.removeAt = function(position,data){
                var current = this.head;
                var previous = null;
                var index = 0;
                if(position<0 || position>=this.length){
                    return false;
                }else{
                    while(index++ <position){
                        previous = currrent;
                        current = current.next;
                    }
                    previous.next = current.next;
                    this.length -= 1;
                    return true;
                }
            }
        }

验证:移除第三个位置的元素:

list.removeAt(3)
      alert(list)

8、remove方法-----从列表中移除一项

先判断所要删除的元素是否在链表中,如果不在,返回false,否则,构建一个临时节点,用于遍历链表,如果临时节点的data值和要删除的元素相等,则停止遍历,让临时节点的前一个next指向下一个next。这里可以在构建一个临时节点用于存储前一个current的值。

LinkedList.prototype.remove = function(ele){
                var current = this.head;
                var previous = null;
                var index = 0;
                while(current.data !== ele){
                    previous = current;
                    current = current.next;
                    index++;
                }
                previous.next = current.next;
            }

验证:删除值为xl的元素:

 list.remove('xl')
      alert(list)

9、isEmpty方法-----判断链表是否为空

根据length判断,如果链表中不包含任何元素,返回true,如果链表长度大于0返回false

LinkedList.prototype.isEmpty = function(){
                    return this.length == 0;
                }

验证:

 alert(list.isEmpty())

9、size方法-----返回链表包含的元素个数

直接返回元素的length就是其个数。

LinkedList.prototype.size = function(){
                    return this.length;
                }

验证:

   alert(list.size())

到此这篇关于JavaScript实现单链表过程解析的文章就介绍到这了,更多相关JavaScript实现单链表内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • JavaScript数据结构之单链表和循环链表

    数据结构系列前言: 数据结构作为程序员的基本知识,需要我们每个人牢牢掌握.近期我也展开了对数据结构的二次学习,来弥补当年挖的坑......   当时上课的时候也就是跟着听课,没有亲自实现任何一种数据结构,更别提利用数据结构来解决问题了.  现在就来填坑了奋斗   在这里提醒看到我博客的孩子们,如果你还是在校生,永远不要轻视任何一门基础课的学习,这个时候挖的坑,要么需要用双倍的努力去填,要么会直接影响一个人的能力等等...... 千万别给自己挖坑 进入正题,关于链表的数据结构知识,这里简单介绍下:

  • 如何用JavaScript实现功能齐全的单链表详解

    前言 前端也要搞好数据结构哦! 用JavaScript实现了个单链表,通过LinkedList构造函数可实例化一个单链表数据结构的对象,所有的方法放到LinkedList构造函数的原型对象上,写了暂时能想到的所有方法 GitHub源码地址,下载可运行 实现 通过LinkedList的类创建链表实例,链表下有添加,查找,删除,显示节点等方法 链表初始默认有一个"_head"头部节点,使用时隐藏 按元素/索引 添加.删除,未找到时返回错误,查找未找到时返回null或-1 let obj =

  • Node.js环境下JavaScript实现单链表与双链表结构

    单链表(LinkedList)的javascript实现 npmjs相关库: complex-list.smart-list.singly-linked-list 编程思路: add方法用于将元素追加到链表尾部,借由insert方法来实现: 注意各个函数的边界条件处理. 自己的实现: SingleNode.js (function(){ "use strict"; function Node(element){ this.element = element; this.next = n

  • JavaScript实现单链表过程解析

    前言: 要存储多个元素,数组是最常用的数据结构,但是数组也有很多缺点: 数组的创建通常要申请一段连续的内存空间,并且大小是固定的,所以当当前数组不能满足容量需求时,需要进行扩容,(一般是申请一个更大的数组,然后将原数组中的元素复制过去) 在数组元素开头或者中间位置插入数据的成本很高,需要进行大量元素的位移. 所以要存储多个元素,另一个选择就是链表,不同于数组的是,链表中的元素在内存中不必是连续的空间.链表的每个元素有一个存储元素本身的节点和指向下一个元素的引用.相对于数组,链表有一些优点: 内存

  • C#定义并实现单链表实例解析

    本文以实例详细描述了C#定义并实现单链表的过程及原理.一般来说C#定义并实现单链表,代码包括构成链表的结点定义.用变量来实现表头.清空整个链表 .链表复位,使第一个结点成为当前结点.判断链表是否为空.判断当前结点是否为最后一个结点.返回当前结点的下一个结点的值,并使其成为当前结点.将当前结点移出链表,下一个结点成为当前结点等内容. 具体实现代码如下所示: using System; using System.IO; // 构成链表的结点定义 public class Node { public

  • Javascript Web Worker使用过程解析

    Web Worker 概述 JavaScript 语言采用的是单线程模型,也就是说,所有任务只能在一个线程上完成,一次只能做一件事.前面的任务没做完,后面的任务只能等着.随着电脑计算能力的增强,尤其是多核 CPU 的出现,单线程带来很大的不便,无法充分发挥计算机的计算能力. Web Worker 的作用,就是为 JavaScript 创造多线程环境,允许主线程创建 Worker 线程,将一些任务分配给后者运行.在主线程运行的同时,Worker 线程在后台运行,两者互不干扰.等到 Worker 线

  • Javascript幻灯片播放功能实现过程解析

    javascript实现幻灯片播放 实现原理 step1 设置容器,包含图片.翻页.下标等元素,通过相对定位来布局. step2 将幻灯片变化,需要改变的元素放在一个字容器内,display设为none,并且采取动画来变化. step3设置js函数,将应该播放的元素样式激活,其他的元素仍为未激活状态或者不展示类的隐藏. 代码 html <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

  • Javaweb使用getPart接收表单文件过程解析

    使用getPart接收表单文件时,注意Tomcat版本要在8之上. 前台 : form.jsp <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> </head> <body> <form action="${pageC

  • JavaScript获取时区实现过程解析

    在一个大型的项目中,不可避免会出现操作时间的业务,比如时间的格式化,比如时间的加减,我们一般会直接使用moment.js库来做,毕竟稳定可靠,也方便,那当我们系统只是几个简单页面,对时间的操作并不是很大,引入库文件并不是很必须的情况,我们需要时区展示怎么办?是不是可以用浏览器支持的原生方法来实现? 时区 啥是时区? 时区是地球上的区域使用同一个时间定义.以前,人们通过观察太阳的外置(时角)决定时间,这就使得不同经度的地方的时间各有不同,为了统一使用同一个时间,就引入了时区的概念.时区通过设立一个

  • JavaScript Tab菜单实现过程解析

    Tab 选项卡切换效果在现如今的网页中,运用的也是比较多的,包括点击切换.滑动切换.延迟切换.自动切换等多种效果 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab</title> <style> *{ margin: 0px; padding: 0px; } .current{

  • JavaScript实现双向链表过程解析

    目录 一.什么是双向链表 二.双向链表的封装 三.双向链表的常用操作 1.append(element)方法-----向列表尾部添加一个项 2.将链表转化为字符串形式 3.insert(position,element):向列表的特定位置插入一个项 4.get(position):获取对应位置的元素 5.indexOf(element):返回元素在列表中的索引 6. update(position,ele):修改某个位置的元素 7.removeAt(position):从列表的指定位置移除一项

  • JavaScript如何把两个数组对象合并过程解析

    这篇文章主要介绍了JavaScript如何把两个数组对象合并过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 合并数组或者对象在数组或对象前面加...,是es6的新写法,然后数组的map方法会返回数组. var obj1 = [{ "id": 980550455852, "model": "XQG70-S1208FW", "color": "白",

随机推荐