Array.reduce() 会修改原数组！

1
get(index: number) {
2
  // 先获取从0到index（包含index）的所有patch
3
  const patches = this.patches.slice(0, index + 1);
4
  // 从initialStage开始应用patch，得到在index时刻的舞台序列化数据
5
  const data = patches.reduce((acc, patch) => {
6
    return applyPatch(acc, patch).newDocument;
7
  }, this.initialStage);
8
  // 反序列化得到舞台对象
9
  const stage = deserialize(data, this.project);
10
  console.log("get %d = %o (patches %o)", index, stage, patches);
11
  return stage;
12
}

这段代码用来获取在 index 时刻的舞台数据

看似没问题对吧，运行一下

1
[INFO] get 0 = [ {} ] (patches: [
2
  { op: 'add', path: '/0', value: [ {} ] },
3
])
4
[INFO] get 0 = [ {}, {} ] (patches: [
5
  { op: 'add', path: '/0', value: [ {} ] },
6
])

诶，结果应该是一样的，为什么第二次运行结果多了一个 {}？

参考 MDN「Array.prototype.reduce() # 有初始值时 reduce() 如何运行」

如果给 reduce() 提供了初始值引用，那么第一个参数提供的函数的返回值将会修改初始值

所以得拷贝一份 initialStage 作为初始值，以 lodash 为例

1
get(index: number) {
2
  // 先获取从0到index（包含index）的所有patch
3
  const patches = this.patches.slice(0, index + 1);
4
  // 从initialStage开始应用patch，得到在index时刻的舞台序列化数据
5
  const data = patches.reduce((acc, patch) => {
6
    return applyPatch(acc, patch).newDocument;
7
  }, _.cloneDeep(this.initialStage));
8
  // 反序列化得到舞台对象
9
  const stage = deserialize(data, this.project);
10
  console.log("get %d = %o (patches %o)", index, stage, patches);
11
  return stage;
12
}

这样就不会修改原数组了，问题解决