【JavaScript数据结构系列】05-链表LinkedList

码路工人 CoderMonkey

转载请注明作者与出处

## 1. 认识链表结构（单向链表）
链表也是线性结构，

  • 节点相连构成链表
  • 每个节点包含数据存储域和指针域
  • 节点之间的关系靠指针域表示

链表结构示意图参考下文 append 方法中的贴图

相较于数组，链表：

  • 不需要指定初始大小
  • 无需扩容缩容
  • 内存利用率高
  • 便于插入删除元素

--

  • 没法直接通过下标访问，需要挨个探查

2. 链表的常用方法

我们将实现下列常用方法：

方法 描述
append(data) 向链表添加元素
insert(position, data) 向指定位置插入元素
remove(data) 删除元素
removeAt(position) 删除指定位置元素
update(position, data) 更新指定位置元素
getItem(position) 查找指定位置元素
indexOf(data) 获取元素位置
size() 获取链表大小
isEmpty() 判断链表是否为空
clear() 清空链表
toString() 字符串化

注：我们此时暂不考虑复杂引用类型的情况

3. 代码实现

注：

ES6 版的代码实现请查看 npm 包 data-struct-js 代码

Github/Gitee 上都能找到

npm install data-struct-js

封装链表类

  1. /**
  2.  * 链表：单向链表
  3.  */
  4. function LinkedList() {
  5.   // 记录链表首个元素
  6.   this.__head = null
  7.   // 记录链表元素个数
  8.   this.__count = 0
  10.   // 用Node表示链表内部元素
  11.   function Node(data) {
  12.     this.data = data
  13.     this.next = null
  15.     Node.prototype.toString = function () {
  16.       return this.data.toString()
  17.     }
  18.   }
  19. }

3.1 append(data)

实现分析：

  1. 插入到空链表时：

1.1 HEAD指向新插入节点

1.2 新节点的Next指向Null

  1. 插入到非空链表时：

2.1 链表末尾元素的Next指向新元素

2.2 新元素的Next指向Null

  1. LinkedList.prototype.append = function (data) {
  2.   // 1.创建新元素
  3.   var newNode = new Node(data)
  5.   // 2.1链表为空时，直接添加到末尾
  6.   if (this.__count === 0) {
  7.     this.__head = newNode
  8.   }
  9.   // 2.2链表非空时，探查到末尾元素并添加新元素
  10.   else {
  11.     var current = this.__head
  12.     while (current.next) {
  13.       current = current.next
  14.     }
  15.     current.next = newNode
  16.   }
  18.   // 3.内部计数加1
  19.   this.__count += 1
  21.   return true
  22. }

注：

添加元素方法，记得最后给元素个数记录加1

通过上图示例，体会：HEAD 概念和元素节点的 Next 指向修改

3.2 insert(position, data)

实现分析：

  • 插入方法接收两个参数：位置，数据
  • 可插入位置的范围：0~length
  • 插入目标位置：0 的情况
    • 新元素的 next 指向原首位元素
    • 将HEAD指向新元素
  • 循环到指定位置
    • 期间记录上一个元素及当前元素
    • 在上一个元素与当前元素中间加入要插入的元素
    • （修改相关指向，具体参考下面代码）
  • 插入元素方法，记得最后给元素个数记录加1
  1. LinkedList.prototype.insert = function (position, data) {
  2.   // 1.边界检查（插入位置）
  3.   if (position < 0 || position > this.__count) return false
  5.   // 2.创建新元素
  6.   var newNode = new Node(data)
  8.   // 3.1插入到链表头部
  9.   if (position === 0) {
  10.     newNode.next = this.__head
  11.     this.__head = newNode
  12.   }
  13.   // 3.2以外（包括插入到末尾）
  14.   else {
  15.     var previous = null
  16.     var current = this.__head
  17.     var index = 0
  18.     while (index < position) {
  19.       previous = current
  20.       current = current.next
  21.       index++
  22.     }
  23.     previous.next = newNode
  24.     newNode.next = current
  25.   }
  26.   // 4.内部计数加1
  27.   this.__count += 1
  29.   return true
  30. }

注：只有在 insert 时的 position 检查规则与其它不同

3.3 remove(data)

实现分析：

  • 删除元素方法接收一个参数：数据
  • 根据指针循环查找
  • 将从参数收到的数据与当前元素的数据进行比较
    #复杂引用类型的时候通过传入自定义比较的回调函数来解决
  • 找到指定元素后，修改上一元素的 next 指向

注意当删除第一个元素时的特殊情况（修改HEAD指向）

删除元素完成后，记得最后给元素个数记录减1

  1. LinkedList.prototype.remove = function (data) {
  2.   var current = this.__head
  3.   var previous = null
  5.   while (current) {
  6.     // 找到指定数据的元素，让当前元素不再被引用
  7.     if (current.data == data) {
  8.       if (previous == null) {
  9.         // 没有前元素，要删除的是首元素，修改 Head 指针
  10.         this.__head = current.next
  11.       } else {
  12.         // 修改前元素内部指针
  13.         previous.next = current.next
  14.       }
  15.       // 内部计数减1
  16.       this.__count -= 1
  17.       // 处理完成，返回 true
  18.       return true
  19.     }
  20.     previous = current
  21.     current = current.next
  22.   }
  23.   // 查找到最后没有找到指定数据的元素，返回 false
  24.   return false
  26.   // 注：
  27.   // 也可以通过调用 indexOf 获取下标后再调用 removeAt 来实现
  28.   // 只是返回值会不同，看实际需要
  29. }

3.4 removeAt(position)

实现分析：

  • 删除指定位置元素，接收一个参数：位置下标值
  • 基于元素指向循环查找
  • 到达指定下标元素时，将其前后元素关联，即达到删除效果

删除元素完成后，记得最后给元素个数记录减1

  1. LinkedList.prototype.removeAt = function (position) {
  2.   // 1.边界检查
  3.   if (position < 0 || position >= this.__count) return false
  5.   var index = 0
  6.   var previous = null
  7.   var current = this.__head
  9.   // 2.找到指定位置元素
  10.   while (index++ < position) {
  11.     previous = current
  12.     current = current.next
  13.   }
  14.   // 3.使当前元素不再被引用
  15.   if (previous == null) {
  16.     // position=0 删除首元素的时候
  17.     this.__head = current.next
  18.   } else {
  19.     previous.next = current.next
  20.   }
  22.   // 4.内部计数减1
  23.   this.__count -= 1
  25.   return current.data
  26. }

3.5 update(position, data)

实现分析：参看注释

  1. LinkedList.prototype.update = function (position, data) {
  2.   // 1.边界检查
  3.   if (position < 0 || position >= this.__count) return false
  5.   var current = this.__head
  6.   var index = 0
  8.   // 2.找到指定位置元素
  9.   while (index++ < position) {
  10.     current = current.next
  11.   }
  12.   // 3.修改当前元素数据
  13.   current.data = data
  15.   // 4.修改完成，返回 true
  16.   return true
  17. }

3.6 getItem(position)

获取指定位置元素的值

  1. LinkedList.prototype.getItem = function (position) {
  2.   // 边界检查
  3.   if (position < 0 || position >= this.__count) return
  5.   var index = 0
  6.   var current = this.__head
  8.   while (index < position) {
  9.     current = current.next
  10.     index += 1
  11.   }
  12.   return current.data
  13. }

3.7 indexOf(data)

实现分析：

  • 获取元素所在位置下标值方法，接收一个参数：元素的数据
  • 根据元素 next 指向循环查找
  • 找到时返回当前下标
  • 找不到时返回 -1
  1. LinkedList.prototype.indexOf = function (data) {
  2.   var current = this.__head
  3.   var index = 0
  5.   while (current) {
  6.     if (current.data == data) {
  7.       return index
  8.     }
  9.     current = current.next
  10.     index += 1
  11.   }
  12.   return -1
  13. }

3.8 size()

查看元素个数方法

  1.     LinkedList.prototype.size = function () {
  2.         return this.__count
  3.     }

3.9 isEmpty()

判空方法

  1. LinkedList.prototype.isEmpty = function () {
  2.   return this.__count === 0
  3. }

3.10 clear()

实现分析：

Head指向置空

计数清零

  1. LinkedList.prototype.clear = function () {
  2.   this.__head = null
  3.   this.__count = 0
  4. }

3.11 toString()

为了方便查看实现的字符串化方法

  1. LinkedList.prototype.toString = function () {
  2.   var str = '[HEAD] -> '
  3.   var current = this.__head
  4.   while (current) {
  5.     str += current.data + ' -> '
  6.     current = current.next
  7.   }
  8.   if (str === '[HEAD] -> ') {
  9.     str = '[HEAD] -> Null'
  10.   }
  11.   return str
  12. }

总结两点：

  • 跟位置下标值相关的操作，
    都是通过循环来找到下标值的，

链表结构不同于数组，自己本身没有下标。

  • 所有接收下标值的方法，
    都要进行边界检查，其中 insert 时可以等于 length

3.12 完整代码

  1. /**
  2.  * 链表：单向链表
  3.  */
  4. function LinkedList() {
  5.   // 记录链表首个元素
  6.   this.__head = null
  7.   // 记录链表元素个数
  8.   this.__count = 0
  10.   // 用Node表示链表内部元素
  11.   function Node(data) {
  12.     this.data = data
  13.     this.next = null
  15.     Node.prototype.toString = function () {
  16.       return this.data.toString()
  17.     }
  18.   }
  20.   /**
  21.    * 添加节点
  22.    */
  23.   LinkedList.prototype.append = function (data) {
  24.     // 1.创建新元素
  25.     var newNode = new Node(data)
  27.     // 2.1链表为空时，直接添加到末尾
  28.     if (this.__count === 0) {
  29.       this.__head = newNode
  30.     }
  31.     // 2.2链表非空时，探查到末尾元素并添加新元素
  32.     else {
  33.       var current = this.__head
  34.       while (current.next) {
  35.         current = current.next
  36.       }
  37.       current.next = newNode
  38.     }
  40.     // 3.内部计数加1
  41.     this.__count += 1
  43.     return true
  44.   }
  46.   /**
  47.    * 插入节点
  48.    */
  49.   LinkedList.prototype.insert = function (position, data) {
  50.     // 1.边界检查（插入位置）
  51.     if (position < 0 || position > this.__count) return false
  53.     // 2.创建新元素
  54.     var newNode = new Node(data)
  56.     // 3.1插入到链表头部
  57.     if (position === 0) {
  58.       newNode.next = this.__head
  59.       this.__head = newNode
  60.     }
  61.     // 3.2以外（包括插入到末尾）
  62.     else {
  63.       var previous = null
  64.       var current = this.__head
  65.       var index = 0
  66.       while (index < position) {
  67.         previous = current
  68.         current = current.next
  69.         index++
  70.       }
  71.       previous.next = newNode
  72.       newNode.next = current
  73.     }
  74.     // 4.内部计数加1
  75.     this.__count += 1
  77.     return true
  78.   }
  80.   /**
  81.    * 删除节点
  82.    */
  83.   LinkedList.prototype.remove = function (data) {
  84.     var current = this.__head
  85.     var previous = null
  87.     while (current) {
  88.       // 找到指定数据的元素，让当前元素不再被引用
  89.       if (current.data == data) {
  90.         if (previous == null) {
  91.           // 没有前元素，要删除的是首元素，修改 Head 指针
  92.           this.__head = current.next
  93.         } else {
  94.           // 修改前元素内部指针
  95.           previous.next = current.next
  96.         }
  97.         // 内部计数减1
  98.         this.__count -= 1
  99.         // 处理完成，返回 true
  100.         return true
  101.       }
  102.       previous = current
  103.       current = current.next
  104.     }
  105.     // 查找到最后没有找到指定数据的元素，返回 false
  106.     return false
  108.     // 注：
  109.     // 也可以通过调用 indexOf 获取下标后再调用 removeAt 来实现
  110.     // 只是返回值会不同，看实际需要
  111.   }
  113.   /**
  114.    * 删除指定位置节点
  115.    */
  116.   LinkedList.prototype.removeAt = function (position) {
  117.     // 1.边界检查
  118.     if (position < 0 || position >= this.__count) return false
  120.     var index = 0
  121.     var previous = null
  122.     var current = this.__head
  124.     // 2.找到指定位置元素
  125.     while (index++ < position) {
  126.       previous = current
  127.       current = current.next
  128.     }
  129.     // 3.使当前元素不再被引用
  130.     previous.next = current.next
  132.     // 4.内部计数减1
  133.     this.__count -= 1
  135.     return current.data
  136.   }
  138.   /**
  139.    * 更新节点
  140.    */
  141.   LinkedList.prototype.update = function (position, data) {
  142.     // 1.边界检查
  143.     if (position < 0 || position >= this.__count) return false
  145.     var current = this.__head
  146.     var index = 0
  148.     // 2.找到指定位置元素
  149.     while (index++ < position) {
  150.       current = current.next
  151.     }
  152.     // 3.修改当前元素数据
  153.     current.data = data
  155.     // 4.修改完成，返回 true
  156.     return true
  157.   }
  159.   /**
  160.    * 获取指定位置节点
  161.    */
  162.   LinkedList.prototype.getItem = function (position) {
  163.     // 边界检查
  164.     if (position < 0 || position >= this.__count) return
  166.     var index = 0
  167.     var current = this.__head
  169.     while (index < position) {
  170.       current = current.next
  171.       index += 1
  172.     }
  173.     return current.data
  174.   }
  176.   /**
  177.    * 获取节点位置下标
  178.    */
  179.   LinkedList.prototype.indexOf = function (data) {
  180.     var current = this.__head
  181.     var index = 0
  183.     while (current) {
  184.       if (current.data == data) {
  185.         return index
  186.       }
  187.       current = current.next
  188.       index += 1
  189.     }
  190.     return -1
  191.   }
  193.   /**
  194.    * 获取链表长度
  195.    */
  196.   LinkedList.prototype.size = function () {
  197.     return this.__count
  198.   }
  200.   /**
  201.    * 是否为空链表
  202.    */
  203.   LinkedList.prototype.isEmpty = function () {
  204.     return this.__count === 0
  205.   }
  207.   /**
  208.    * 清空链表
  209.    */
  210.   LinkedList.prototype.clear = function () {
  211.     this.__head = null
  212.     this.__count = 0
  213.   }
  215.   LinkedList.prototype.toString = function () {
  216.     var str = '[HEAD] -> '
  217.     var current = this.__head
  218.     while (current) {
  219.       str += current.toString() + ' -> '
  220.       current = current.next
  221.     }
  222.     if (str === '[HEAD] -> ') {
  223.       str = '[HEAD] -> Null'
  224.     }
  225.     return str
  226.   }
  227. }

4. 测试一下

  1. // ---------------------------------------------
  2. // Test: LinkedList
  3. // ---------------------------------------------
  4. console.log('----Test: LinkedList----')
  6. var lst = new LinkedList()
  8. lst.append('a')
  9. lst.append('b')
  10. lst.append('c')
  11. console.log(lst.toString())
  12. lst.insert(1, 'insert-1')
  13. console.log(lst.toString())
  14. lst.insert(4, 'insert-4')
  15. console.log(lst.toString())
  16. lst.insert(0, 'insert-0')
  17. console.log(lst.toString())
  18. lst.remove('c')
  19. console.log(lst.toString(), 'remove-c')
  20. console.log('indexOf-b : ', lst.indexOf('b'))
  21. lst.update(3, 'b-updated')
  22. console.log('update-b : ', lst.toString())
  23. lst.removeAt(3)
  24. console.log('after removeAt(3) : ', lst.toString())
  25. lst.clear()
  26. console.log('after clear : ', lst.toString())

查看输出结果：

  1. ----Test: LinkedList----
  2. [HEAD] -> a -> b -> c ->
  3. [HEAD] -> a -> insert-1 -> b -> c ->
  4. [HEAD] -> a -> insert-1 -> b -> c -> insert-4 ->
  5. [HEAD] -> insert-0 -> a -> insert-1 -> b -> c -> insert-4 ->
  6. [HEAD] -> insert-0 -> a -> insert-1 -> b -> insert-4 ->  remove-c
  7. indexOf-b :  3
  8. update-b :  [HEAD] -> insert-0 -> a -> insert-1 -> b-updated -> insert-4 ->
  9. after removeAt(3) :  [HEAD] -> insert-0 -> a -> insert-1 -> insert-4 ->
  10. after clear :  [HEAD] -> Null

结果正确。
收工。

做了一份 npm 工具包 data-struct-js ，
基于 ES6 实现的 JavaScript 数据结构，
虽然这个小轮子很少会被使用，
也许对于初学者学习 JavaScript 会有点帮助。
只要简单 install 一下即可，感兴趣的话还可以去
GitHub / Gitee 看源码。（Star 表支持～）

  1. npm install data-struct-js --save-dev

https://github.com/CoderMonkie/data-struct-js

https://gitee.com/coder-monkey/data-struct-js

最后，感谢您的阅读和支持~

-end-

【JavaScript数据结构系列】05-链表LinkedList的更多相关文章

  1. 【JavaScript数据结构系列】07-循环链表CircleLinkedList

    [JavaScript数据结构系列]07-循环链表CircleLinkedList 码路工人 CoderMonkey 转载请注明作者与出处 1. 认识循环链表 首节点与尾节点相连的,就构成循环链表.其 ...

  2. 【JavaScript数据结构系列】06-双向链表DoublyLinkedList

    [JavaScript数据结构系列]06-双向链表DoublyLinkedList 码路工人 CoderMonkey 转载请注明作者与出处 1. 认识双向链表 不同于普通链表/单向链表,双向链表最突出 ...

  3. 【JavaScript数据结构系列】00-开篇

    [JavaScript数据结构系列]00-开篇 码路工人 CoderMonkey 转载请注明作者与出处 ## 0. 开篇[JavaScript数据结构与算法] 大的计划,写以下两部分: 1[JavaS ...

  4. JavaScript数据结构与算法-链表练习

    链表的实现 一. 单向链表 // Node类 function Node (element) { this.element = element; this.next = null; } // Link ...

  5. 【JavaScript数据结构系列】02-栈Stack

    [JavaScript数据结构系列]02-栈Stack 码路工人 CoderMonkey 转载请注明作者与出处 ## 1. 认识栈结构 栈是非常常用的一种数据结构,与数组同属线性数据结构,不同于数组的 ...

  6. JavaScript进阶系列05,事件的执行时机, 使用addEventListener为元素同时注册多个事件,事件参数

    本篇体验JavaScript事件的基本面,包括: ■ 事件必须在页面元素加载之后起效■ 点击事件的一个简单例子■ 为元素注册多个点击事件■ 获取事件参数 ■ 跨浏览器事件处理 □ 事件必须在页面元素加 ...

  7. 【JavaScript数据结构系列】03-队列Queue

    [JavaScript数据结构系列]03-队列Queue 码路工人 CoderMonkey 转载请注明作者与出处 1. 认识队列Queue结构 队列,跟我们的日常生活非常贴近,我们前面举例了食堂排队打 ...

  8. 【JavaScript数据结构系列】04-优先队列PriorityQueue

    [JavaScript数据结构系列]04-优先队列PriorityQueue 码路工人 CoderMonkey 转载请注明作者与出处 ## 1. 认识优先级队列 经典的案例场景: 登机时经济舱的普通队 ...

  9. 【JavaScript数据结构系列】01-数组Array

    [JavaScript数据结构系列]01-数组Array 码路工人 CoderMonkey 转载请注明作者与出处 # [JavaScript数据结构系列] # 01-数组Array 数组: 是有序的元 ...

随机推荐

  1. CF--思维练习--CodeForces - 216C - Hiring Staff （思维+模拟）

    ACM思维题训练集合 A new Berland businessman Vitaly is going to open a household appliances' store. All he's ...

  2. java ：技巧

    如何查看安装的jdk的路径? 答: 1.情况一:已安装,且环境已配置好 在window环境下,我们先执行java -version 指令查看是否已经配置过java了,如果查到java版本则证明已经安装 ...

  3. 07 模型层 orm相关查询 F查询Q查询 django开启事务

    一.Django终端打印SQL语句 如果你想知道你对数据库进行操作时,Django内部到底是怎么执行它的sql语句时可以加下面的配置来查看 在Django项目的settings.py文件中,在最后复制 ...

  4. Android EventBus踩坑，Activity接收不了粘性事件。

    注解问题 EventBus 的 粘性事件,可以让 成功注册后的 Activity.Fragment 后再接收处理 这一事件. 但是今晚写代码时,突然发现粘性事件,发送不成功了.??? 具体情况是:我在 ...

  5. file download hash mismatch

    在linux中使用cmake时,遇到了"file download hash mismatch",同时status显示"unsupported protocol" ...

  6. Integer和int及String的总结

    秉承着总结发表是最好的记忆,我把之前遇到的问题在这里总结和大家分享一下,希望大家共同进步: 一.Integer和int首先说下自动拆装箱,基本数据类型转换为包装类型的过程叫装箱,反之则是拆箱,其中最特 ...

  7. spring的bean的属性注入

    一.设置注入 设置注入要求: 要求属性在实体类中必须有getter 和setter方法,然后在spring的工厂中就可以使用property标签进行设值注入. 二.构造注入 通过类的构造方法的方式注入 ...

  8. 【Hadoop离线基础总结】流量日志分析网站整体架构模块开发

    目录 数据仓库设计 维度建模概述 维度建模的三种模式 本项目中数据仓库的设计 ETL开发 创建ODS层数据表 导入ODS层数据 生成ODS层明细宽表 统计分析开发 流量分析 受访分析 访客visit分 ...

  9. 实现简单网页rtmp直播：nginx+ckplayer+linux

    一.安装nginx 安装带有rtmp模块的nginx服务器(其它支持rtmp协议的流媒体服务器像easydarwin.srs等+Apache等web服务器也可以),此处使用nginx服务器,简单方便. ...

  10. Mysql常用sql语句（14）- 多表查询

    测试必备的Mysql常用sql语句,每天敲一篇,每次敲三遍,每月一循环,全都可记住!! https://www.cnblogs.com/poloyy/category/1683347.html 前言 ...