设置Trap执行两次- JS代理

Question

我在使用js中的代理，但是有些东西是奇怪的=>

let _usernames = [];

_usernames = new Proxy(_usernames, {
  set(target, prop, val) {
    console.count(); //this execute for two times!
    if(typeof val === 'string') {
      target[prop] = val;
      return true;
    } else {
      return false;
    }
  }
});

_usernames.push('Manuel');

当我推到数组时，Set陷阱只应该调用一次，但它执行了两次。

当我推到数组=>时，控制台中出现了一个错误

Uncaught TypeError: proxy set handler returned false for property '"length"'

我怎么才能解决这个问题呢？

Answer 1

调用Array#push会使set被调用两次：

1. target=[]，prop=0，val=Manuel：向index
2. target="Manuel"，prop=length添加一个新值，val=1：数组

的更新长度

在这种情况下，第二个调用将返回false，因为长度值是数字的。

一种可能的解决办法：

​

let _usernames = [];

_usernames = new Proxy(_usernames, {
  set(target, prop, val) {
    console.log(target, prop, val);
    if(typeof val === 'string' || prop === 'length') {
      target[prop] = val;
      return true;
    } else {
      return false;
    }
  }
});

_usernames.push('Manuel');

​