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

Posted 2023-02-14

【中文标题】如何从代理数组中删除或插入项目？

【英文标题】：How to get deleted or inserted item from proxy array?

【发布时间】：2019-07-22 06:34:32

【问题描述】：

我正在尝试使用 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 我使用这个库来检测数组的变化，我也能够检测到数组内嵌套属性的变化。这正是我想要的。

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

【问题讨论】：

如果你想捕获splice，那么你必须像为pop 那样编写拼接处理程序 - 查看参数以查看将删除的内容，然后在删除之前存储数据。冲洗并重复您要处理的每种方法。

我试过了，但我没有在这个代理处理程序中得到拼接参数。

npmjs.com/package/underscore-observe 有这个库来观察数组中的变化，但这是使用 Array.observe() 现在已过时。和代理是 Array.observe 的替代品，因此应该有一种方法可以使用代理来检测这些变化。

@JoharZaman 代理对您来说很重要吗？或者任何其他方式也可以？

你根本不应该跟踪方法调用，你应该只跟踪索引元素。

【参考方案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())

【讨论】：

这几乎不再是一个数组。 proxy.length 和 proxy[0] 都不起作用。