使用get处理程序在代理上调用时，Array.prototype.forEach（）不起作用

Question

我有以下代理：

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> 

Answer 1

for...of循环和Array.prototype.forEach()之间的区别for...of是前者使用@@iterator属性循环对象，而后者将属性从0迭代到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>