如何有效监视JavaScript数组元素的变动

ref="/tag/146/" style="color:#EB6E00;font-weight:bold;">数组变动监控的实际需求

在日常开发中，经常会遇到需要追踪数组变化的情况。比如，一个购物车功能，用户每次添加或删除商品，数组就会发生变化。如果想实时更新页面上的总价或数量提示，就必须知道数组什么时候被修改了。

但JavaScript原生的数组并没有提供直接监听变动的机制。push、pop、splice这些方法执行后，不会自动触发通知。这时候就得自己想办法解决。

使用Object.defineProperty劫持数组方法

一种常见做法是重写数组的变异方法。比如，我们可以拦截push、pop、shift、unshift、splice、sort、reverse这几个会改变原数组的方法，在它们执行前后插入自定义逻辑。

function observeArray(arr, callback){
  const methods = ['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'];
  methods.forEach(method => {
    const original = Array.prototype[method];
    Object.defineProperty(arr, method, {
      value: function() {
        const result = original.apply(this, arguments);
        callback(); // 触发回调
        return result;
      },
      enumerable: false,
      writable: true,
      configurable: true
    });
  });
}

这样，只要调用这些方法，就能收到通知。比如可以刷新界面显示，或者记录日志。

实际应用场景

假设你在做一个待办事项列表，数据存在一个数组里。每当你添加一条新任务，页面要立刻显示出新增的项。通过上面的方式，就可以在每次数组变化后自动渲染列表。

利用Proxy实现更全面的监听

ES6引入的Proxy能更彻底地监听数组。它不仅能捕获方法调用，还能监听索引赋值、length变化等操作。

function reactiveArray(target, callback) {
  const handler = {
    set(obj, prop, value) {
      obj[prop] = value;
      callback();
      return true;
    },
    get(obj, prop) {
      if (typeof prop === 'string' && !isNaN(parseInt(prop))) {
        return obj[prop];
      }
      const result = obj[prop];
      if (typeof result === 'function') {
        return result.bind(obj);
      }
      return result;
    }
  };
  return new Proxy(target, handler);
}

用这种方式创建的数组，无论是通过arr[0] = 'new'修改，还是用push添加，都能触发回调。

不过要注意，Proxy兼容性不如defineProperty，低版本浏览器可能不支持。

选择合适的方案

如果你的项目只跑在现代浏览器上，优先考虑Proxy，它更灵活也更接近真实行为。如果需要兼容老系统，比如还在维护IE11的内部管理工具，那defineProperty加方法拦截是更稳妥的选择。

另外，像Vue 2就用了defineProperty的思路，而Vue 3已经切换到了Proxy。这也反映了技术演进的方向。