JavaScript:向可能不存在的对象添加嵌套属性

Question

假设我有一个 json 对象，我在其中记录我网站的访问者数量，按浏览器/版本分组。

let data = {
    browsers: {
        chrome: {
           43 : 13, 
           44 : 11
        }, 
        firefox: {
           27: 9
        }
    }
}

要增加特定的浏览器，我需要检查是否存在多个键，如果不存在，则创建它们。

let uap = UAParser(request.headers['user-agent']);

if (typeof uap.browser !== 'undefined') {

    if (typeof data.browsers === 'undefined') 
        data.browsers = {}

    if (typeof data.browsers[uap.browser.name] === 'undefined')
        data.browsers[uap.browser.name] = {}

    if (typeof data.browsers[uap.browser.name][uap.browser.version] === 'undefined')
        data.browsers[uap.browser.name][uap.browser.version] = 0

    data.browsers[uap.browser.name][uap.browser.version] += 1;
}

我的数据结构越深，事情就越疯狂。

感觉在 javascript 中必须有一种更简洁的方法来执行此操作。 总有更简洁的方法。有人可以在这里启发我吗？

Answer 1

这段较短的代码应该可以解决问题:

if (uap.browser) { // typeof is pretty much redundant for object properties.
    const name = uap.browsers.name; // Variables for readability.
    const version = uap.browser.version;

    // Default value if the property does not exist.
    const browsers = data.browsers = data.browsers || {}; 
    const browser = browsers[name] = browsers[name] || {};
    browser[version] = browser[version] || 0;

    // Finally, increment the value.
    browser[version]++;
}

请注意，您在本应使用 = 的地方使用了 ===(在 === {} 中)。

让我们解释一下这一行:

const browsers = data.browsers = data.browsers || {};

最后一部分:data.browsers = data.browsers || {} 将 data.browsers 设置为自身(如果存在)。如果还没有，它将被设置为一个新的空对象。
然后，将整个值分配给 browsers，以便于访问。

现在，较短的代码不应该是首要任务，但在这种情况下，您可以使代码更具可读性。