JavaScript返回展开对象时原数组属性未更新问题排查

你的代码有三个直接导致状态不更新的错误：

• markDeskAvailable没有做任何状态持久化操作：你用展开运算符复制了匹配到的工位对象、修改了复制出来的新对象属性，之后直接把这个新对象return了，既没有把新对象写回原spaces数组替换旧值，也没有修改原对象的属性，相当于改了个完全无关的副本，原数组里存的对象自然不会有任何变化。
• 调用时实例不匹配：你通过createSpaces()生成的工位数据存在office变量里，后续调用更新方法时用的却是carPark.markDeskAvailable()，这两个是完全独立的对象，内部存储的spaces数组也是两份互不关联的数据，就算方法逻辑正确，你改的也是carPark内部的工位数据，和后面打印的office里的内容没有任何关系。
• 方法和数据完全脱节：从你贴的代码看，markDeskAvailable方法内部引用的spaces既没有绑定到实例属性，也没有和你调用createSpaces()生成的数组合并，方法操作的数据源和你后续打印的数据源从一开始就不是同一份。

修正方案 #

首先把工位数据、操作方法、数据获取方法收拢到同一个类实例上，修改状态时要把变更后的值写回实例存储的spaces数组：

// 统一工位管理类
class OfficeManager {
  constructor() {
    // 初始化工位集合，存在实例自身属性上，所有方法都操作这份数据
    this.spaces = Array(constants.SPACES)
      .fill(null)
      .map((_, index) => ({
        desk: index,
        isDeskAvailable: true,
        timeOccupied: 0,
      }));
  }

  getSpaces() {
    return this.spaces;
  }

  markDeskAvailable(deskRequested) {
    const deskIndex = this.spaces.findIndex(space => space.desk === deskRequested);
    if (deskIndex === -1) {
      throw new Error("Desk does not exist.");
    }
    // 将修改后的对象写回数组对应位置，完成状态更新
    this.spaces[deskIndex] = {
      ...this.spaces[deskIndex],
      isDeskAvailable: true,
      timeOccupied: 0
    }
  }
}

调用时保证操作的是同一个实例：

const office = new OfficeManager();
office.markDeskAvailable(0);
console.log(office.getSpaces()); // 此时0号工位的状态会正确更新为可用

注意：如果你不想直接修改原对象，也可以采用不可变数据的更新思路，每次更新后生成新数组替换this.spaces，但核心原则是必须把更新后的值存回实例的状态里，不能只return新值不做存储。另外调用方法和获取数据必须操作同一个实例，跨实例操作永远不会拿到你预期的更新结果。

内容的提问来源于stack exchange，提问作者roo