前言

  1. 基础知识就像是一座大楼的地基，它决定了我们的技术高度。
  2. 我们应该多掌握一些可移值的技术或者再过十几年应该都不会过时的技术，数据结构与算法就是其中之一。

栈、队列、链表、堆 是数据结构与算法中的基础知识，是程序员的地基。

笔者写的 JavaScript 数据结构与算法之美 系列用的语言是 JavaScript ，旨在入门数据结构与算法和方便以后复习。

1. 线性表与非线性表

线性表（Linear List）：就是数据排成像一条线一样的结构。每个线性表上的数据最多只有前和后两个方向。数组、链表、队列、栈 等就是线性表结构。

非线性表：数据之间并不是简单的前后关系。二叉树、堆、图 就是非线性表。

本文主要讲线性表，非线性表会在后面章节讲。

2. 数组

定义

  • 数组 (Array) 是一个有序的数据集合，我们可以通过数组名称 (name) 和索引 (index) 进行访问。
  • 数组的索引是从 0 开始的。

特点

  • 数组是用一组连续的内存空间来存储的。

    所以数组支持 随机访问，根据下标随机访问的时间复杂度为 O(1)。

  • 低效的插入和删除。

    数组为了保持内存数据的连续性，会导致插入、删除这两个操作比较低效，因为底层通常是要进行大量的数据搬移来保持数据的连续性。

    插入与删除的时间复杂度如下：

    插入：从最好 O(1) ，最坏 O(n) ，平均 O(n)

    删除：从最好 O(1) ，最坏 O(n) ，平均 O(n)

注意

但是因为 JavaScript 是弱类型的语言，弱类型则允许隐式类型转换。

隐式：是指源码中没有明显的类型转换代码。也就是说，一个变量，可以赋值字符串，也可以赋值数值。

  1. let str = "string"
  2. str = 123
  3. console.log(str)  //   123

你还可以直接让字符串类型的变量和数值类型的变量相加，虽然得出的最终结果未必是你想象的那样，但一定不会报错。

  1. let a = 123
  2. let b = "456"
  3. let c = a + b
  4. // 数值加字符串，结果是字符串
  5. console.log(c)  //   "123456"

数组的每一项可以是不同的类型，比如：

  1. // 数组的类型有 数值、字符串，还可以随意变更类型
  2. const arr = [ 12, 34, "abc" ]
  3. arr[2] = { "key": "value" }  // 把数组的第二项变成对象
  4. console.log(arr) //  [ 12, 34,  { "key": "value"} ]

定义的数组的大小是可变的，不像强类型语言，定义某个数组变量的时候就要定义该变量的大小。

  1. const arr = [ 12, 34, "abc"]
  2. arr.push({ "key": "value" }) // 添加一项 对象
  3. consolelog(arr) //  [ 12, 34, "abc", { "key": "value" } ]

实现

JavaScript 原生支持数组，而且提供了很多操作方法，这里不展开讲。

3. 栈

定义

  1. 后进者先出，先进者后出，简称 后进先出（LIFO），这就是典型的栈结构。
  2. 新添加的或待删除的元素都保存在栈的末尾，称作栈顶，另一端就叫栈底。
  3. 在栈里，新元素都靠近栈顶，旧元素都接近栈底。
  4. 从栈的操作特性来看，是一种 操作受限的线性表，只允许在一端插入和删除数据。
  5. 不包含任何元素的栈称为空栈。

栈也被用在编程语言的编译器和内存中保存变量、方法调用等，比如函数的调用栈。

实现

栈的方法：

  • push(element)：添加一个（或几个）新元素到栈顶。
  • pop()：移除栈顶的元素，同时返回被移除的元素。
  • peek()：返回栈顶的元素，不对栈做任何修改。
  • isEmpty()：如果栈里没有任何元素就返回 true，否则返回 false。
  • clear()：移除栈里的所有元素。
  • size()：返回栈里的元素个数。
  1. // Stack类
  2. function Stack() {
  3.   this.items = [];
  5.   // 添加新元素到栈顶
  6.   this.push = function(element) {
  7.     this.items.push(element);
  8.   };
  9.   // 移除栈顶元素，同时返回被移除的元素
  10.   this.pop = function() {
  11.     return this.items.pop();
  12.   };
  13.   // 查看栈顶元素
  14.   this.peek = function() {
  15.     return this.items[this.items.length - 1];
  16.   };
  17.   // 判断是否为空栈
  18.   this.isEmpty = function() {
  19.     return this.items.length === 0;
  20.   };
  21.   // 清空栈
  22.   this.clear = function() {
  23.     this.items = [];
  24.   };
  25.   // 查询栈的长度
  26.   this.size = function() {
  27.     return this.items.length;
  28.   };
  29.   // 打印栈里的元素
  30.   this.print = function() {
  31.     console.log(this.items.toString());
  32.   };
  33. }

测试：

  1. // 创建Stack实例
  2. var stack = new Stack();
  3. console.log(stack.isEmpty()); // true
  4. stack.push(5); // undefined
  5. stack.push(8); // undefined
  6. console.log(stack.peek()); // 8
  7. stack.push(11); // undefined
  8. console.log(stack.size()); // 3
  9. console.log(stack.isEmpty()); // false
  10. stack.push(15); // undefined
  11. stack.pop(); // 15
  12. console.log(stack.size()); // 3
  13. stack.print(); // 5,8,11
  14. stack.clear(); // undefined
  15. console.log(stack.size()); // 0

栈的应用实例：JavaScript 数据结构与算法之美 - 实现一个前端路由，如何实现浏览器的前进与后退 ？

4. 队列

普通队列

定义

  • 队列是遵循 FIFO（First In First Out，先进先出）原则的一组有序的项。
  • 队列在尾部添加新元素，并从顶部移除元素。
  • 最新添加的元素必须排在队列的末尾。
  • 队列只有 入队 push() 和出队 pop()。

实现

队列里面有一些声明的辅助方法：

  • enqueue(element)：向队列尾部添加新项。
  • dequeue()：移除队列的第一项，并返回被移除的元素。
  • front()：返回队列中第一个元素，队列不做任何变动。
  • isEmpty()：如果队列中不包含任何元素，返回 true，否则返回 false。
  • size()：返回队列包含的元素个数，与数组的 length 属性类似。
  • print()：打印队列中的元素。
  • clear()：清空整个队列。

代码：

  1. // Queue类
  2. function Queue() {
  3. 	this.items = [];
  5. 	// 向队列尾部添加元素
  6. 	this.enqueue = function(element) {
  7. 		this.items.push(element);
  8. 	};
  10. 	// 移除队列的第一个元素，并返回被移除的元素
  11. 	this.dequeue = function() {
  12. 		return this.items.shift();
  13. 	};
  15. 	// 返回队列的第一个元素
  16. 	this.front = function() {
  17. 		return this.items[0];
  18. 	};
  20. 	// 判断是否为空队列
  21. 	this.isEmpty = function() {
  22. 		return this.items.length === 0;
  23. 	};
  25. 	// 获取队列的长度
  26. 	this.size = function() {
  27. 		return this.items.length;
  28. 	};
  30. 	// 清空队列
  31. 	this.clear = function() {
  32. 		this.items = [];
  33. 	};
  35. 	// 打印队列里的元素
  36. 	this.print = function() {
  37. 		console.log(this.items.toString());
  38. 	};
  39. }

测试：

  1. // 创建Queue实例
  2. var queue = new Queue();
  3. console.log(queue.isEmpty()); // true
  4. queue.enqueue('John'); // undefined
  5. queue.enqueue('Jack'); // undefined
  6. queue.enqueue('Camila'); // undefined
  7. queue.print(); // "John,Jack,Camila"
  8. console.log(queue.size()); // 3
  9. console.log(queue.isEmpty()); // false
  10. queue.dequeue(); // "John"
  11. queue.dequeue(); // "Jack"
  12. queue.print(); // "Camila"
  13. queue.clear(); // undefined
  14. console.log(queue.size()); // 0

优先队列

定义

优先队列中元素的添加和移除是依赖优先级的。

应用

  • 一个现实的例子就是机场登机的顺序。头等舱和商务舱乘客的优先级要高于经济舱乘客。
  • 再比如：火车，老年人、孕妇和带小孩的乘客是享有优先检票权的。

优先队列分为两类

  • 最小优先队列
  • 最大优先队列

最小优先队列是把优先级的值最小的元素被放置到队列的最前面（代表最高的优先级）。

比如：有四个元素："John", "Jack", "Camila", "Tom"，他们的优先级值分别为 4，3，2，1。

那么最小优先队列排序应该为："Tom"，"Camila"，"Jack"，"John"。

最大优先队列正好相反，把优先级值最大的元素放置在队列的最前面。

以上面的为例，最大优先队列排序应该为："John", "Jack", "Camila", "Tom"。

实现

实现一个优先队列，有两种选项：

    1. 设置优先级，根据优先级正确添加元素，然后和普通队列一样正常移除
    1. 设置优先级，和普通队列一样正常按顺序添加，然后根据优先级移除

这里最小优先队列和最大优先队列我都采用第一种方式实现，大家可以尝试一下第二种。

下面只重写 enqueue() 方法和 print() 方法，其他方法和上面的普通队列完全相同。

实现最小优先队列

  1. // 定义最小优先队列
  2. function MinPriorityQueue () {
  3.   this.items = [];
  5.   this.enqueue = enqueue;
  6.   this.dequeue = dequeue;
  7.   this.front = front;
  8.   this.isEmpty = isEmpty;
  9.   this.size = size;
  10.   this.clear = clear;
  11.   this.print = print;
  12. }

实现最小优先队列 enqueue() 方法和 print() 方法：

  1. // 优先队列添加元素，要根据优先级判断在队列中的插入顺序
  2. function enqueue (element, priority) {
  3.   var queueElement = {
  4.     element: element,
  5.     priority: priority
  6.   };
  8.   if (this.isEmpty()) {
  9.     this.items.push(queueElement);
  10.   } else {
  11.     var added = false;
  12.     for (var i = 0; i < this.size(); i++) {
  13.       if (queueElement.priority < this.items[i].priority) {
  14.         this.items.splice(i, 0, queueElement);
  15.         added = true;
  16.         break ;
  17.       }
  18.     }
  20.     if (!added) {
  21.       this.items.push(queueElement);
  22.     }
  23.   }
  24. }
  26. // 打印队列里的元素
  27. function print () {
  28.   var strArr = [];
  30.   strArr = this.items.map(function (item) {
  31.     return `${item.element}->${item.priority}`;
  32.   });
  34.   console.log(strArr.toString());
  35. }

最小优先队列测试：

  1. // 创建最小优先队列minPriorityQueue实例
  2. var minPriorityQueue = new MinPriorityQueue();
  4. console.log(minPriorityQueue.isEmpty());     // true
  5. minPriorityQueue.enqueue("John", 1);         // undefined
  6. minPriorityQueue.enqueue("Jack", 3);         // undefined
  7. minPriorityQueue.enqueue("Camila", 2);       // undefined
  8. minPriorityQueue.enqueue("Tom", 3);          // undefined
  9. minPriorityQueue.print();                    // "John->1,Camila->2,Jack->3,Tom->3"
  10. console.log(minPriorityQueue.size());        // 4
  11. console.log(minPriorityQueue.isEmpty());     // false
  12. minPriorityQueue.dequeue();                  // {element: "John", priority: 1}
  13. minPriorityQueue.dequeue();                  // {element: "Camila", priority: 2}
  14. minPriorityQueue.print();                    // "Jack->3,Tom->3"
  15. minPriorityQueue.clear();                    // undefined
  16. console.log(minPriorityQueue.size());        // 0

实现最大优先队列

  1. // 最大优先队列 MaxPriorityQueue 类
  2. function MaxPriorityQueue () {
  3.   this.items = [];
  5.   this.enqueue = enqueue;
  6.   this.dequeue = dequeue;
  7.   this.front = front;
  8.   this.isEmpty = isEmpty;
  9.   this.size = size;
  10.   this.clear = clear;
  11.   this.print = print;
  12. }
  14. // 优先队列添加元素，要根据优先级判断在队列中的插入顺序
  15. function enqueue (element, priority) {
  16.   var queueElement = {
  17.     element: element,
  18.     priority: priority
  19.   };
  21.   if (this.isEmpty()) {
  22.     this.items.push(queueElement);
  23.   } else {
  24.     var added = false;
  26.     for (var i = 0; i < this.items.length; i++) {
  27.       // 注意，只需要将这里改为大于号就可以了
  28.       if (queueElement.priority > this.items[i].priority) {
  29.         this.items.splice(i, 0, queueElement);
  30.         added = true;
  31.         break ;
  32.       }
  33.     }
  35.     if (!added) {
  36.       this.items.push(queueElement);
  37.     }
  38.   }
  39. }

最大优先队列测试：

  1. // 创建最大优先队列maxPriorityQueue实例
  2. var maxPriorityQueue = new MaxPriorityQueue();
  4. console.log(maxPriorityQueue.isEmpty());     // true
  5. maxPriorityQueue.enqueue("John", 1);         // undefined
  6. maxPriorityQueue.enqueue("Jack", 3);         // undefined
  7. maxPriorityQueue.enqueue("Camila", 2);       // undefined
  8. maxPriorityQueue.enqueue("Tom", 3);          // undefined
  9. maxPriorityQueue.print();                    // "Jack->3,Tom->3,Camila->2,John->1"
  10. console.log(maxPriorityQueue.size());        // 4
  11. console.log(maxPriorityQueue.isEmpty());     // false
  12. maxPriorityQueue.dequeue();                  // {element: "Jack", priority: 3}
  13. maxPriorityQueue.dequeue();                  // {element: "Tom", priority: 3}
  14. maxPriorityQueue.print();                    // "Camila->2,John->1"
  15. maxPriorityQueue.clear();                    // undefined
  16. console.log(maxPriorityQueue.size());        // 0

循环队列

定义

循环队列，顾名思义，它长得像一个环。把它想像成一个圆的钟就对了。

关键是：确定好队空和队满的判定条件。

循环队列的一个例子就是击鼓传花游戏（Hot Potato）。在这个游戏中，孩子们围城一个圆圈，击鼓的时候把花尽快的传递给旁边的人。某一时刻击鼓停止，这时花在谁的手里，谁就退出圆圈直到游戏结束。重复这个过程，直到只剩一个孩子（胜者）。

下面我们在普通队列的基础上，实现一个模拟的击鼓传花游戏，下面只写击鼓传花的代码片段：

  1. // 实现击鼓传花
  2. function hotPotato (nameList, num) {
  3.   var queue = new Queue();
  5.   for (var i = 0; i < nameList.length; i++) {
  6.     queue.enqueue(nameList[i]);
  7.   }
  9.   var eliminated = '';
  11.   while (queue.size() > 1) {
  12.     // 循环 num 次，队首出来去到队尾
  13.     for (var i = 0; i < num; i++) {
  14.       queue.enqueue(queue.dequeue());
  15.     }
  16.     // 循环 num 次过后，移除当前队首的元素
  17.     eliminated = queue.dequeue();
  18.     console.log(`${eliminated} 在击鼓传花中被淘汰！`);
  19.   }
  21.   // 最后只剩一个元素
  22.   return queue.dequeue();
  23. }
  25. // 测试
  26. var nameList = ["John", "Jack", "Camila", "Ingrid", "Carl"];
  27. var winner = hotPotato(nameList, 10);
  28. console.log(`最后的胜利者是：${winner}`);

执行结果为：

  1. // John 在击鼓传花中被淘汰！
  2. // Ingrid 在击鼓传花中被淘汰！
  3. // Jack 在击鼓传花中被淘汰！
  4. // Camila 在击鼓传花中被淘汰！
  5. // 最后的胜利者是：Carl

队列小结

一些具有某些额外特性的队列，比如：循环队列、阻塞队列、并发队列。它们在很多偏底层系统、框架、中间件的开发中，起着关键性的作用。

以上队列的代码要感谢 leocoder351。

5. 链表

定义

  • 链表存储有序的元素集合，但不同于数组，链表中的元素在内存中并不是连续放置的，它是通过 指针 将 零散的内存块 串连起来的。
  • 每个元素由一个存储元素本身的 节点 和一个指向下一个元素的 引用（也称指针或链接）组成。

简单的链接结构图：

其中，data 中保存着数据，next 保存着下一个链表的引用。

上图中，我们说 data2 跟在 data1 后面，而不是说 data2 是链表中的第二个元素。值得注意的是，我们将链表的尾元素指向了 null 节点，表示链接结束的位置。

特点

  • 链表是通过指针将零散的内存块串连起来的。

    所以链表不支持 随机访问，如果要找特定的项，只能从头开始遍历，直到找到某个项。

    所以访问的时间复杂度为 O(n)。

  • 高效的插入和删除。

    链表中插入或者删除一个数据，我们并不需要为了保持内存的连续性而搬移结点，因为链表的存储空间本身就不是连续的，只需要考虑相邻结点的指针改变。

    所以，在链表中插入和删除一个数据是非常快速的，时间复杂度为 O(1)。

三种最常见的链表结构，它们分别是：

  • 单链表
  • 双向链表
  • 循环链表

单链表

定义

由于链表的起始点的确定比较麻烦，因此很多链表的实现都会在链表的最前面添加一个特殊的节点，称为 头节点，表示链表的头部。

经过改造，链表就成了如下的样子：

针对链表的插入和删除操作，我们只需要考虑相邻结点的指针改变，所以插入与删除的时间复杂度为 O(1)。

在 d2 节点后面插入 d4 节点：

删除 d4 节点：

实现

  • Node 类用来表示节点。
  • LinkedList 类提供插入节点、删除节点等一些操作。

单向链表的八种常用操作：

  • append(element)：尾部添加元素。
  • insert(position, element)：特定位置插入一个新的项。
  • removeAt(position)：特定位置移除一项。
  • remove(element)：移除一项。
  • indexOf(element)：返回元素在链表中的索引。如果链表中没有该元素则返回 -1。
  • isEmpty()：如果链表中不包含任何元素，返回 true，如果链表长度大于 0，返回 false。
  • size()：返回链表包含的元素个数，与数组的 length 属性类似。
  • getHead()：返回链表的第一个元素。
  • toString()：由于链表使用了 Node 类，就需要重写继承自 JavaScript 对象默认的 toString() 方法，让其只输出元素的值。
  • print()：打印链表的所有元素。

具体代码：

  1. // 单链表
  2. function SinglyLinkedList() {
  3. 	// 节点
  4. 	function Node(element) {
  5. 		this.element = element; // 当前节点的元素
  6. 		this.next = null; // 下一个节点指针
  7. 	}
  9. 	var length = 0; // 链表的长度
  10. 	var head = null; // 链表的头部节点
  12. 	// 向链表尾部添加一个新的节点
  13. 	this.append = function(element) {
  14. 		var node = new Node(element);
  15. 		var currentNode = head;
  17. 		// 判断是否为空链表
  18. 		if (head === null) {
  19. 			// 是空链表，就把当前节点作为头部节点
  20. 			head = node;
  21. 		} else {
  22. 			// 从 head 开始一直找到最后一个 node
  23. 			while (currentNode.next) {
  24. 				// 后面还有 node
  25. 				currentNode = currentNode.next;
  26. 			}
  27. 			// 把当前节点的 next 指针 指向 新的节点
  28. 			currentNode.next = node;
  29. 		}
  30. 		// 链表的长度加 1
  31. 		length++;
  32. 	};
  34. 	// 向链表特定位置插入一个新节点
  35. 	this.insert = function(position, element) {
  36. 		if (position < 0 || position > length) {
  37. 			// 越界
  38. 			return false;
  39. 		} else {
  40. 			var node = new Node(element);
  41. 			var index = 0;
  42. 			var currentNode = head;
  43. 			var previousNode;
  45. 			// 在最前插入节点
  46. 			if (position === 0) {
  47. 				node.next = currentNode;
  48. 				head = node;
  49. 			} else {
  50. 				// 循环找到位置
  51. 				while (index < position) {
  52. 					index++;
  53. 					previousNode = currentNode;
  54. 					currentNode = currentNode.next;
  55. 				}
  56. 				// 把前一个节点的指针指向新节点，新节点的指针指向当前节点，保持连接性
  57. 				previousNode.next = node;
  58. 				node.next = currentNode;
  59. 			}
  61. 			length++;
  63. 			return true;
  64. 		}
  65. 	};
  67. 	// 从链表的特定位置移除一项
  68. 	this.removeAt = function(position) {
  69. 		if ((position < 0 && position >= length) || length === 0) {
  70. 			// 越界
  71. 			return false;
  72. 		} else {
  73. 			var currentNode = head;
  74. 			var index = 0;
  75. 			var previousNode;
  77. 			if (position === 0) {
  78. 				head = currentNode.next;
  79. 			} else {
  80. 				// 循环找到位置
  81. 				while (index < position) {
  82. 					index++;
  83. 					previousNode = currentNode;
  84. 					currentNode = currentNode.next;
  85. 				}
  86. 				// 把当前节点的 next 指针 指向 当前节点的 next 指针，即是 删除了当前节点
  87. 				previousNode.next = currentNode.next;
  88. 			}
  90. 			length--;
  92. 			return true;
  93. 		}
  94. 	};
  96. 	// 从链表中移除指定项
  97. 	this.remove = function(element) {
  98. 		var index = this.indexOf(element);
  99. 		return this.removeAt(index);
  100. 	};
  102. 	// 返回元素在链表的索引，如果链表中没有该元素则返回 -1
  103. 	this.indexOf = function(element) {
  104. 		var currentNode = head;
  105. 		var index = 0;
  107. 		while (currentNode) {
  108. 			if (currentNode.element === element) {
  109. 				return index;
  110. 			}
  112. 			index++;
  113. 			currentNode = currentNode.next;
  114. 		}
  116. 		return -1;
  117. 	};
  119. 	// 如果链表中不包含任何元素，返回 true，如果链表长度大于 0，返回 false
  120. 	this.isEmpty = function() {
  121. 		return length === 0;
  122. 	};
  124. 	// 返回链表包含的元素个数，与数组的 length 属性类似
  125. 	this.size = function() {
  126. 		return length;
  127. 	};
  129. 	// 获取链表头部元素
  130. 	this.getHead = function() {
  131. 		return head.element;
  132. 	};
  134. 	// 由于链表使用了 Node 类，就需要重写继承自 JavaScript 对象默认的 toString() 方法，让其只输出元素的值
  135. 	this.toString = function() {
  136. 		var currentNode = head;
  137. 		var string = '';
  139. 		while (currentNode) {
  140. 			string += ',' + currentNode.element;
  141. 			currentNode = currentNode.next;
  142. 		}
  144. 		return string.slice(1);
  145. 	};
  147. 	// 打印链表数据
  148. 	this.print = function() {
  149. 		console.log(this.toString());
  150. 	};
  152. 	// 获取整个链表
  153. 	this.list = function() {
  154. 		console.log('head: ', head);
  155. 		return head;
  156. 	};
  157. }

测试：

  1. // 创建单向链表实例
  2. var singlyLinked = new SinglyLinkedList();
  3. console.log(singlyLinked.removeAt(0)); // false
  4. console.log(singlyLinked.isEmpty()); // true
  5. singlyLinked.append('Tom');
  6. singlyLinked.append('Peter');
  7. singlyLinked.append('Paul');
  8. singlyLinked.print(); // "Tom,Peter,Paul"
  9. singlyLinked.insert(0, 'Susan');
  10. singlyLinked.print(); // "Susan,Tom,Peter,Paul"
  11. singlyLinked.insert(1, 'Jack');
  12. singlyLinked.print(); // "Susan,Jack,Tom,Peter,Paul"
  13. console.log(singlyLinked.getHead()); // "Susan"
  14. console.log(singlyLinked.isEmpty()); // false
  15. console.log(singlyLinked.indexOf('Peter')); // 3
  16. console.log(singlyLinked.indexOf('Cris')); // -1
  17. singlyLinked.remove('Tom');
  18. singlyLinked.removeAt(2);
  19. singlyLinked.print(); // "Susan,Jack,Paul"
  20. singlyLinked.list(); // 具体控制台

整个链表数据在 JavaScript 里是怎样的呢 ？

为了看这个数据，特意写了个 list 函数：

  1. // 获取整个链表
  2. 	this.list = function() {
  3. 		console.log('head: ', head);
  4. 		return head;
  5. 	};

重点上上面的最后一行代码： singlyLinked.list() ，打印的数据如下：

所以，在 JavaScript 中，单链表的真实数据有点类似于对象，实际上是 Node 类生成的实例。

双向链表

单向链表只有一个方向，结点只有一个后继指针 next 指向后面的结点。

而双向链表，它支持两个方向，每个结点不止有一个后继指针 next 指向后面的结点，还有一个前驱指针 prev 指向前面的结点。

单向链表与又向链表比较

  • 双向链表需要额外的两个空间来存储后继结点和前驱结点的地址。

    所以，如果存储同样多的数据，双向链表要比单链表占用更多的内存空间。

    虽然两个指针比较浪费存储空间，但可以支持双向遍历，这样也带来了双向链表操作的灵活性。
  • 双向链表提供了两种迭代列表的方法：从头到尾，或者从尾到头。

    我们可以访问一个特定节点的下一个或前一个元素。
  • 在单向链表中，如果迭代链表时错过了要找的元素，就需要回到链表起点，重新开始迭代。
  • 在双向链表中，可以从任一节点，向前或向后迭代，这是双向链表的一个优点。
  • 所以，双向链表可以支持 O(1) 时间复杂度的情况下找到前驱结点，正是这样的特点，也使双向链表在某些情况下的插入、删除等操作都要比单链表简单、高效。

实现

具体代码：

  1. // 创建双向链表 DoublyLinkedList 类
  2. function DoublyLinkedList() {
  3.   function Node(element) {
  4.     this.element = element; //当前节点的元素
  5.     this.next = null; //下一个节点指针
  6.     this.previous = null; //上一个节点指针
  7.   }
  9.   var length = 0; // 链表长度
  10.   var head = null; // 链表头部
  11.   var tail = null; // 链表尾部
  13.   // 向链表尾部添加一个新的项
  14.   this.append = function(element) {
  15.     var node = new Node(element);
  16.     var currentNode = tail;
  18.     // 判断是否为空链表
  19.     if (currentNode === null) {
  20.       // 空链表
  21.       head = node;
  22.       tail = node;
  23.     } else {
  24.       currentNode.next = node;
  25.       node.prev = currentNode;
  26.       tail = node;
  27.     }
  29.     length++;
  30.   };
  32.   // 向链表特定位置插入一个新的项
  33.   this.insert = function(position, element) {
  34.     if (position < 0 && position > length) {
  35.       // 越界
  36.       return false;
  37.     } else {
  38.       var node = new Node(element);
  39.       var index = 0;
  40.       var currentNode = head;
  41.       var previousNode;
  43.       if (position === 0) {
  44.         if (!head) {
  45.           head = node;
  46.           tail = node;
  47.         } else {
  48.           node.next = currentNode;
  49.           currentNode.prev = node;
  50.           head = node;
  51.         }
  52.       } else if (position === length) {
  53.         this.append(element);
  54.       } else {
  55.         while (index < position) {
  56.           index++;
  57.           previousNode = currentNode;
  58.           currentNode = currentNode.next;
  59.         }
  61.         previousNode.next = node;
  62.         node.next = currentNode;
  64.         node.prev = previousNode;
  65.         currentNode.prev = node;
  66.       }
  68.       length++;
  70.       return true;
  71.     }
  72.   };
  74.   // 从链表的特定位置移除一项
  75.   this.removeAt = function(position) {
  76.     if ((position < 0 && position >= length) || length === 0) {
  77.       // 越界
  78.       return false;
  79.     } else {
  80.       var currentNode = head;
  81.       var index = 0;
  82.       var previousNode;
  84.       if (position === 0) {
  85.         // 移除第一项
  86.         if (length === 1) {
  87.           head = null;
  88.           tail = null;
  89.         } else {
  90.           head = currentNode.next;
  91.           head.prev = null;
  92.         }
  93.       } else if (position === length - 1) {
  94.         // 移除最后一项
  95.         if (length === 1) {
  96.           head = null;
  97.           tail = null;
  98.         } else {
  99.           currentNode = tail;
  100.           tail = currentNode.prev;
  101.           tail.next = null;
  102.         }
  103.       } else {
  104.         while (index < position) {
  105.           index++;
  106.           previousNode = currentNode;
  107.           currentNode = currentNode.next;
  108.         }
  109.         previousNode.next = currentNode.next;
  110.         previousNode = currentNode.next.prev;
  111.       }
  113.       length--;
  115.       return true;
  116.     }
  117.   };
  119.   // 从链表中移除指定项
  120.   this.remove = function(element) {
  121.     var index = this.indexOf(element);
  122.     return this.removeAt(index);
  123.   };
  125.   // 返回元素在链表的索引，如果链表中没有该元素则返回 -1
  126.   this.indexOf = function(element) {
  127.     var currentNode = head;
  128.     var index = 0;
  130.     while (currentNode) {
  131.       if (currentNode.element === element) {
  132.         return index;
  133.       }
  135.       index++;
  136.       currentNode = currentNode.next;
  137.     }
  139.     return -1;
  140.   };
  142.   // 如果链表中不包含任何元素，返回 true ，如果链表长度大于 0 ，返回 false
  143.   this.isEmpty = function() {
  144.     return length == 0;
  145.   };
  147.   // 返回链表包含的元素个数，与数组的 length 属性类似
  148.   this.size = function() {
  149.     return length;
  150.   };
  152.   // 获取链表头部元素
  153.   this.getHead = function() {
  154.     return head.element;
  155.   };
  157.   // 由于链表使用了 Node 类，就需要重写继承自 JavaScript 对象默认的 toString() 方法，让其只输出元素的值
  158.   this.toString = function() {
  159.     var currentNode = head;
  160.     var string = '';
  162.     while (currentNode) {
  163.       string += ',' + currentNode.element;
  164.       currentNode = currentNode.next;
  165.     }
  167.     return string.slice(1);
  168.   };
  170.   this.print = function() {
  171.     console.log(this.toString());
  172.   };
  174.   // 获取整个链表
  175.   this.list = function() {
  176.     console.log('head: ', head);
  177.     return head;
  178.   };
  179. }

测试：

  1. // 创建双向链表
  2. var doublyLinked = new DoublyLinkedList();
  3. console.log(doublyLinked.isEmpty()); // true
  4. doublyLinked.append('Tom');
  5. doublyLinked.append('Peter');
  6. doublyLinked.append('Paul');
  7. doublyLinked.print(); // "Tom,Peter,Paul"
  8. doublyLinked.insert(0, 'Susan');
  9. doublyLinked.print(); // "Susan,Tom,Peter,Paul"
  10. doublyLinked.insert(1, 'Jack');
  11. doublyLinked.print(); // "Susan,Jack,Tom,Peter,Paul"
  12. console.log(doublyLinked.getHead()); // "Susan"
  13. console.log(doublyLinked.isEmpty()); // false
  14. console.log(doublyLinked.indexOf('Peter')); // 3
  15. console.log(doublyLinked.indexOf('Cris')); // -1
  16. doublyLinked.remove('Tom');
  17. doublyLinked.removeAt(2);
  18. doublyLinked.print(); // "Susan,Jack,Paul"
  19. doublyLinked.list(); // 请看控制台输出

整个链表数据在 JavaScript 里是怎样的呢 ？

  1. // 获取整个链表
  2.   this.list = function() {
  3.     console.log('head: ', head);
  4.     return head;
  5.   };

调用 doublyLinked.list(); .

控制台输出如下：

链表代码实现的关键是弄清楚：前节点与后节点与边界。

循环链表

循环链表是一种特殊的单链表。

循环链表和单链表相似，节点类型都是一样。

唯一的区别是，在创建循环链表的时候，让其头节点的 next 属性指向它本身。

即：

  1. head.next = head;

这种行为会导致链表中每个节点的 next 属性都指向链表的头节点，换句话说，也就是链表的尾节点指向了头节点，形成了一个循环链表。如下图所示：

循环链表：在单链表的基础上，将尾节点的指针指向头结点，就构成了一个循环链表。环形链表从任意一个节点开始，都可以遍历整个链表。

代码：

  1. // 循环链表
  2. function CircularLinkedList() {
  3. 	// 节点
  4. 	function Node(element) {
  5. 		this.element = element; // 当前节点的元素
  6. 		this.next = null; // 下一个节点指针
  7. 	}
  9. 	var length = 0,
  10. 		head = null;
  12. 	this.append = function(element) {
  13. 		var node = new Node(element),
  14. 			current;
  16. 		if (!head) {
  17. 			head = node;
  18. 			// 头的指针指向自己
  19. 			node.next = head;
  20. 		} else {
  21. 			current = head;
  23. 			while (current.next !== head) {
  24. 				current = current.next;
  25. 			}
  27. 			current.next = node;
  28. 			// 最后一个节点指向头节点
  29. 			node.next = head;
  30. 		}
  32. 		length++;
  33. 		return true;
  34. 	};
  36. 	this.insert = function(position, element) {
  37. 		if (position > -1 && position < length) {
  38. 			var node = new Node(element),
  39. 				index = 0,
  40. 				current = head,
  41. 				previous;
  43. 			if (position === 0) {
  44. 				// 头节点指向自己
  45. 				node.next = head;
  46. 				head = node;
  47. 			} else {
  48. 				while (index++ < position) {
  49. 					previous = current;
  50. 					current = current.next;
  51. 				}
  52. 				previous.next = node;
  53. 				node.next = current;
  54. 			}
  55. 			length++;
  56. 			return true;
  57. 		} else {
  58. 			return false;
  59. 		}
  60. 	};
  61. 	this.removeAt = function(position) {
  62. 		if (position > -1 && position < length) {
  63. 			var current = head,
  64. 				previous,
  65. 				index = 0;
  66. 			if (position === 0) {
  67. 				head = current.next;
  68. 			} else {
  69. 				while (index++ < position) {
  70. 					previous = current;
  71. 					current = current.next;
  72. 				}
  73. 				previous.next = current.next;
  74. 			}
  75. 			length--;
  76. 			return current.element;
  77. 		} else {
  78. 			return false;
  79. 		}
  80. 	};
  81. 	this.remove = function(element) {
  82. 		var current = head,
  83. 			previous,
  84. 			indexCheck = 0;
  85. 		while (current && indexCheck < length) {
  86. 			if (current.element === element) {
  87. 				if (indexCheck == 0) {
  88. 					head = current.next;
  89. 					length--;
  90. 					return true;
  91. 				} else {
  92. 					previous.next = current.next;
  93. 					length--;
  94. 					return true;
  95. 				}
  96. 			} else {
  97. 				previous = current;
  98. 				current = current.next;
  99. 				indexCheck++;
  100. 			}
  101. 		}
  102. 		return false;
  103. 	};
  104. 	this.remove = function() {
  105. 		if (length === 0) {
  106. 			return false;
  107. 		}
  108. 		var current = head,
  109. 			previous,
  110. 			indexCheck = 0;
  111. 		if (length === 1) {
  112. 			head = null;
  113. 			length--;
  114. 			return current.element;
  115. 		}
  116. 		while (indexCheck++ < length) {
  117. 			previous = current;
  118. 			current = current.next;
  119. 		}
  120. 		previous.next = head;
  121. 		length--;
  122. 		return current.element;
  123. 	};
  124. 	this.indexOf = function(element) {
  125. 		var current = head,
  126. 			index = 0;
  127. 		while (current && index < length) {
  128. 			if (current.element === element) {
  129. 				return index;
  130. 			} else {
  131. 				index++;
  132. 				current = current.next;
  133. 			}
  134. 		}
  135. 		return -1;
  136. 	};
  137. 	this.isEmpty = function() {
  138. 		return length === 0;
  139. 	};
  140. 	this.size = function() {
  141. 		return length;
  142. 	};
  144. 	// 由于链表使用了 Node 类，就需要重写继承自 JavaScript 对象默认的 toString() 方法，让其只输出元素的值
  145. 	this.toString = function() {
  146. 		var current = head,
  147. 			string = '',
  148. 			indexCheck = 0;
  149. 		while (current && indexCheck < length) {
  150. 			string += ',' + current.element;
  151. 			current = current.next;
  152. 			indexCheck++;
  153. 		}
  154. 		return string.slice(1);
  155. 	};
  157. 	// 获取链表头部元素
  158. 	this.getHead = function() {
  159. 		return head.element;
  160. 	};
  162. 	// 打印链表数据
  163. 	this.print = function() {
  164. 		console.log(this.toString());
  165. 	};
  167. 	// 获取整个链表
  168. 	this.list = function() {
  169. 		console.log('head: ', head);
  170. 		return head;
  171. 	};
  172. }

测试：

  1. // 创建单向链表实例
  2. var circularLinked = new CircularLinkedList();
  3. console.log(circularLinked.removeAt(0)); // false
  4. console.log(circularLinked.isEmpty()); // true
  5. circularLinked.append('Tom');
  6. circularLinked.append('Peter');
  7. circularLinked.append('Paul');
  8. circularLinked.print(); // "Tom,Peter,Paul"
  9. circularLinked.insert(0, 'Susan');
  10. circularLinked.print(); // "Susan,Tom,Peter,Paul"
  11. circularLinked.insert(1, 'Jack');
  12. circularLinked.print(); // "Susan,Jack,Tom,Peter,Paul"
  13. console.log(circularLinked.getHead()); // "Susan"
  14. console.log(circularLinked.isEmpty()); // false
  15. console.log(circularLinked.indexOf('Peter')); // 3
  16. console.log(circularLinked.indexOf('Cris')); // -1
  17. circularLinked.remove('Tom');
  18. circularLinked.removeAt(2);
  19. circularLinked.print(); // "Susan,Jack,Paul"
  20. circularLinked.list(); // 具体控制台

整个链表数据在 JavaScript 里是怎样的呢 ？

  1. // 获取整个链表
  2.   this.list = function() {
  3.     console.log('head: ', head);
  4.     return head;
  5.   };

调用 circularLinked.list() 。

控制台输出如下：

你知道大家发现没有，为什么从 1 - 4 - 1 了，还有 next 节点，而且是还可以一直点 next ，重复的展开下去，这正是 循环 的原因。

链表总结

  • 写链表代码是最考验逻辑思维能力的，要熟练链表，只有 多写多练，没有捷径。
  • 因为，链表代码到处都是指针的操作、边界条件的处理，稍有不慎就容易产生 Bug。
  • 链表代码写得好坏，可以看出一个人写代码是否够细心，考虑问题是否全面，思维是否缜密。
  • 所以，这也是很多面试官喜欢让人手写链表代码的原因。
  • 一定要自己写代码实现一下，才有效果。

6. 文章输出计划

JavaScript 数据结构与算法之美 系列文章，暂时写了如下的 11 篇文章，后续还有想写的内容，再补充。

所写的内容只是数据结构与算法内容的冰山一角，如果你还想学更多的内容，推荐学习王争老师的 数据结构与算法之美。

从时间和空间复杂度、基础数据结构到排序算法，文章的内容有一定的关联性，所以阅读时推荐按顺序来阅读，效果更佳。

如果有错误或者不严谨的地方，请务必给予指正，以免误人子弟，十分感谢。

7. 最后

文章中的代码已经全部放在了我的 github 上，如果喜欢或者有所启发，欢迎 star，对作者也是一种鼓励。

参考文章：

数组：为什么很多编程语言中数组都从 0 开始编号？

JS中的算法与数据结构——链表(Linked-list)

JavaScript数据结构 03 - 队列

链表（上）：如何实现 LRU 缓存淘汰算法?

JavaScript数据结构——队列

JavaScript 数据结构与算法之美 - 线性表（数组、栈、队列、链表）的更多相关文章

  1. JavaScript 数据结构与算法之美 - 非线性表中的树、堆是干嘛用的 ？其数据结构是怎样的 ？

    1. 前言 想学好前端,先练好内功,内功不行,就算招式练的再花哨,终究成不了高手. 非线性表(树.堆),可以说是前端程序员的内功,要知其然,知其所以然. 笔者写的 JavaScript 数据结构与算法 ...

  2. javascript实现数据结构与算法系列：线性表的静态单链表存储结构

    有时可借用一维数组来描述线性链表,这就是线性表的静态单链表存储结构. 在静态链表中,数组的一个分量表示一个结点,同时用游标(cur)代替指针指示结点在数组中的相对位置.数组的第0分量可看成头结点,其指 ...

  3. JavaScript 数据结构与算法之美 - 十大经典排序算法汇总（图文并茂）

    1. 前言 算法为王. 想学好前端,先练好内功,内功不行,就算招式练的再花哨,终究成不了高手:只有内功深厚者,前端之路才会走得更远. 笔者写的 JavaScript 数据结构与算法之美 系列用的语言是 ...

  4. JavaScript 数据结构与算法之美 - 栈内存与堆内存 、浅拷贝与深拷贝

    前言 想写好前端,先练好内功. 栈内存与堆内存 .浅拷贝与深拷贝,可以说是前端程序员的内功,要知其然,知其所以然. 笔者写的 JavaScript 数据结构与算法之美 系列用的语言是 JavaScri ...

  5. JavaScript 数据结构与算法之美 - 桶排序、计数排序、基数排序

    1. 前言 算法为王. 想学好前端,先练好内功,只有内功深厚者,前端之路才会走得更远. 笔者写的 JavaScript 数据结构与算法之美 系列用的语言是 JavaScript ,旨在入门数据结构与算 ...

  6. JavaScript 数据结构与算法之美 - 冒泡排序、插入排序、选择排序

    1. 前言 算法为王. 想学好前端,先练好内功,只有内功深厚者,前端之路才会走得更远. 笔者写的 JavaScript 数据结构与算法之美 系列用的语言是 JavaScript ,旨在入门数据结构与算 ...

  7. JavaScript 数据结构与算法之美 - 归并排序、快速排序、希尔排序、堆排序

    1. 前言 算法为王. 想学好前端,先练好内功,只有内功深厚者,前端之路才会走得更远. 笔者写的 JavaScript 数据结构与算法之美 系列用的语言是 JavaScript ,旨在入门数据结构与算 ...

  8. 数据结构与算法系列2 线性表 使用java实现动态数组+ArrayList源码详解

    数据结构与算法系列2 线性表 使用java实现动态数组+ArrayList源码详解 对数组有不了解的可以先看看我的另一篇文章,那篇文章对数组有很多详细的解析,而本篇文章则着重讲动态数组,另一篇文章链接 ...

  9. 为什么我要放弃javaScript数据结构与算法（第二章）—— 数组

    第二章 数组 几乎所有的编程语言都原生支持数组类型,因为数组是最简单的内存数据结构.JavaScript里也有数组类型,虽然它的第一个版本并没有支持数组.本章将深入学习数组数据结构和它的能力. 为什么 ...

随机推荐

  1. LiteDB源码解析系列（1）LiteDB介绍

    最近利用端午假期,我把LiteDB的源码仔细的阅读了一遍,酣畅淋漓,确实收获了不少.后面将编写一系列关于LteDB的文章分享给大家,希望这么好的源码不要被埋没. 1.LiteDB是什么 这是一个小型的 ...

  2. python函数基础-参数-返回值-注释-01

    什么是函数 函数就是有特定功能的工具 # python中有内置函数(python解释器预先封装好的)与自定义函数(用户自定义封装的)之分 为什么要用函数 # 可以减少代码冗余,增加代码复用性 # 使代 ...

  3. ALLOT流控设备SSG

    Allot AC 系列产品EOL的通知如下. 该产品于2021年3月31日EOL. 替代的产品系列为SG/SSG系列. Allot Secure Service Gateway(SSG)应用程序和用户 ...

  4. css常用语法续集

    1   设置字体  body{font-familly:“宋体”} 2 可以使用下面代码设置网页中文字的字号为12像素,并把字体颜色设置为#666(灰色): body{font-size:12px;c ...

  5. angular6组件封装以及发布到npm

    一.创建angular项目 ng new myFirstDemo //angular-cli新建项目ng g m testm //新建模块ng g c testm/headertest //新建组件 ...

  6. OI/ACM最全卡常大招

    NO.10: 循环展开: 在缓存和寄存器允许的情况下一条语句内大量的展开运算会刺激 CPU 并发(蛤?这是个什么原理,算了,反正写了没坏处就这么写吧) NO.9: 特殊运算优化:(或许这真的没用) 取 ...

  7. Netty源码解析—客户端启动

    Netty源码解析-客户端启动 Bootstrap示例 public final class EchoClient { static final boolean SSL = System.getPro ...

  8. 关于AJAX的跨域问题

    最近过年的这几天在做毕业设计的时候遇到了一个关于AJAX的跨域问题,本来我是想要用一下聚合数据平台提供的天气预报的接口的,然后做一个当地的天气情况展示,但是在使用AJAX的时候,被告知出现错误了. 这 ...

  9. 4如何用PHP给MySQL数据库添加记录

    首先连接数据库(依旧用第二篇的方法) 假设数据库表里只有id,name,email三列 添加以下代码 $inputemail=写你要的email;$inputname=写你要的name;//先设定你要 ...

  10. linux CPU100%异常排查

    1.top查找出占CPU比例最高的进程(5881): 2.查看该进程正在执行的线程: top -H -p  5881 3.将线程转换成16进制 printf ‘%x\n’ 5950 4.查看异常线程执 ...