为数组构建Javascript代理的正确方法是什么,以便对单个更改数组不会多次调用"set"处理程序?
这就是我的意思:
我想在Proxy对象中包装一个简单的数组.我希望在我希望将一个新值推送到此Proxy对象时运行'set'处理程序.
麻烦的是,代理处理程序像"设置"被调用多次为一个操作为数组.在某些情况下,处理问题似乎相当容易,但在其他情况下,修改包含在Proxy对象中的数组的一次调用会使每个元素至少调用一次set处理程序.
假设我创建了最简单的代理处理程序对象和代理,如下所示:
let proxyHandlerObj = {
set:function(target,property,value,receiver) {
console.log("Set handler is invoked on property:",property,"with value:",value);
/*
* Important and interesting things done here
*/
return (target[property] = value);
}
};
let proxyArray = new Proxy(["zero","one","two"],proxyHandlerObj);
Run Code Online (Sandbox Code Playgroud)
这个代理只是拦截对我的代理数组的'set-like'调用并向控制台写一条消息.现在,当我在proxyArray对象的末尾添加一个新元素时:
proxyArray.push("three")
我会得到这样的东西:
Set handler is invoked on property: 3 with value: three
Set handler is invoked on property: length with value: 4
Run Code Online (Sandbox Code Playgroud)
我看到set处理程序被调用了两次:一次用于在数组中创建一个新元素,另一次用于设置数组的新长度属性.
好的,可以通过检查被操作的属性来处理此问题.我已经看到设置属性完成了这样的事情:
set:function(target,property,value,receiver) {
if(property!="length") {
console.log("Set …Run Code Online (Sandbox Code Playgroud)