前端数据结构--线性结构-队列、栈

  栈是一种特殊的的线性表结构,只允许在一端插入和删除操作。允许插入和删除的一端是栈顶,另一端是栈底,不包含任何数据的叫空栈,栈具有后进者先出(Last in first out)简称LIFO,栈的操作主要有入栈、出栈 如

线性表、链表都是线性结构中的一种,只是存储方式不一样,叫不同的名称。

实现栈

  栈既可以用数组来实现,也可以用链表来实现。用数组实现的栈,叫作顺序栈,用链表实现的栈,叫作链式栈。

 1 /*
 2  栈:只能在栈的一边进行插入、删除操作,具有后进先出的特点
 3  用数组实现的栈,叫作顺序栈、用链表实现的栈,叫作链式栈。
 4  */
 5 
 6 class Stack {
 7   constructor () {
 8     this.size = 0
 9     this.stackList = []
10   }
11   // 入栈
12   pushStack (data) {
13     this.stackList.unshift(data)
14     this.size++
15     return true
16   }
17   // 出栈
18   popStack () {
19     if (this.size < 0) return false
20     this.stackList.shift()
21     this.size--
22   }
23   get length () {
24     return this.size
25   }
26 }
27 
28 let stack = new Stack()
29 stack.pushStack(1)
30 stack.pushStack(2)
31 stack.pushStack(3)
32 console.log(stack)
33 console.log(stack.length)
34 
35 stack.popStack()
36 
37 console.log(stack)
38 console.log(stack.length)

在线 codepen

应用场景

当某个数据集合需要在一端插入和删除操作,并且满足后进先出、先进后出的特性,那么应该用栈这种数据结构。

浏览器的前进、后退功能

  浏览器的前进后退基本原理很简单,使用两个栈X、Y,在浏览的时候把数据压入X栈,当点击后退的时候从X中出栈,且把数据压入Y栈。当点击前进的时候把Y栈中的数据出栈,然后再压入X栈。当栈 X 中没有数据时,那就说明没有页面可以继续后退浏览了。当栈 Y 中没有数据,那就说明没有页面可以点击前进按钮了。

还有很多应用场景,比如 撤销回退、js 执行的函数调用栈、递归调用栈等等。

队列

  队列与栈结构类似同样是一种特殊的的线性表结构,不同的是队列只允许在一端进行插入操作,在另一端进行删除操作,比如生活中的排队买票,等电梯等先来的先上,后来的人只能依次排队,不允许插队。队列具有先进者先出的特点。

实现队列

  队列跟栈一样,也是一种抽象的数据结构。它具有先进先出的特性,支持在队尾插入元素,在队头删除元素,队列既可以用数组来实现,也可以用链表来实现。用数组实现的栈,叫作顺序队列,用链表实现的栈,叫作链式队列。

 1 /*
 2   队列:只能在栈的一边进行插入、另外一边进行删除操作,具有先进先出的特点
 3   用数组实现的栈,叫作顺序队列、用链表实现的栈,叫作链式队列。
 4  */
 5 class QueueList {
 6   constructor () {
 7     this.size = 0
 8     this.queueList = []
 9   }
10   // 入队
11   enqueue (data) {
12     this.queueList.push(data)
13     this.size++
14   }
15   // 出队
16   dequeue () {
17     if (this.size < 0) return false
18     this.queueList.shift()
19     this.size--
20   }
21   clear () {
22     this.queueList = []
23   }
24   get length () {
25     return this.size
26   }
27   get isEmptyQueue () {
28     return !this.queueList.length
29   }
30 }
31 let queue = new QueueList()
32 queue.enqueue(1)
33 queue.enqueue(2)
34 queue.enqueue(3)
35 queue.dequeue()
36 
37 console.log(queue)
38 console.log(queue.length)

在线 codepen

队列的概念很好理解,基本操作也很容易掌握。

队列与栈

  • 栈:先进后出
  • 队列:先进先出
 
posted @ 2021-04-21 00:09  风吹De麦浪  阅读(223)  评论(0编辑  收藏  举报