7

我有以下代理：

const p = new Proxy({
  [Symbol.iterator]: Array.prototype.values,
  forEach: Array.prototype.forEach,
}, {
  get(target, property) {
    if (property === '0') return 'one';
    if (property === '1') return 'two';
    if (property === 'length') return 2;
    return Reflect.get(target, property);
  },
});

它是一个类似数组的对象，因为它具有数值属性和length指定元素数量的属性。我可以使用循环对其进行迭代for...of：

for (const element of p) {
  console.log(element); // logs 'one' and 'two'
}

但是，该forEach()方法不起作用。

p.forEach(element => console.log(element));

此代码不记录任何内容。永远不会调用回调函数。为什么它不起作用，我该如何解决？

代码片段：

const p = new Proxy({
  [Symbol.iterator]: Array.prototype.values,
  forEach: Array.prototype.forEach,
}, {
  get(target, property) {
    if (property === '0') return 'one';
    if (property === '1') return 'two';
    if (property === 'length') return 2;
    return Reflect.get(target, property);
  },
});

console.log('for...of loop:');
for (const element of p) {
  console.log(element);
}

console.log('forEach():');
p.forEach(element => console.log(element));
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.16.0/polyfill.min.js"></script>

4

2 回答 2

7

for...of循环和循环之间的区别之一Array.prototype.forEach()是前者使用@@iterator属性循环对象，而后者从0to迭代属性length，并且仅当对象具有该属性时才执行回调。它使用[[HasProperty]]内部方法，在这种情况下false为每个数组元素返回。

解决方案是添加has()处理程序，它将拦截[[HasProperty]]调用。

工作代码：

const p = new Proxy({
  [Symbol.iterator]: Array.prototype.values,
  forEach: Array.prototype.forEach,
}, {
  get(target, property) {
    if (property === '0') return 'one';
    if (property === '1') return 'two';
    if (property === 'length') return 2;
    return Reflect.get(target, property);
  },
  has(target, property) {
    if (['0', '1', 'length'].includes(property)) return true;
    return Reflect.has(target, property);
  },
});

p.forEach(element => console.log(element));
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.16.0/polyfill.min.js"></script>

于 2016-11-03T18:35:27.400 回答
0

还有一个相对简单的附加选项。用于Array.from()生成可以迭代的数组。

const a = Array.from(p);
a.forEach(element => console.log(element));

完整代码：

const p = new Proxy({
  [Symbol.iterator]: Array.prototype.values,
  forEach: Array.prototype.forEach,
}, {
  get(target, property) {
    if (property === '0') return 'one';
    if (property === '1') return 'two';
    if (property === 'length') return 2;
    return Reflect.get(target, property);
  },
});

const a = Array.from(p);
a.forEach(element => console.log(element));
于 2021-06-17T04:13:14.127 回答