javascript数组怎么实现备忘录模式

备忘录模式的核心目标是捕获并外部化一个对象的内部状态，以便后续可以将该对象恢复到之前保存的状态。javascript数组的有序存储特性，恰好可以承担历史状态存储容器的角色，通过数组的增删和索引访问能力，就能实现完整的备忘录逻辑。

备忘录模式的核心角色

在实现之前，先明确备忘录模式的三个核心角色，后续的实现会围绕这三个角色展开：

• 原发器：需要保存状态的对象，负责创建备忘录和恢复状态
• 备忘录：存储原发器状态的对象，通常只允许原发器访问内部状态
• 管理者：负责保存备忘录，但是不能修改备忘录的内容

基于数组的实现思路

我们可以用javascript数组作为管理者的核心存储结构，数组的每一项对应一个备忘录对象，数组的索引对应状态的时间顺序。原发器的每次状态变更，都会生成一个备忘录存入数组，需要恢复状态时，通过索引从数组中取出对应的备忘录即可。

基础结构实现

首先定义原发器，这里以一个简单的数据状态管理对象为例：

// 原发器：管理需要保存的状态
class Originator {
  constructor() {
    this.state = null;
  }

  // 设置状态
  setState(newState) {
    this.state = newState;
  }

  // 获取当前状态
  getState() {
    return this.state;
  }

  // 创建备忘录，保存当前状态
  createMemento() {
    return {
      state: this.state,
      timestamp: Date.now()
    };
  }

  // 从备忘录恢复状态
  restoreFromMemento(memento) {
    this.state = memento.state;
  }
}

接下来定义管理者，使用数组存储所有的备忘录：

// 管理者：用数组存储备忘录
class Caretaker {
  constructor() {
    // 数组作为备忘录的存储容器
    this.mementoList = [];
    // 当前指向的状态索引
    this.currentIndex = -1;
  }

  // 保存备忘录到数组
  saveMemento(memento) {
    // 如果当前索引不是最后一个，说明后续有历史状态，需要截断后面的状态
    if (this.currentIndex < this.mementoList.length - 1) {
      this.mementoList = this.mementoList.slice(0, this.currentIndex + 1);
    }
    this.mementoList.push(memento);
    this.currentIndex = this.mementoList.length - 1;
  }

  // 获取上一个状态的备忘录
  getPrevMemento() {
    if (this.currentIndex <= 0) {
      return null;
    }
    this.currentIndex--;
    return this.mementoList[this.currentIndex];
  }

  // 获取下一个状态的备忘录
  getNextMemento() {
    if (this.currentIndex >= this.mementoList.length - 1) {
      return null;
    }
    this.currentIndex++;
    return this.mementoList[this.currentIndex];
  }

  // 获取指定索引的备忘录
  getMementoByIndex(index) {
    if (index < 0 || index >= this.mementoList.length) {
      return null;
    }
    this.currentIndex = index;
    return this.mementoList[index];
  }
}

完整功能使用示例

将原发器和管理者组合起来，实现完整的状态保存和恢复功能：

// 初始化原发器和管理者
const originator = new Originator();
const caretaker = new Caretaker();

// 第一次设置状态并保存
originator.setState({ name: '初始状态', value: 1 });
caretaker.saveMemento(originator.createMemento());
console.log('当前状态：', originator.getState()); // 输出 { name: '初始状态', value: 1 }

// 第二次设置状态并保存
originator.setState({ name: '第二次修改', value: 2 });
caretaker.saveMemento(originator.createMemento());
console.log('当前状态：', originator.getState()); // 输出 { name: '第二次修改', value: 2 }

// 第三次设置状态并保存
originator.setState({ name: '第三次修改', value: 3 });
caretaker.saveMemento(originator.createMemento());
console.log('当前状态：', originator.getState()); // 输出 { name: '第三次修改', value: 3 }

// 回滚到上一个状态
const prevMemento = caretaker.getPrevMemento();
if (prevMemento) {
  originator.restoreFromMemento(prevMemento);
  console.log('回滚后状态：', originator.getState()); // 输出 { name: '第二次修改', value: 2 }
}

// 再回滚一次
const prevMemento2 = caretaker.getPrevMemento();
if (prevMemento2) {
  originator.restoreFromMemento(prevMemento2);
  console.log('再次回滚后状态：', originator.getState()); // 输出 { name: '初始状态', value: 1 }
}

// 前进到下一个状态
const nextMemento = caretaker.getNextMemento();
if (nextMemento) {
  originator.restoreFromMemento(nextMemento);
  console.log('前进后状态：', originator.getState()); // 输出 { name: '第二次修改', value: 2 }
}

实现注意事项

在实际使用中需要注意几个问题：

• 如果状态是引用类型，创建备忘录时建议做深拷贝，避免后续修改状态影响已保存的备忘录内容，比如可以用JSON.parse(JSON.stringify(state))做简单深拷贝，复杂场景可以用专门的深拷贝工具
• 数组存储的备忘录如果过多，会占用较多内存，可以根据需求设置最大存储数量，超出时删除最早的备忘录
• 管理者的数组操作要保证线程安全，如果是异步场景修改状态，需要加锁或者队列机制避免状态错乱

这种基于数组的实现方式逻辑简单，扩展性强，适合大多数需要状态历史管理的场景，开发者可以根据实际需求调整备忘录的内容和管理的逻辑。

javascript备忘录模式数组设计模式状态恢复修改时间：2026-07-04 18:24:27