javascript - 如何从代理数组中删除或插入项目？

Question

我正在尝试使用 JavaScript 代理检测对象数组中的更改。

问题:每当数组发生更改(例如删除或插入)时，我都想获取该删除或插入的项目。

当前代码

target = [{ id: 1, a: 'a' }, { id: 2, a: 'b' }];
proxy = new Proxy(target, {
    get: function (target, property: string, receiver) {
        if (property === 'pop') {
            console.log('deleted object', target[target.length - 1]);
        }
        console.log('get', property);
        // property is index in this case
        return target[property];
    },
    set: function (target, property, value, receiver) {
        console.log('set', property, 'to', value);
        target[property] = value;
        // you have to return true to accept the changes
        return true;
    }
});

当前想法:
我做了一些解决方法来从数组中获取已删除的项目，但它仅适用于 pop()方法，因为它从数组中删除最后一项。但我需要一种方法来获得更改，即使它是使用 splice 进行的方法或 push或 pop .

谢谢。

[更新]
我找到的解决方案:

https://github.com/ElliotNB/observable-slim
我使用这个库来检测数组的变化，我也能够检测到数组内嵌套属性的变化。这正是我想要的。

我使用这个库的原因是因为它使用了代理。

Answer 1

我建议不要在 getter 上暴露实际的 traget。您可以创建一个包装函数来支持 cutosom 修饰符。看看下面的例子。

const target = [
  { id: 1, a: "a" },
  { id: 2, a: "b" },
];
const proxy = new Proxy(target, {
  get: function (target, property, receiver) {
    switch (property) {
      case "push":
      case "pop":
      case "slice":
      case "splice":
        return (...arg) => target[property](...arg);
    }
    throw Error("Not supported yet");
  },
});

proxy.push({ id: 3, a: "c" })
console.log(proxy.pop())
console.log(proxy.slice(1,2))
console.log(proxy.pop())