仅使用 JavaScript 代理向数组添加偶数

问题描述

我正在学习 JavaScript 代理。

通过使用设置陷阱，我只想向数组添加偶数。但是每次都扔

未捕获的类型错误：代理上的“设置”：陷阱返回属性错误 '长度'

这是我的代码示例。

//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);

解决方法

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

Return value

set() 方法应该返回一个布尔值。

返回 true 表示分配成功。
如果 set() 方法返回 false，并且赋值发生在严格模式代码中，则会抛出 TypeError。

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 ]

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

试试这个：

let evenNumbers = [];

evenNumbers = new Proxy(evenNumbers,{
    set(target,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 javascript-proxy