数组类型类属性经push等操作修改时set访问器未触发，如何处理额外任务？

问题原因 #

调用env.Crumbs.push(_crumb)时，实际是先通过get Crumbs()获取数组引用，再对该引用指向的数组执行push操作——这属于修改数组内部状态，而非给Crumbs属性重新赋值（只有env.Crumbs = 新值这类赋值操作才会触发set访问器）。JavaScript的set访问器仅在属性被重新赋值时触发，修改引用类型的内部数据不会触发set。

另外你代码里的constructor存在逻辑冗余：this.Crumbs = []会直接触发set，把sessionStorage设为空数组，但后续get又会从sessionStorage读取，初始化逻辑绕了弯路。

解决方案 #

方案1：封装数组操作方法（推荐） #

在类内提供专门的面包屑操作方法，手动同步sessionStorage，避免外部直接操作数组：

class Environment {
  constructor() {
    // 初始化时直接从sessionStorage读取，无数据则设为空数组
    const storedCrumbs = sessionStorage.getItem('_crumbs');
    this._crumbs = storedCrumbs ? JSON.parse(storedCrumbs) : [];
  }

  // 返回数组副本，防止外部直接修改内部数据
  get Crumbs() {
    return [...this._crumbs];
  }

  // 添加面包屑的方法
  addCrumb(crumb) {
    this._crumbs.push(crumb);
    this._syncToStorage();
  }

  // 私有方法：同步数据到sessionStorage
  _syncToStorage() {
    sessionStorage.setItem('_crumbs', JSON.stringify(this._crumbs));
  }
}

// 使用示例
const env = new Environment();
const _crumb = { MetricId: 6, Concept: 'Back orders' };
env.addCrumb(_crumb);

这种方式逻辑清晰，易于维护，能确保每次操作都同步到sessionStorage。

方案2：修改后强制重新赋值触发set #

如果不想封装方法，可在修改数组后重新赋值给Crumbs，强制触发set：

// 原类代码不变的情况下，调用方式改为：
env.Crumbs = [...env.Crumbs, _crumb];

// 或者push后手动触发：
env.Crumbs.push(_crumb);
env.Crumbs = env.Crumbs; // 重新赋值触发set

此方式不够优雅，多处修改时容易遗漏同步逻辑。

方案3：用Proxy监听数组变化 #

通过Proxy包装数组，自动监听数组操作（如push、splice）并同步到sessionStorage：

class Environment {
  constructor() {
    const storedCrumbs = sessionStorage.getItem('_crumbs');
    const initialCrumbs = storedCrumbs ? JSON.parse(storedCrumbs) : [];
    // 用Proxy包装数组，监听修改操作
    this._crumbs = new Proxy(initialCrumbs, {
      set(target, prop, value) {
        target[prop] = value;
        sessionStorage.setItem('_crumbs', JSON.stringify(target));
        return true;
      }
    });
  }

  get Crumbs() {
    return this._crumbs;
  }
}

// 使用方式不变，push会自动触发同步
const env = new Environment();
const _crumb = { MetricId: 6, Concept: 'Back orders' };
env.Crumbs.push(_crumb);

Proxy能覆盖大部分数组修改操作，但需注意边界场景（如修改数组length），且有一定学习成本。

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