使用 JavaScript 代理仅将偶数添加到数组

Question

我正在学习 JavaScript 代理。

通过使用 set trap 我只想将偶数添加到数组。但是每次抛出

Uncaught TypeError: 'set' on proxy: trap returned falsish for property 'length'

这是我的代码示例。

//Only even numbers will be added here. We are using Js Proxy

let evenNumbers = [];

evenNumbers = new Proxy(evenNumbers, {
    set(target, p, value, receiver) {
        if ( (value % 2) === 0 ) {
            target[p] = value;
            return true
        }else {
            return false;
        }

    }
});

evenNumbers.push(2);

Answer 1

对于这两种情况，您都需要 return true，因为

Return value

The set() method should return a boolean value.

Return true to indicate that assignment succeeded.

If the set() method returns false, and the assignment happened in strict-mode code, a TypeError will be thrown.

push 两次调用代理，一次通过推送值，另一次更改 length 属性。为了避免在此代理中进行不必要的更多操作，您可以提前退出这个不需要的属性.

let evenNumbers = [];

evenNumbers = new Proxy(evenNumbers, {
    set (target, p, value, receiver) {
        if (p === 'length') return true; // exclude this property
        if (value % 2 === 0) {
            target[p] = value;
        }
        return true;
    }
});

evenNumbers.push(2);
console.log(evenNumbers.length); // 1
evenNumbers.push(3);
console.log(evenNumbers.length); // Still 1
console.log(evenNumbers);        // [ 2 ]

Answer 2

问题是函数 .push() 试图更新长度 (evenNumbers.length = 1)，而陷阱不允许这样做。

试试这个：

let evenNumbers = [];

evenNumbers = new Proxy(evenNumbers, {
    set(target, p, value, receiver) {
        if ( isFinite(p) ) {
            // The key is a number (index), so there's code trying to add/change an element of the array.
            if ( (value % 2) === 0 ) {
                target[p] = value;
                return true
            }else {
                return false;
            }
        } else {
            return true;
        }
    }
});

evenNumbers.push(2); // OK
evenNumbers.push(3); // TypeError

使用 JavaScript 代理仅将偶数添加到数组

Only add even numbers to Array using JavaScript Proxy

javascript

javascript-proxy