|
| 1 | +## JavaScript 数据结构与算法(四)队列结构 |
| 2 | + |
| 3 | +### 认识队列 |
| 4 | + |
| 5 | +队列(Queue)是一种运算受限的线性表,特点:先进先出。(FIFO:First In First Out) |
| 6 | + |
| 7 | +**受限之处:** |
| 8 | + |
| 9 | +- 只允许在表的前端(front)进行删除操作。 |
| 10 | +- 在表的后端(rear)进行插入操作。 |
| 11 | + |
| 12 | +生活中类似队列结构的场景: |
| 13 | + |
| 14 | +- 排队,,比如在电影院,商场,甚至是厕所排队。 |
| 15 | +- 优先排队的人,优先处理。 (买票、结账、WC)。 |
| 16 | + |
| 17 | + |
| 18 | + |
| 19 | +#### 队列图解 |
| 20 | + |
| 21 | + |
| 22 | + |
| 23 | +#### 队列在程序中的应用 |
| 24 | + |
| 25 | +- 打印队列:计算机打印多个文件的时候,需要排队打印。 |
| 26 | +- 线程队列:当开启多线程时,当新开启的线程所需的资源不足时就先放入线程队列,等待 CPU 处理。 |
| 27 | + |
| 28 | +### 队列的实现 |
| 29 | + |
| 30 | +队列的实现和栈一样,有两种方案: |
| 31 | + |
| 32 | +- 基于数组实现。 |
| 33 | +- 基于链表实现。 |
| 34 | + |
| 35 | +#### 队列常见的操作 |
| 36 | + |
| 37 | +- `enqueue(element)`:向队列尾部添加一个(或多个)新的项。 |
| 38 | +- `dequeue()`:移除队列的第一(即排在队列最前面的)项,并返回被移除的元素。 |
| 39 | +- `front()`:返回队列中的第一个元素——最先被添加,也将是最先被移除的元素。队列不做任何变动(不移除元素,只返回元素信息与 Stack 类的 peek 方法非常类似)。 |
| 40 | +- `isEmpty()`:如果队列中不包含任何元素,返回 true,否则返回 false。 |
| 41 | +- `size()`:返回队列包含的元素个数,与数组的 length 属性类似。 |
| 42 | +- `toString()`:将队列中的内容,转成字符串形式。 |
| 43 | + |
| 44 | +#### 代码实现 |
| 45 | + |
| 46 | +```js |
| 47 | +// 使用 ES6 实现 |
| 48 | +class Queue { |
| 49 | + items = []; |
| 50 | + |
| 51 | + // enqueue() 入队,将元素加入到队列中 |
| 52 | + enqueue(item) { |
| 53 | + this.items.push(item); |
| 54 | + } |
| 55 | + |
| 56 | + // dequeue() 出队,从队列中删除前端元素,返回删除的元素 |
| 57 | + dequeue() { |
| 58 | + return this.items.shift(); |
| 59 | + } |
| 60 | + |
| 61 | + // front() 查看队列的前端元素 |
| 62 | + front() { |
| 63 | + return this.items[0]; |
| 64 | + } |
| 65 | + |
| 66 | + // isEmpty() 查看队列是否为空 |
| 67 | + isEmpty() { |
| 68 | + return this.items.length === 0; |
| 69 | + } |
| 70 | + |
| 71 | + // size() 查看队列中元素的个数 |
| 72 | + size() { |
| 73 | + return this.items.length; |
| 74 | + } |
| 75 | + |
| 76 | + toString() { |
| 77 | + let result = ""; |
| 78 | + for (let item of this.items) { |
| 79 | + result += item + " "; |
| 80 | + } |
| 81 | + return result; |
| 82 | + } |
| 83 | +} |
| 84 | +``` |
| 85 | + |
| 86 | +#### 测试代码 |
| 87 | + |
| 88 | +```js |
| 89 | +const queue = new Queue(); |
| 90 | + |
| 91 | +// 入队操作 |
| 92 | +queue.enqueue("a"); |
| 93 | +queue.enqueue("b"); |
| 94 | +queue.enqueue("c"); |
| 95 | +queue.enqueue("d"); |
| 96 | +console.log(queue.items); //--> ["a", "b", "c", "d"] |
| 97 | + |
| 98 | +// 出队操作(先进先出) |
| 99 | +queue.dequeue(); |
| 100 | +queue.dequeue(); |
| 101 | +console.log(queue.items); //--> ["c", "d"] |
| 102 | + |
| 103 | +// 查看队头的元素 |
| 104 | +console.log(queue.front()); //--> c |
| 105 | + |
| 106 | +console.log(queue.isEmpty()); //--> false |
| 107 | +console.log(queue.size()); //--> 2 |
| 108 | +console.log(queue.toString()); //--> c d |
| 109 | +``` |
| 110 | + |
| 111 | +### 队列的应用 |
| 112 | + |
| 113 | +使用队列实现小游戏:**击鼓传花**。 |
| 114 | + |
| 115 | +分析:传入一组数据集合和设定的数字 number,循环遍历数组内元素,遍历到的元素为指定数字 number 时将该元素删除,直至数组剩下一个元素。 |
| 116 | + |
| 117 | +#### 代码实现 |
| 118 | + |
| 119 | +```js |
| 120 | +function passGame(nameList, number) { |
| 121 | + // 1、new 一个 Queue 对象 |
| 122 | + const queue = new Queue(); |
| 123 | + |
| 124 | + // 2、将 nameList 里面的每一个元素入队 |
| 125 | + for (const name of nameList) { |
| 126 | + queue.enqueue(name); |
| 127 | + } |
| 128 | + |
| 129 | + // 3、开始数数 |
| 130 | + // 队列中只剩下 1 个元素时就停止数数 |
| 131 | + while (queue.size() > 1) { |
| 132 | + // 不是 number 时,重新加入到队尾 |
| 133 | + // 是 number 时,将其删除 |
| 134 | + |
| 135 | + for (let i = 0; i < number - 1; i++) { |
| 136 | + // number 数字之前的人重新放入到队尾(即把队头删除的元素,重新加入到队列中) |
| 137 | + queue.enqueue(queue.dequeue()); |
| 138 | + } |
| 139 | + |
| 140 | + // number 对应这个人,直接从队列中删除 |
| 141 | + // 由于队列没有像数组一样的下标值不能直接取到某一元素, |
| 142 | + // 所以采用,把 number 前面的 number - 1 个元素先删除后添加到队列末尾, |
| 143 | + // 这样第 number 个元素就排到了队列的最前面,可以直接使用 dequeue 方法进行删除 |
| 144 | + queue.dequeue(); |
| 145 | + } |
| 146 | + |
| 147 | + // 4、获取最后剩下的那个人 |
| 148 | + const endName = queue.front(); |
| 149 | + |
| 150 | + // 5、返回这个人在原数组中对应的索引 |
| 151 | + return nameList.indexOf(endName); |
| 152 | +} |
| 153 | +``` |
| 154 | + |
| 155 | +#### 测试代码 |
| 156 | + |
| 157 | +```js |
| 158 | +const names = ["lily", "lucy", "tom", "tony", "jack"]; |
| 159 | +const targetIndex = passGame(names, 4); |
| 160 | +console.log("击鼓传花", names[targetIndex]); //--> lily |
| 161 | +``` |
| 162 | + |
| 163 | +### 优先队列 |
| 164 | + |
| 165 | +优先级队列主要考虑的问题: |
| 166 | + |
| 167 | +- 每个元素不再只是一个数据,还包含数据的优先级。 |
| 168 | +- 在添加数据过程中,根据优先级放入到正确位置。 |
| 169 | + |
| 170 | +#### 优先队列的实现 |
| 171 | + |
| 172 | +##### 代码实现 |
| 173 | + |
| 174 | +```js |
| 175 | +class PriorityQueue { |
| 176 | + items = []; |
| 177 | + |
| 178 | + // 内部类 |
| 179 | + QueueElement = class { |
| 180 | + constructor(element, priority) { |
| 181 | + this.element = element; |
| 182 | + this.priority = priority; |
| 183 | + } |
| 184 | + }; |
| 185 | + |
| 186 | + // enqueue() 入队,将元素按优先级加入到队列中 |
| 187 | + enqueue(element, priority) { |
| 188 | + // 根据传入的元素,创建 QueueElement 对象 |
| 189 | + const queueElement = new this.QueueElement(element, priority); |
| 190 | + |
| 191 | + // 判断队列是否为空 |
| 192 | + if (this.isEmpty()) { |
| 193 | + // 如果为空,不用判断优先级,直接添加 |
| 194 | + this.items.push(queueElement); |
| 195 | + } else { |
| 196 | + // 定义一个变量记录是否成功添加了新元素 |
| 197 | + let added = false; |
| 198 | + |
| 199 | + for (let i = 0; i < this.items.length; i++) { |
| 200 | + // 让新插入的元素进行优先级比较,priority 值越小,优先级越大 |
| 201 | + if (queueElement.priority < this.items[i].priority) { |
| 202 | + // 在指定的位置插入元素 |
| 203 | + this.items.splice(i, 0, queueElement); |
| 204 | + added = true; |
| 205 | + break; |
| 206 | + } |
| 207 | + } |
| 208 | + |
| 209 | + // 如果遍历完所有元素,优先级都大于新插入的元素,就将新插入的元素插入到最后 |
| 210 | + if (!added) { |
| 211 | + this.items.push(queueElement); |
| 212 | + } |
| 213 | + } |
| 214 | + } |
| 215 | + |
| 216 | + // dequeue() 出队,从队列中删除前端元素,返回删除的元素 |
| 217 | + dequeue() { |
| 218 | + return this.items.shift(); |
| 219 | + } |
| 220 | + |
| 221 | + // front() 查看队列的前端元素 |
| 222 | + front() { |
| 223 | + return this.items[0]; |
| 224 | + } |
| 225 | + |
| 226 | + // isEmpty() 查看队列是否为空 |
| 227 | + isEmpty() { |
| 228 | + return this.items.length === 0; |
| 229 | + } |
| 230 | + |
| 231 | + // size() 查看队列中元素的个数 |
| 232 | + size() { |
| 233 | + return this.items.length; |
| 234 | + } |
| 235 | + |
| 236 | + toString() { |
| 237 | + let result = ""; |
| 238 | + for (let item of this.items) { |
| 239 | + result += item.element + "-" + item.priority + " "; |
| 240 | + } |
| 241 | + return result; |
| 242 | + } |
| 243 | +} |
| 244 | +``` |
| 245 | + |
| 246 | +#### 测试代码 |
| 247 | + |
| 248 | +```js |
| 249 | +const priorityQueue = new PriorityQueue(); |
| 250 | + |
| 251 | +// 入队 |
| 252 | +priorityQueue.enqueue("A", 10); |
| 253 | +priorityQueue.enqueue("B", 15); |
| 254 | +priorityQueue.enqueue("C", 11); |
| 255 | +priorityQueue.enqueue("D", 20); |
| 256 | +priorityQueue.enqueue("E", 18); |
| 257 | + |
| 258 | +console.log(priorityQueue.items); |
| 259 | +//--> output: |
| 260 | +// QueueElement {element: "A", priority: 10} |
| 261 | +// QueueElement {element: "C", priority: 11} |
| 262 | +// QueueElement {element: "B", priority: 15} |
| 263 | +// QueueElement {element: "E", priority: 18} |
| 264 | +// QueueElement {element: "D", priority: 20} |
| 265 | + |
| 266 | +// 出队 |
| 267 | +priorityQueue.dequeue(); |
| 268 | +priorityQueue.dequeue(); |
| 269 | +console.log(priorityQueue.items); |
| 270 | +//--> output: |
| 271 | +// QueueElement {element: "B", priority: 15} |
| 272 | +// QueueElement {element: "E", priority: 18} |
| 273 | +// QueueElement {element: "D", priority: 20} |
| 274 | + |
| 275 | +console.log(priorityQueue.isEmpty()); //--> false |
| 276 | +console.log(priorityQueue.size()); //--> 3 |
| 277 | +console.log(priorityQueue.toString()); //--> B-15 E-18 D-20 |
| 278 | +``` |
| 279 | + |
| 280 | +### 数组、栈和队列图解 |
| 281 | + |
0 commit comments