21

我将一个对象包装在一个代理中，然后遍历它。如何控制它迭代的键？

如果我不覆盖密钥，代理将起作用：

var obj = {"hello": "world"}
var proxy = new Proxy(obj, {})
for (var key in proxy){
    console.log(key)
}
// logs "Hello"

但是，如果我更改ownKeys处理程序中的键，则不会记录任何内容。

var obj = {"hello": "world"}
var proxy = new Proxy(obj, {
    ownKeys: function(){
        return ["a", "b"]
    }
})
for (var key in proxy){
    console.log(key)
}
// Logs nothing

如果我返回"hello"作为ownKeys唯一"hello"记录的一部分。

显然enumerateES6 中有一个陷阱，但它已从 ES7 中删除。

是否仍然可以for...in使用代理控制循环？为什么enumerate从规范中删除？

4

3 回答 3

12

不幸的是，不可能再这样做了。

正如 Brian Terlson（EcmaScript 规范的编辑）所写：

代理枚举陷阱和 for-in 的问题，其中 iimplementations 被阻止预填充对象中的键列表，因为迭代器会导致可观察的影响。这意味着必须为每次迭代提取迭代。上次会议我们认为如果枚举陷阱耗尽迭代器就可以了，我们认为这会解决问题。问题是，现在它们是对象和该对象的代理之间可观察到的差异，主要是由于删除。

（来源：https ://github.com/rwaldron/tc39-notes/blob/master/es7/2016-01/2016-01-28.md#5xix-proxy-enumerate---revisit-decision-to-exhaust -迭代器通过https://ecmascript-daily.github.io/2016/02/10/why-remove-enumerate-and-reflect-enumerate）

因此，由于无法以令人满意的方式解决技术挑战，因此将其删除。

有代理陷阱

这样的in操作符仍然可以使用has代理陷阱捕获：

var p = new Proxy({}, {
  has: function(target, prop) {
    if (prop === 'a') { return true; }
    return false;
  }
});
'a' in p; // true
'b' in p; // false

选择

由于for (let key in proxy)循环现在更像是一个遗留功能，您可以将以下之一与ownKeys代理陷阱一起使用：

  • Object.keys()（仅限自己的可枚举属性）
  • Object.getOwnPropertyNames()（自有财产）
  • Reflect.ownKeys()（自己的属性和符号）

在此处输入图像描述 （来源：https ://twitter.com/nilssolanki/status/659839340592422912 ）

（但您可能已经知道这一点，因为您首先使用的是代理）

于 2016-07-26T12:31:47.107 回答
6

user2106769 将解决方案作为评论提供，但对于像我这样没有看到他们评论的其他人，您可以使用and覆盖for..in迭代：ownKeysgetOwnPropertyDescriptor

var obj = { "hello": "world" };
var proxy = new Proxy(obj, {
    ownKeys: function() {
        return ["a", "b"];
    },
    getOwnPropertyDescriptor: function(target, key) {
        return { enumerable: true, configurable: true, value: this[key] };
    }
});
for (var key in proxy) {
    console.log(key);
}

编辑：正如 Pärt Johanson 提到的，为了正确起见，getOwnPropertyDescriptor 应该返回“值”。

于 2018-05-02T16:56:10.410 回答
6

用户 user2106769 的建议和 yeerk 的覆盖 getOwnPropertyDescriptor 以允许枚举代理属性的答案存在一个在使用它时应该注意的缺陷，它在捕获 getOwnPropertyDescriptor 时没有设置 value 属性，因此一些其他代码依赖于该行为将无法正常工作。

演示该缺陷的代码及其解决方案如下：

var obj = { "hello": "world" };
var flawedProxy = new Proxy(obj, {
    ownKeys: function() {
        return ["a", "b"];
    },
    getOwnPropertyDescriptor: function(target, key) {
         return { enumerable: true, configurable: true };
    }
});

var goodProxy = new Proxy(obj, {
    get: function(target, key) {
      // modify something here if you want to
      return target[key];
    },
    ownKeys: function() {
        return ["a", "b"];
    },
    getOwnPropertyDescriptor: function(target, key) {
         return { value: this.get(target, key), enumerable: true, configurable: true };
    }
});

// value is accessible, getOwnPropertyDescriptor not trapped
console.log(Object.getOwnPropertyDescriptor(obj, 'hello').value);

// value is undefined, getOwnPropertyDescriptor not trapped correctly
console.log(Object.getOwnPropertyDescriptor(flawedProxy, 'hello').value);

// value is accessible, getOwnPropertyDescriptor trapped correctly
console.log(Object.getOwnPropertyDescriptor(goodProxy, 'hello').value);

于 2019-03-12T14:35:18.893 回答