在嵌套对象上实现代理

Question

我在 ES6 中尝试使用代理，试图在一个对象上创建一个无限可链接的代理（从https://jsonplaceholder.typicode.com/users 获得），如果找不到该属性，它应该返回 empty{}。

我尝试将此功能实现到第二级（例如，user.address.geo）。 编辑：更新了检查道具值类型的代码

let users = [{
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "Sincere@april.biz",
    "address": {
        "street": "Kulas Light",
        "suite": "Apt. 556",
        "city": "Gwenborough",
        "zipcode": "92998-3874"
    },
    "phone": "1-770-736-8031 x56442",
    "website": "hildegard.org"
},
{
    "id": 2,
    "name": "Ervin Howell",
    "username": "Antonette",
    "email": "Shanna@melissa.tv",
    "address": {
        "street": "Victor Plains",
        "suite": "Suite 879",
        "city": "Wisokyburgh",
        "zipcode": "90566-7771"
    },
    "phone": "010-692-6593 x09125",
    "website": "anastasia.net"
}];

我想出了下面的代码

    var handler = {
    get: function (target, name) {
        return name in target ?
            target[name] : {};
    }
};

let pusers = users.map(item => {
    let pitem = new Proxy(item, handler);
    Reflect.ownKeys(pitem).map(prop => {
        pitem[prop] = (typeof pitem[prop] == 'object') ? new Proxy(pitem[prop], handler) : pitem[prop];
    })
    return pitem;
});

pusers.map(u => {
    console.log(u.address);
    console.log(u.contact.city)
});

此代码的输出不吸引人，它返回 undefined 而不是空的{} 对象

{ street: 'Kulas Light',
  suite: 'Apt. 556',
  city: 'Gwenborough',
  zipcode: '92998-3874' }
undefined

我这样做了几次，仍然得到相同的结果。我错过了什么吗？

Answer 1

您不想使用map 仅将数组的元素包装在代理中。相反，您希望您的 get 处理程序返回属性以包装所有对象：

const handler = {
    get(target, name) {
        const v = target[name];
        return typeof v == "object" ? new Proxy(v, handler) : v;
    }
};
let pusers = new Proxy(users, handler);

现在每个嵌套对象访问都将通过处理程序，包括 pusers[0].contact.city 之类的内容。

现在您只需要为不存在的属性添加默认值，我猜您会希望将它们存储在相应的目标上以允许突变：

const handler = {
    get(target, name) {
        const v = name in target ? target[name] : (target[name] = {});
        return typeof v == "object" ? new Proxy(v, handler) : v;
    }
};
let pusers = new Proxy(users, handler);