设置陷阱执行两次 - JS Proxy

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被调用两次：

target=[], prop=0, val=Manuel: 添加一个新值到索引
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');

设置陷阱执行两次 - JS Proxy

Set Trap execute for two times - JS Proxy

javascript

proxy