web应用中的撤销与重做是一个非常常见的功能，我们来讲讲如何实现它。

首先我们需要有一个存储操作记录的地方，我们可以定义一个数组，数组内存储操作的记录。每一条记录描述了操作的类型、操作的对象、操作了对象的哪些属性。其次，我们需要知道当前操作的是哪一条记录，我们可以定义一个索引，根据索引在历史记录中获取操作的记录，然后根据记录的信息做对应的修改。

我们先看下用户的操作流程

我们可以看到，用户会有三种操作：添加/删除/修改，当操作触发时，我们需要对存入历史记录的信息做一些处理，这些处理通常会包含一些数据格式的转换，处理完之后，我们需要判断当前的历史记录数是否超过了最大值，如果没有超过，我们就可以直接将记录push到数组中，否则我们需要使用shift方法移除数组头部的项，也就是图中缺少的记录1，然后将记录push到数组中。

当用户进行撤销和重做的时候，如下图

首先，不管是撤销还是重做都是需要判断当前历史记录的索引是否超出了其数组长度，如果超出了，我们是不能进行操作的。当索引未超出时，我们取出对应的记录，图中为记录5。此时，你的记录信息中应该有一个操作类型标识，你可以称其为ActionType，值为：

export type ActionType=add|delete|modify

值得注意的是，历史记录在还原的时候，操作类型都是相反的，比如您添加了一个文本，撤销的时候你就应该把文本删除。添加和删除可以直接取反，然而更新却没有直接可以取反的操作。那么对于更新，我们应该如何处理呢？很简单，我们可以在记录中存储修改前后的值

{ oldValue:; newValue:; }

撤销的时候取旧的值，重做的时候取新的值。

然后我们从图中往下看，可以看到当撤销的时候，数组中的索引需要往上移动减1，当重做时索引需要往下移动加1。

那么当我们处于历史记录4的时候，此时我们又做了添加/删除/修改的操作，这时候应该如何处理呢？

遇到这种情况，我们可以将记录4之后的所有记录移除，然后将新的操作记录放到数组尾部，同时我们需要将标识当前历史记录位置的索引重置，可以设为-1，在下次操做的时候就可以判断-1为历史记录未操作过，然后通过length取历史记录最后一项为当前历史记录索引，重复上图的操作。