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

问：

我正在尝试使用 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()splicepushpop

谢谢。

[更新] 我发现的解决方案：

https://github.com/ElliotNB/observable-slim我使用这个库来检测数组中的更改，我也能够检测数组内嵌套属性的更改。这正是我一直在寻找的。

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

JavaScript 数组 es6-proxy

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())

function observeArrayChanges(array, callback) {
  // Create a proxy for the array
  const arrayProxy = new Proxy(array, {
    // The set handler is called whenever there's an insertion or deletion
    set(target, property, value) {
      const oldValue = target[property];

      // Perform the actual insertion or deletion
      const result = Reflect.set(target, property, value);

      // Check if it's an insertion or deletion
      if (oldValue !== value) {
        // Call the callback with information about the change
        callback({
          type: oldValue === undefined ? 'insert' : 'delete',
          item: oldValue === undefined ? value : oldValue,
        });
      }

      // Return the result of the set operation
      return result;
    },
  });

  return arrayProxy;
}

// Example usage:

const myArray = observeArrayChanges(
  [{ id: 1, a: 'a' }, { id: 2, a: 'b' }],
  (change) => {
    console.log(`Change type: ${change.type}`);
    console.log(`Changed item: `, change.item);
  }
);

// Insert an item
myArray.push({ id: 3, a: 'c' });

// Delete an item
//delete myArray[0];
console.log(myArray.pop())
console.log(myArray.slice(1,2))
console.log(myArray.pop())
console.log(myArray.length)
console.log(JSON.stringify(myArray))

上一个：使用 AppStorage 在 SwiftUI 中持久存储字符串数组

下一个：使用 MongoDB C# 驱动程序 2.2 对嵌套字段进行强类型查询

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

How to get deleted or inserted item from proxy array?

评论

评论