Javascript ES6 Proxy 返回一个可迭代数组

发布于07月29日

我需要练习一些数据映射函数的代码.为此，我需要一个代理，当请求任何属性时，它返回一个具有一个元素(本身；一个可迭代数组)的可迭代array.这将激活数据映射器层(此处未显示)中的所有循环和属性判断.

大概是这样的:

p = new Proxy([], {
  get(obj, prop) {
    if(prop === 'length') return obj.length
    if(prop === 'push') return obj.push
    if(p.length === 0) p.push(p)
    return p
  }}
)

这是一个良好的开端:

> p.any.length
1

但在这里失败了:

> for(let v of p.any){console.log(v)}
Uncaught TypeError: p.any is not iterable

我需要循环来迭代和sole.log一个元素:

> p.any
Proxy [
  <ref *1> [ Proxy [ [Circular *1], [Object] ] ],
  { get: [Function: get] }
]

一些代理docs和guides覆盖in和对象，但不覆盖of和array.

推荐答案

出现该错误的原因是，for..of循环将查询具有@@iterator符号属性的代理对象，而您的代码将返回p，而不是像Array.prototype[Symbol.iterator]那样返回iterator.

解决方案很简单:就像您允许访问length和push一样，也可以对符号属性执行相同的操作.

你可能会考虑的另一件事是，不要做p.push(p)，而是做obj.push(p).这样，您可以忽略用户发出的push，并可以将此操作作为first操作来执行.

结果代码:

const p = new Proxy([], {
  get(obj, prop) {
    if (obj.length === 0) obj.push(p);
    if (prop === 'length' || typeof prop === "symbol") return obj[prop];
    return p;
  }}
);

for (let v of p) {
  console.log(v);
}

console.log(p);
console.log(p.any);
console.log(p.any.any);

也许您还应该让其他属性访问通过，比如数组方法(forEach、reduce、map、filter，...等).