JavaScript 代理：如何清空数组目标

Question

考虑以下 JavaScript Proxy:

const queue = new Proxy([], {

    get: (target, property) => {
        return target[property];
    },

    set: (target, property, value) => {

        target[property] = value;

        this._processQueue();

        return true;

    }

});

上面的目的是创建一个 queue 每当有项目添加到它时自动处理。

问题是一旦 queue 被处理，我需要调用 flushQueue 来删除处理过的项目。换句话说，我需要清空 queue 代理数组。

谁能告诉我怎么做？

我试过的...

// Can't do this as a) queue is a constant, and b) it overrides the Proxy
queue = [];

// For some reason this doesn't work
queue.length = 0; 

// This empties the array but for some reason does not reset the length...
queue.splice(0, queue.length);

更新

请在此处查看我的完整示例：

class Foo {

    /**
     * Foo constructor.
     *
     * @return void
     */
    constructor() {

        this.queue = new Proxy([], {

            get: (target, property) => {
                return target[property];
            },

            set: (target, property, value) => {

                this._processQueue();

                target[property] = value;

                return true;

            }

        });

    }

    /**
     * Add an event to the queue.
     *
     * @param {object} event
     * @return void
     */
    _addToQueue(event) {
        this.queue.push(event);
    }

    /**
     * Process the event queue.
     *
     * @return void
     */
    _processQueue() {

        console.log('process queue', this.queue, this.queue.length);

        if (this.queue.length) {

            this.queue.forEach((event, index) => {

                console.log(event);

                const method = this._resolveEvent(event.type);

                const payload = typeof event.payload !== 'undefined' ? event.payload : {};

                //this[method](payload);

            });

            this._flushQueue();

        }

    }

    /**
     * Flush the event queue.
     *
     * @return void
     */
    _flushQueue() {
        this.queue.splice(0, this.queue.length);
    }
}

Answer 1

您的代码中的问题是您在将值设置为目标之前调用 this._processQueue，因此它最终陷入无限循环，因为它从未将值设置为目标

class Foo {
  constructor() {
    this.queue = new Proxy([], {
      get: (target, property) => {
        return target[property];
      },
      set: (target, property, value) => {
        console.log('set called', value)
        target[property] = value;
        this._processQueue();
        return true;
      }
    });
  }

  _addToQueue(event) {
    this.queue.push(event);
  }

  _processQueue() {
    console.log('process queue', this.queue, this.queue.length);
    if (this.queue.length) {
      this.queue.forEach((event, index) => {
        console.log(event);
        //                 const method = this._resolveEvent(event.type);
        const payload = typeof event.payload !== 'undefined' ? event.payload : {};
        //this[method](payload);
      });
      this._flushQueue();
    }
  }

  _flushQueue() {
    this.queue.splice(0, this.queue.length);
  }
}

const q = new Foo()
q._addToQueue({
  type: 'clcik',
  payload: 'hello'
})
q._processQueue()

JavaScript 代理：如何清空数组目标

JavaScript Proxy: How to Empty Array Target

javascript

proxy

watch

我试过的...

更新