栈：如何实现浏览器的前进和后退功能？

Question

浏览器的前进、后退功能，我想你肯定很熟悉吧？

当你依次访问完一串页面 a-b-c 之后，点击浏览器的后退按钮，就可以查看之前浏览过的页面 b 和 a。当你后退到页面 a，点击前进按钮，就可以重新查看页面 b 和 c。但是，如果你后退到页面 b 后，点击了新的页面 d，那就无法再通过前进、后退功能查看页面 c 了。

假设你是 Chrome 浏览器的开发工程师，你会如何实现这个功能呢？

这就要用到我们今天要讲的“栈”这种数据结构。带着这个问题，我们来学习今天的内容。

如何理解 栈？

关于“栈”，我有一个非常贴切的例子，就是一摞叠在一起的盘子。我们平时放盘子的时候，都是从下往上一个一个放；取的时候，我们也是从上往下一个一个地依次取，不能从中间任意抽出。后进者先出，先进者后出，这就是典型的“栈”结构。

从栈的操作特性上来看，栈是一种“操作受限”的线性表，只允许在一端插入和删除数据。

我第一次接触这种数据结构的时候，就对它存在的意义产生了很大的疑惑。因为我觉得，相比数组和链表，栈带给我的只有限制，并没有任何优势。那我直接使用数组或者链表不就好了吗？为什么还要用这个“操作受限”的“栈”呢？

事实上，从功能上来说，数组或链表确实可以替代栈，但你要知道，特定的数据结构是对特定场景的抽象，而且，数组或链表暴露了太多的操作接口，操作上的确灵活自由，但使用时就比较不可控，自然也就更容易出错。

当某个数据集合只涉及在一端插入和删除数据，并且满足后进先出、先进后出的特性，我们就应该首选“栈”这种数据结构

如何实现一个栈

• 基于数组实现栈
• 基于链表实现栈

解答开篇

好了，我想现在你已经完全理解了栈的概念。我们再回来看看开篇的思考题，如何实现浏览器的前进、后退功能？其实，用两个栈就可以非常完美地解决这个问题。

我们使用两个栈，X 和 Y，我们把首次浏览的页面依次压入栈 X，当点击后退按钮时，再依次从栈 X 中出栈，并将出栈的数据依次放入栈 Y。当我们点击前进按钮时，我们依次从栈 Y 中取出数据，放入栈 X 中。当栈 X 中没有数据时，那就说明没有页面可以继续后退浏览了。当栈 Y 中没有数据，那就说明没有页面可以点击前进按钮浏览了。

比如你顺序查看了 a，b，c 三个页面，我们就依次把 a，b，c 压入栈，这个时候，两个栈的数据就是这个样子：

当你通过浏览器的后退按钮，从页面 c 后退到页面 a 之后，我们就依次把 c 和 b 从栈 X 中弹出，并且依次放入到栈 Y。这个时候，两个栈的数据就是这个样子：

这个时候你又想看页面 b，于是你又点击前进按钮回到 b 页面，我们就把 b 再从栈 Y 中出栈，放入栈 X 中。此时两个栈的数据是这个样子：

这个时候，你通过页面 b 又跳转到新的页面 d 了，页面 c 就无法再通过前进、后退按钮重复查看了，所以需要清空栈 Y。此时两个栈的数据这个样子：

• SampleBrowser 的实现

|||||

leetcode 上关于栈的题目：20, 155, 232, 844, 224, 682, 496

|||||

class Browser {
    private urls:string[]
    private currentUrl:string
    constructor() {
        this.urls = []
    }

    push(url:string){
        console.log(`forward: ${url}`)
        this.currentUrl = url
        this.urls.push(url);
    }

    back(){
        let prev = this.urls.indexOf(this.currentUrl) - 1
        if (this.urls.length !==0 && prev >= 0) {
            this.currentUrl = this.urls[prev]
            console.log(`back: ${this.urls[prev]}`)
        }else{
            console.log('没有上一页')
        }
    }
    
    front(){
        let next = this.urls.indexOf(this.currentUrl) + 1
        if (this.urls.length !==0 && next < this.urls.length) {
            this.currentUrl = this.urls[next]
            console.log(`front: ${this.urls[next]}`)
        }else{
            console.log('没有下一页')
        }
    }

}
let browser = new Browser();
browser.push('www.google.com')
browser.push('www.myfreax.com')
browser.push('www.bing.com')
browser.back()
browser.back()
browser.front()
browser.front()
browser.front()
browser.front()
browser.back()
browser.back()
browser.back()
browser.front()

用数组也能实现，为何要用 stack。