先进后出栈和浏览器的前进后退功能的关系

浏览器大家应该都很熟悉，浏览网页的时候，点击后退的按钮，就能看到之前浏览过的页面，再点击前进的按钮就又回到了刚刚的页面，如果让你去实现这样的功能你会怎么实现呢？

利用栈是一种实现的方式。

什么是栈？如何理解呢

栈也是一种线性表，但是栈限定了只能在表尾部进行插入，删除的操作，所以，栈的尾部有其特殊的含义，表的尾部称为栈顶，另一端称为栈底。如果有a，b，c三个元素按顺序入栈，然后再出栈，出栈的顺序为c，b，a，所以栈结构具有后进先出的特点，举个贴切的例子，栈里的元素就像一摞盘子，放盘子的时候放在盘子的最上边，取的时候也是从最上边取。不能从中间抽或者插进去。

栈的分类

栈根据存储方式分为两种，一种是用一片连续的空间存储数据来实现的顺序栈，另一种是用不连续的空间来存储数据来实现的链式栈。

栈在js中的实现

js中没有栈的原生实现，但是我们可以用数组来实现一个js的栈。

// 栈的实现
class Stack {
    constructor() {
        this.arr = [];
    }
    
    push(val) {
        this.arr.push(val);
    }
    
    pop() {
        return this.arr.pop();
    }
    
    peek() {
        return this.arr[this.arr.length - 1];
    }
    
    empty() {
        return this.arr.length === 0;
    }
}

前进后退功能实现

实现前进后退的功能很简单，只需要两个栈即可。一个后退栈一个前进栈，当浏览一个新的网页时就将之前的页面放到后退栈中，点击后退时，则把后退栈顶页面出栈渲染，并将后退之前的页面推入前进栈中。点前进时，从前进栈中弹出页面渲染，前进之前的页面推入后退栈中。当栈中内容为空时，对应按钮置灰。