从浏览器的前进后退功能来谈谈栈

前言

今天突发奇想想水一篇关于栈的文章，如果我只是来讲解栈的概念和实现的话，那就太无聊了，毕竟都是学过的。于是在网上去了解了栈的具体应用，这就了解到了浏览器的前进和后退功能就是用栈来完成的，我就打算用javascript来模拟一下这个功能。

浏览器的前进后退

细心的小伙伴可能已经发现，浏览器在一个页面点击进入一下页面，是可以后退到之前的页面的，如果进入页面的后，是一个个后退到上一个页面的，但是如果跳转到新页面后就不能前进和后退了。

• 进入一系列页面：A -> B -> C 退回一系列页面：C -> B -> A
• 进入一系列页面：A -> B -> C 退回一系列页面：C -> B 进入新页面：A -> B -> D 退回一系列页面：D -> B -> A

栈结构的特性

栈是一种简单的线性数据结构，遵循先进后出特性，可以进栈和出栈。

class Stack {
  constructor() {
    this.items = {}
    this.count = 0
  }
  push(element) {
    this.items[this.count] = element
    this.count++
  }
  pop() {
    if (this.count === 0) return undefined
    this.count--
    const result = this.items[this.count]
    delete this.items[this.count]
    return result
  }
  clear() {
    this.items = {}
    this.count = 0
  }
}
复制代码

如何实现

思路就用两个栈就可以解决这个问题，进入一系列页面A -> B -> C 就把这些页面依次压入Stack1中，后退1步就把C弹出压入Stack2中，这个时候打开D页面，就清空Stack2中所有的页面就不能返回了。

那就开始吧

先创建2个栈

const stack1 = new Stack(),
      srack2 = new Stack()
复制代码

进入一系列页面：A -> B -> C

stack1.push('A')
stack1.push('B')
stack1.push('C')
console.log(stack1)

Stack { items: { '0': 'A', '1': 'B', '2': 'C' }, count: 3 }
复制代码

后退两个页面

stack2.push(stack1.pop())
stack2.push(stack1.pop())
console.log(stack1)
console.log(stack2)

Stack { items: { '0': 'A' }, count: 1 }
Stack { items: { '0': 'C', '1': 'B' }, count: 2 }
复制代码

前进一个页面

stack1.push(stack2.pop())
console.log(stack1)
console.log(stack2)

Stack { items: { '0': 'A', '1': 'B' }, count: 2 }
Stack { items: { '0': 'C' }, count: 1 }
复制代码

打开新页面

stack1.push('D')
stack2.clear()
console.log(stack1)
console.log(stack2)
console.log(stack2.pop())

Stack { items: { '0': 'A', '1': 'B', '2': 'D' }, count: 3 }
Stack { items: {}, count: 0 }
undefined
复制代码

尾言

这样浏览器的前进后退功能就可以用两个栈来完成了，非常的简单啊。